Работа с данными.pptx

1.

Работа с
данными

2.

Сперва вам необходимо разработать БД!

3.

Как начать работу с API?
React работает на порту 5173 (Vite), а API — на другом
порту. Браузер запрещает запросы без CORS.

4.

1 шаг – создать
правильную
структуру.

5.

2 шаг – вспомнить,
а как её создать?
1) npm create vite@latest
my-api
1)
А потом выбрать React,
JavaScript.
2) cd my-api
3) npm install
4) mkdir backend
5) npm init -y

6.

Скачать нужные
зависимости!
Правильные пакеты
– это важно.
• В зависимости от того, какую вы
выбрали БД (я рекомендую
PostgreSQL). К примеру, для
PostgreSQL необходимо:
• npm install pg
• В package.json:

7.

Скачать нужные
зависимости!
Правильные пакеты
– это важно.
• В MySQL:
• npm install mysql2
• В package.json (может изменяться в
зависимости от проекта! Будьте
внимательны! Особенно обратите
внимание на имя!)

8.

Скачать нужные
зависимости!
Правильные пакеты
– это важно.
• В MySQL:
• npm install mssql
• В package.json (может изменяться в
зависимости от проекта! Будьте
внимательны! Особенно обратите
внимание на имя!)

9.

Скачать нужные
зависимости!
Правильные пакеты
– это важно.
• Выводит ошибку nodemon? Например, он его не видит, не понимает, что
это? Просто его докачайте: npm install nodemon.
• Любая другая ошибка? Сперва попробуйте докачать. Проверьте, что вы
скорректировали все названия под ваш проект.
• Напишите мне на почту и прикрепите гит. Я помогу вам решить проблему.
• Но сперва удостоверьтесь, что проблема актуальна! Для этого выполните
следующие слайды.

10.

Backend тоже
надо заполнить
Поскольку он состоит не только
из пакетов. Добавьте файлик
.env (и server)

11.

Файл .env: переменные
окружения. Назначение.
Назначение:
Хранит конфиденциальные данные и
настройки приложения отдельно от
кода.
Что содержит:
• Ключи API и пароли
• Настройки базы данных (хост, порт,
имя БД)
• Параметры сервера
• Другие конфигурационные значения
Зачем нужно:
• Безопасность (данные не
попадают в git)
• Разделение настроек для разных
сред (dev/prod)
• Легкая смена конфигурации без
изменения кода

12.

Файл .env: переменные
окружения. MSSQL
MSSQL_HOST=localhost
MSSQL_USER=your_strong_user
MSSQL_PASSWORD=your_strong_pa
ssword
MSSQL_DATABASE=testdb
MSSQL_PORT=1433
Я не могу знать вашего
пользователя, которого вы
создавали, пароль, название БД и
порт. Это лишь «общий» пример,
который нужно заполнить и
доработать по необходимости.

13.

Файл .env: переменные
окружения. PostgreSQL
PG_HOST=localhost
PG_USER=your_strong_user
PG_PASSWORD=your_strong_passwo
rd
PG_DATABASE=testdb
PG_PORT=5432
Я не могу знать вашего
пользователя, которого вы
создавали, пароль, название БД,
однако порт у вас должен быть 5432,
он такой по умолчанию (но если вы
его меняли, то нужно указать новый).
Это лишь «общий» пример, который
нужно заполнить и доработать по
необходимости.

14.

Файл .env: переменные
окружения. MySQL
MYSQL_HOST=localhost
MYSQL_USER=root
MYSQL_PASSWORD=password
MYSQL_DATABASE=testdb
MYSQL_PORT=3306
Я не могу знать вашего
пользователя, которого вы
создавали, пароль, название БД,
порт. Это лишь «общий» пример,
который нужно заполнить и
доработать по необходимости.

15.

Файл .env: переменные
окружения.
Вот мой пример. Можно заменить
название вашей БД на DB, на самом
деле это не так важно, я сделала это
для удобства визуализации ☺ Что
действительно важно – укажите
PORT=3001. Это необходимо для
того, чтобы соединять фронт и бек.

16.

Server (код подключения):
зачем нужен
Основная задача:
Что делает:
Сервер выступает мостом между
фронтендом (React) и базой данных.
Принимает запросы от клиента
(браузера)
Сервер — это мозг приложения,
который управляет всей бизнеслогикой.
Обращается к БД - выполняет SQLзапросы
Обрабатывает данные - фильтрует,
проверяет, преобразует
Возвращает результат клиенту в
формате JSON

17.

Server: заполнение (на примере
PostreSQL)

18.

Server: заполнение (на примере
PostreSQL)

19.

Server: заполнение (на примере
PostreSQL)

20.

Server:
заполнение
(на примере
PostreSQL)
Тут используется база
данных
(уже
существующая)
и
конкретная
таблица
appointments
с
существующими полями в
ней!

21.

Server: заполнение (на примере
PostreSQL)

22.

Пример пакетов.
• Если вам не хватает пакетов, вы всегда
можете их докачать или прописать вручную!
В этом нет ничего плохого. Но будьте с этим
предельно бдительны: к примеру, если
изменить scripts и потом попытаться написать
в консоль npm run dev (а 7 строчки у вас
банально не будет), то ничего не запустится.

23.

Как теперь
запустить?
• Всё так же просто, как и до этого:
используйте npm run dev. Если что-то не
работает, то сайт ТОЖЕ работать не будет.
Сперва вы пишите бэк, и во фронте
подключаетесь к нему. Т.е сперва вы пишите
именно его.
• Увидели ошибку? ЧИНИТЕ. Ни в коем случае
не оставляйте нерабочий бэк. Он не
«пройдет» сам по себе.

24.

Работа с
данными - API

25.

API (Application
Programming
Interface)
• API — это набор строго определенных правил
и протоколов, которые позволяют различным
программным
компонентам
взаимодействовать друг с другом.
Роль в веб-разработке:
• API выступает в качестве моста между
клиентской частью (фронтенд) и серверной
частью
(бэкенд)
приложения.
Когда
пользователь
выполняет
действие
в
интерфейсе, фронтенд отправляет запрос
через API к бэкенду, который обрабатывает
его и возвращает результат.

26.

JSON (JavaScript
Object Notation)
• JSON — это легкий текстовый формат для
обмена
структурированными
данными,
основанный
на
синтаксисе
объектов
JavaScript.
• Универсален — поддерживается всеми
современными языками программирования
• Компактен — менее объемный по сравнению
с XML
• Его
так
легко
парсить!
—
легко
преобразовывается в native-объекты языков
программирования

27.

CRUD Operations
• CRUD — это акроним, описывающий
четыре базовые операции, которые
можно
выполнять
с
любыми
персистентными
данными
в
информационных системах.
• CREATE (Создание)
• Назначение:
Добавление
записей в систему
новых
• HTTP-метод: POST
• Типичный
сценарий:
Регистрация
пользователя,
создание
заказа,
добавление товара

28.

CRUD Operations
• CRUD — это акроним, описывающий
четыре базовые операции, которые можно
выполнять с любыми персистентными
данными в информационных системах.
• READ (Чтение)
• Назначение:
данных
Получение
существующих
• HTTP-метод: GET
• Вариации:
• Получение коллекции (всех записей)
• Получение
конкретной
идентификатору
записи
по

29.

CRUD Operations
• CRUD — это акроним, описывающий
четыре базовые операции, которые
можно
выполнять
с
любыми
персистентными
данными
в
информационных системах.
• UPDATE (Обновление)
• Назначение:
Модификация
существующих записей
• HTTP-метод: PUT/PATCH
• Особенности: Требует идентификации
изменяемого ресурса

30.

CRUD Operations
• CRUD — это акроним, описывающий
четыре базовые операции, которые
можно
выполнять
с
любыми
персистентными
данными
в
информационных системах.
• DELETE (Удаление)
• Назначение:
системы
Удаление
записей
из
• HTTP-метод: DELETE
• Важность: Часто реализуется как
"мягкое удаление" (помечается как
неактивное)

31.

API будет находиться в
• Тут вам необходимо указать, по какому адресу искать данные.

32.

API

33.

AppointmentsList.jsx.
Фронт.
Подключаем зависимости,
нашего кода:
хуки
для
работоспособности

34.

AppointmentsList.jsx.
Фронт.

35.

AppointmentsList.jsx.
Фронт.

36.

AppointmentsList.jsx.
Фронт.
ВНИМАНИЕ! Это не
ВЕСЬ код, лишь
вырезка, чтобы
показать самое
главное. Весь код
лежит на гите!
Чтобы заработали
записи – нужно
использовать
{a.sevice_id), где
sevice_id название
столбца из таблицы в
базе данных.

37.

Конец
презентации
Выполняйте практическую работу в
Classroom ☺ Она появится на 2
паре (10:10) сегодня. Срок сдачи –
13:30 субботы.
По вопросам пишите на мою почту
d.d.yushina@mpt.ru