Done

Lab5/src/components/api/cards_api.js

@@ -0,0 +1,46 @@
+// cards_api.js
+
+// URL вашего JSON-сервера с данными о новостях
+const API_URL = 'http://localhost:8081/lines';
+
+// Функция для получения всех новостей
+export const getAllLines = async () => {
+  try {
+    const response = await fetch(API_URL);
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Ошибка при получении новостей:', error);
+    throw error;
+  }
+};
+
+// Функция для получения одной новости по id
+export const getLine = async (id) => {
+  try {
+    const response = await fetch(`${API_URL}/${id}`);
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Ошибка при получении новости:', error);
+    throw error;
+  }
+};
+
+// Функция для обновления новости
+export const updateLine = async (id, newData) => {
+  try {
+    const response = await fetch(`${API_URL}/${id}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(newData),
+    });
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Ошибка при обновлении новости:', error);
+    throw error;
+  }
+};

Lab5/src/main.jsx

@@ -9,6 +9,7 @@ import Page1 from './pages/Page1.jsx';
 import Page2 from './pages/Page2.jsx';
 import Page3 from './pages/Page3.jsx';
 import Page4 from './pages/Page4.jsx';
+import NewsPage from './pages/NewsPage.jsx';
 import Page5 from './pages/Page5.jsx';
 import Page6 from './pages/Page6.jsx';
 
@@ -34,6 +35,11 @@ const routes = [
     element: <Page4 />,
     title: 'Мир спорта',
   },
+  {
+    path: '/NewsPage',
+    element: <NewsPage />,
+    title: 'Новости',
+  },
   {
     path: '/page5',
     element: <Page5 />,

Lab5/src/pages/NewsPage.jsx

@@ -0,0 +1,50 @@
+// NewsPage.jsx
+
+import React, { useState, useEffect } from 'react';
+import { getAllLines } from '../components/api/cards_api';
+
+
+const NewsPage = () => {
+  const [news, setNews] = useState([]);
+
+  useEffect(() => {
+    // Получаем все новости при загрузке компонента
+    getAllNews();
+  }, []);
+
+  const getAllNews = async () => {
+    try {
+      // Получаем данные с сервера
+      const data = await getAllLines();
+      setNews(data); // Обновляем состояние новостей
+    } catch (error) {
+      console.error('Ошибка получения новостей:', error);
+    }
+  };
+
+  // Функция для создания карточки на основе данных новости
+  const createNewsCard = (newsData) => {
+    return (
+      <div className="col-md-4" key={newsData.id}>
+        <div className="card news-card">
+          <img src={newsData.image || 'https://via.placeholder.com/200'} className="card-img-top" alt="Изображение новости" />
+          <div className="card-body">
+            <h5 className="card-title">{newsData.price}</h5>
+            <p className="card-text">{newsData.count}</p>
+            <p className="card-text">{newsData.sum}</p>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="container">
+      <div className="row" id="news-cards-container">
+        {news.map((newsItem) => createNewsCard(newsItem))}
+      </div>
+    </div>
+  );
+};
+
+export default NewsPage;

Lab5/src/pages/Page2.jsx

@@ -90,8 +90,8 @@ const Page2 = () => {
                         </div>
                         <div className="col-md-4">
                             <div className="p-2">
-                                <img src={ulstuLogo} alt="Картинка" className="w-100" />
                                 <img src="./src/assets/image_from_second_1.jpg" alt="Картинка" className="d-block mt-5 w-100" />
+                                <img src="./src/assets/image_from_second_2.jpg" alt="Картинка" className="d-block mt-5 w-100" />
                             </div>
                         </div>
                     </div>

Lab5/src/pages/Page5.jsx

@@ -2,6 +2,7 @@ import { useForm } from 'react-hook-form';
 import { useState,useEffect } from 'react';
 import axios from 'axios';
 import { useDispatch } from 'react-redux';
+import './button.css';
 
 const Page5 = () => {
   const { register, handleSubmit } = useForm();

Lab5/src/pages/button.css

@@ -0,0 +1,11 @@
+.btn-purple {
+    background-color: #570257; /* Цвет фона кнопки */
+    color: #ffffff; /* Цвет текста на кнопке */
+    /* Другие стили */
+  }
+  
+  .btn-purple:hover {
+    background-color: #450045; /* Цвет фона кнопки при наведении */
+    color: #ffffff; /* Цвет текста на кнопке при наведении */
+    /* Другие стили при наведении */
+  }