Урок 9 · Слайд 1

🏪

Фронтенд vs Бэкенд

Витрина магазина vs склад

🖥️ Фронтенд

HTML / CSS / JS

React / Vue

То что видит пользователь

Работает в браузере

⚙️ Бэкенд

Node.js / Python

Express / FastAPI

Данные и логика

Работает на сервере

Fullstack разработчик умеет работать и с фронтендом, и с бэкендом. Аналогия: витрина магазина (фронтенд) — то что ты видишь. Склад (бэкенд) — где хранятся все товары.

📖 Словарик

Фронтенд

Клиентская часть — интерфейс, который видит пользователь.

"HTML, CSS, JS — инструменты фронтенд-разработчика"

Бэкенд

Серверная часть — логика, база данных, обработка запросов.

"Node.js обрабатывает запросы на бэкенде"

Fullstack

Разработчик, работающий и с фронтендом, и с бэкендом.

"Fullstack разработчик создаёт весь сайт целиком"

Урок 9 · Слайд 2

🟢

Node.js: JavaScript на сервере

JS больше не только в браузере!

terminal

        $ node --version

        v20.11.0

        $ node

        > console.log("Привет с сервера!")

        Привет с сервера!

        $ node server.js

        Сервер запущен на порту 3000 🚀

server.js — минимальный сервер

        const http = require('http');

        const сервер = http.createServer((req, res) => {

          res.writeHead(200, { 'Content-Type': 'text/plain' });

          res.end('Привет от сервера!');

        });

        сервер.listen(3000, () => {

          console.log('Порт 3000');

        });

📖 Словарик

Node.js

Среда выполнения JavaScript вне браузера (на сервере).

"Node.js позволяет писать серверный код на JS"

require()

Подключает модуль (библиотеку) в Node.js.

"require('http') подключает модуль для создания сервера"

Порт

Виртуальный канал для сетевого соединения.

"Порт 3000 — адрес твоего локального сервера"

Урок 9 · Слайд 3

⚡

Express: создаём сервер

Самый популярный фреймворк для Node.js

server.js

        const express = require('express');

        const app = express();

        // Раздаём JSON

        app.use(express.json());

        // Главная страница

        app.get('/', (req, res) => {

          res.send('Привет, мир! 👋');

        });

        // Отдаём список пользователей

        app.get('/users', (req, res) => {

          res.json([{ id: 1, имя: 'Алиса' }]);

        });

        app.listen(3000);

        // Сервер запущен!

📖 Словарик

Express

Популярный фреймворк для создания серверов на Node.js.

"Express упрощает создание маршрутов и API"

app.get()

Обрабатывает GET-запрос по указанному адресу.

"app.get('/users') отвечает на запрос списка пользователей"

res.json()

Отправляет JSON-ответ клиенту.

"res.json({ok: true}) отправляет объект как JSON"

Урок 9 · Слайд 4

🗺️

REST API: маршруты GET/POST

Стандарт общения фронтенда и бэкенда

server.js — CRUD маршруты

        let записи = [{ id: 1, текст: 'Привет!' }];

        // GET — получить все записи

        app.get('/posts', (req, res) => {

          res.json(записи);

        });

        // POST — создать новую запись

        app.post('/posts', (req, res) => {

          const новая = { id: Date.now(), ...req.body };

          записи.push(новая);

          res.json(новая);

        });

        // DELETE — удалить по id

        app.delete('/posts/:id', (req, res) => {

          записи = записи.filter(p => p.id != req.params.id);

          res.json({ ok: true });

        });

📖 Словарик

REST API

Архитектурный стиль: каждый URL — ресурс, методы — действия.

"GET /posts — получить, POST /posts — создать"

HTTP методы

GET (читать), POST (создать), PUT (изменить), DELETE (удалить).

"POST /users создаёт нового пользователя"

:id (параметр маршрута)

Переменная часть URL. Доступ через req.params.id.

"DELETE /posts/42 удаляет пост с id=42"

Урок 9 · Слайд 5

🔄

Как фронт и бэк общаются

Полный цикл запроса

🌐
Браузер

→

📡
fetch('/api/posts')

→

⚡
Express сервер

→

🗄️
База данных

🎉
Показываем данные

←

📦
JSON ответ

←

✅
Запрос к БД

←

🔍
Обрабатывает маршрут

📖 Словарик

Цикл запрос-ответ

Браузер → сервер (запрос) → сервер → браузер (ответ).

"Каждый клик на кнопку может отправлять запрос"

Middleware

Промежуточный обработчик запроса в Express.

"express.json() — middleware для парсинга JSON"

CORS

Политика разрешения запросов с разных доменов.

"CORS нужен чтобы фронт мог обращаться к бэкенду"

Урок 9 · Слайд 6

🖥️

Развёртывание: порты и процессы

Запускаем сервер локально

terminal

        # Устанавливаем зависимости

        $ npm init -y

        $ npm install express

        # Запускаем сервер

        $ node server.js

        Сервер запущен: http://localhost:3000

        # Открываем в браузере:

        http://localhost:3000        → главная

        http://localhost:3000/posts  → список постов

        # Остановить сервер:

        Ctrl + C

        # Автоперезапуск при изменениях:

        $ npm install -g nodemon

        $ nodemon server.js

📖 Словарик

localhost

Адрес собственного компьютера. То же что 127.0.0.1.

"localhost:3000 — твой сервер работает на порту 3000"

npm

Node Package Manager — менеджер пакетов для Node.js.

"npm install express устанавливает библиотеку"

nodemon

Утилита, перезапускающая сервер при изменении файлов.

"nodemon следит за изменениями и перезапускает сервер"

Урок 9 · Слайд 7

📝

Мини-проект: гостевая книга

Fullstack приложение за один урок!

1

Создай package.json через npm init -y и установи express

2

Создай server.js с маршрутами GET /messages и POST /messages

3

Храни сообщения в массиве (имя, текст, дата)

4

Создай index.html с формой (имя + сообщение + кнопка)

5

Через fetch отправляй POST-запрос при отправке формы

6

Загружай и показывай все сообщения через GET-запрос 🏆