Урок 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-запрос 🏆