Веб-разработка — итоги
Терминология раздела
| Термин | Смысл |
|---|---|
| HTML / CSS / JS | Структура, оформление, поведение страницы — глава 5 |
| Клиент / сервер | Браузер у пользователя; программа, принимающая HTTP |
| HTTP | Протокол «запрос — ответ» — глава 1, 2.09 |
| JSON | Текстовый формат обмена данными |
| REST / CRUD | Ресурсы + HTTP-методы; create, read, update, delete |
| CORS | Ограничение браузера для междоменных запросов |
| API | Endpoints и правила обмена данными |
| Фронтенд / бэкенд | Интерфейс в браузере; сервер, API, БД |
| Стек | Язык, фреймворк, СУБД, хостинг |
| Монолит | Одно приложение, один деплой |
| SPA / MPA | Интерфейс в браузере vs готовые HTML со сервера |
| MERN / LAMP | Типовые наборы технологий — глава 4 |
| CMS | WordPress и аналоги с админкой |
| Деплой | Выкладка на боевой сервер |
| ORM / СУБД | Связь таблиц с кодом; PostgreSQL, MySQL… |
Главное
Три слоя страницы
HTML — структура и смысл; CSS — внешний вид; JavaScript — поведение в браузере. Оформление держите в CSS, структуру — в семантических тегах HTML. — глава 5.
Дизайн и проект
Wireframe до кода; типографика, сетка, адаптив, доступность (a11y).
Этапы проекта:
- идея → ТЗ → макет → вёрстка → программирование → контент → тест → публикация
Варианты по сложности — статика, CMS (WordPress), своё приложение. — главы 6–7.
Клиент и сервер
Клиент (чаще браузер) инициирует HTTP-запрос. Сервер обрабатывает его и возвращает ответ — HTML, JSON, файл или ошибку. При разработке сервер часто на http://localhost:PORT. Подробнее — 1.23 фронт/бэк, глава 1.
HTTP
Запрос включает метод (GET, POST, …), URL, заголовки и опционально тело. Ответ — статус-код (200, 404, …), заголовки, тело. HTTP-методы, статус-коды.
JSON и CRUD
JSON — текстовый формат обмена; объекты — map, массивы — list. CRUD — create, read, update, delete; в REST сопоставляется с POST, GET, PUT/PATCH, DELETE.
REST и API
REST — ресурсы с URI (/tasks/5) и корректные статус-коды. API — набор endpoints для программ. REST, GraphQL.
CORS
Ограничение браузера при запросе с одного origin на другой. Лечится заголовками на сервере API или dev-proxy. CORS.
Конфигурация
.env и переменные окружения хранят секреты локально; файл в .gitignore. 1112 безопасность .env.
Типичные команды и инструменты
| Действие | Инструмент |
|---|---|
| Проверить API без UI | curl / 1133 |
| Отладить запрос из браузера | DevTools Network / 1116 |
| Вызов API из JS | fetch, 1145 |
| Локальная БД | Docker PostgreSQL / 104 |
| Коммит и PR | 117 |
Статус-коды — шпаргалка
| Код | Значение |
|---|---|
| 200 | OK, данные отданы |
| 201 | ресурс создан |
| 204 | успех без тела |
| 400 | ошибка в запросе клиента |
| 401 | не авторизован |
| 403 | нет прав |
| 404 | не найдено |
| 500 | ошибка сервера |
CRUD и HTTP
| Операция | HTTP | Пример |
|---|---|---|
| Create | POST | POST /tasks |
| Read | GET | GET /tasks, GET /tasks/1 |
| Update | PUT/PATCH | PATCH /tasks/1 |
| Delete | DELETE | DELETE /tasks/1 |
Соседние разделы
| Нужно | Куда |
|---|---|
| От URL до пикселей | 2.04 Сайты |
| HTTP и интеграции | 2.09 |
| HTML, CSS, JS | 3.09, 3.10, 5.01 |
| Коллекции в коде | 618 |
| Языки и фреймворки | 5. Языки |
| Отладка в браузере | DevTools |
| Тесты и PR | 1117, 117 |
| Поиск бага | 1119 |
Архитектура и стек
- SPA — интерфейс в браузере, данные с API.
- MPA — готовые HTML-страницы с сервера.
- MERN — MongoDB, Express, React, Node.js (один язык JS).
- LAMP — Linux, Apache, MySQL, PHP (классика хостинга).
- CMS — WordPress и аналоги, когда контент правит заказчик.
- Бэкенд — Django, Spring, ASP.NET Core, Node.js; фронт — React, Vue, Angular; сборка — Vite.
- Настройки UI —
localStorage; заказы и пользователи — SQL; ускорение — Redis; фон — RabbitMQ или Kafka. - Перенос — Git,
.env, миграция БД; рост нагрузки — реплики, балансировщик, контейнеры.
Подробно — глава 4.
Далее — чек-лист. Термины — выше.