Отчёт об изменениях проекта
Проект: Buhuchet — лендинг услуг удалённого бухгалтера
Дата: 02.03.2026 | Ветка: back_alpha
1. Общая сводка изменений
В ходе двух итераций разработки в проект были внесены следующие изменения:
- Добавлен веб-сервер на Express.js с поддержкой SPA и API
- Внедрён клиентский роутинг (Vue Router) с двумя страницами
- Создана страница-заглушка для оформления заказа
- Добавлена база данных SQLite с таблицей регионов
- Данные в селекторе городов теперь загружаются из БД через API
2. Итерация 1 — Express сервер и страница-заглушка
2.1 Установленные зависимости
| Пакет | Версия | Назначение |
|---|
express | ^5.2.1 | Веб-сервер |
vue-router | ^5.0.3 | Клиентский роутинг SPA |
2.2 Новые файлы
| Файл | Тип | Описание |
|---|
server.js |
Новый |
Express-сервер, порт 3000. Отдаёт статику из dist/, SPA-fallback на index.html для всех неизвестных маршрутов. |
src/router/index.js |
Новый |
Конфигурация Vue Router: маршрут / → HomePage, /order → OrderPage. |
src/pages/HomePage.vue |
Новый |
Главная страница, содержимое перенесено из App.vue. |
src/pages/OrderPage.vue |
Новый |
Страница-заглушка оформления заявки. Отображает название выбранного тарифа (из query-параметра ?tariff=), кнопку «Вернуться назад». |
2.3 Изменённые файлы
| Файл | Тип | Изменение |
|---|
src/main.js |
Изменён |
Импорт и подключение vue-router: app.use(router). |
src/App.vue |
Изменён |
Весь контент перенесён в HomePage.vue. Осталось только <router-view /> как точка монтирования роутера. |
src/components/TariffCards.vue |
Изменён |
Кнопка «Выбрать» теперь вызывает selectTariff(tariff), которая выполняет навигацию: router.push({ path: '/order', query: { tariff: tariff.title } }). |
package.json |
Изменён |
Добавлен скрипт "start": "node server.js" для запуска Express. |
3. Итерация 2 — База данных SQLite и динамический селектор регионов
3.1 Установленные зависимости
| Пакет | Версия | Назначение |
|---|
sqlite3 | ^5.1.7 | Работа с базой данных SQLite |
3.2 База данных
Файл базы данных: data.db (создаётся автоматически при первом запуске сервера).
| Объект БД | Тип | Описание |
|---|
regions |
Таблица |
Поля: id (INTEGER PK AUTOINCREMENT), region_name (TEXT).
Начальные данные: Москва, Санкт-Петербург, Казань.
|
region_list |
VIEW (представление) |
SELECT id, region_name FROM regions ORDER BY id.
Используется функцией getRegions() для абстракции доступа к данным.
|
3.3 Новые файлы
| Файл | Тип | Описание |
|---|
db/database.js |
Новый |
Модуль работы с БД. Экспортирует:
initializeDatabase() — создаёт таблицу, VIEW и заполняет начальными данными при первом запуске;getRegions() — функция получения регионов через представление region_list (не прямой запрос к таблице).
|
3.4 Изменённые файлы
| Файл | Тип | Изменение |
|---|
server.js |
Изменён |
Добавлены:
- Импорт
initializeDatabase и getRegions из ./db/database.js;
- Маршрут
GET /api/regions — возвращает JSON-массив регионов из БД;
- Запуск сервера теперь происходит после успешной инициализации БД.
|
src/components/SiteHeader.vue |
Изменён |
Добавлены:
- Секция
<script setup> с ref и onMounted;
- Запрос к
/api/regions при монтировании компонента;
- Динамический рендеринг опций через
v-for, v-model;
- Состояние загрузки («Загрузка...») до получения данных с сервера.
Удалены захардкоженные <option> (Москва, Санкт-Петербург, Казань).
|
4. Архитектура потока данных
data.db (SQLite)
└── таблица regions
└── VIEW region_list
└── db/database.js :: getRegions()
└── server.js :: GET /api/regions
└── SiteHeader.vue :: fetch('/api/regions') → <select>
5. Запуск проекта
| Режим | Команда | Описание |
|---|
| Разработка (Vite) | npm run dev | Hot reload, порт 5173. API запросы к /api/* не проксируются — нужен отдельный запуск сервера или настройка прокси в vite.config.js |
| Сборка | npm run build | Собирает проект в папку dist/ |
| Продакшн (Express) | npm start | Запускает Express на порту 3000. Требует предварительной сборки. |
Отчёт подготовлен автоматически — Claude Sonnet 4.6 — 02.03.2026