266 lines
11 KiB
HTML
266 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Отчёт об изменениях — проект Buhuchet</title>
|
||
<style>
|
||
body {
|
||
font-family: 'Times New Roman', Times, serif;
|
||
font-size: 14pt;
|
||
margin: 2.5cm 3cm;
|
||
color: #000;
|
||
line-height: 1.5;
|
||
}
|
||
h1 {
|
||
font-size: 18pt;
|
||
text-align: center;
|
||
margin-bottom: 6pt;
|
||
}
|
||
h2 {
|
||
font-size: 14pt;
|
||
margin-top: 18pt;
|
||
margin-bottom: 4pt;
|
||
border-bottom: 1px solid #555;
|
||
padding-bottom: 2pt;
|
||
}
|
||
h3 {
|
||
font-size: 13pt;
|
||
margin-top: 12pt;
|
||
margin-bottom: 2pt;
|
||
}
|
||
.subtitle {
|
||
text-align: center;
|
||
color: #444;
|
||
margin-bottom: 20pt;
|
||
}
|
||
.meta {
|
||
text-align: center;
|
||
font-size: 11pt;
|
||
color: #666;
|
||
margin-bottom: 30pt;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 8pt 0 16pt;
|
||
font-size: 12pt;
|
||
}
|
||
th {
|
||
background: #f0f0f0;
|
||
border: 1px solid #999;
|
||
padding: 6pt 8pt;
|
||
text-align: left;
|
||
}
|
||
td {
|
||
border: 1px solid #ccc;
|
||
padding: 5pt 8pt;
|
||
vertical-align: top;
|
||
}
|
||
tr:nth-child(even) td { background: #fafafa; }
|
||
code {
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 11pt;
|
||
background: #f4f4f4;
|
||
padding: 1pt 4pt;
|
||
border-radius: 2pt;
|
||
}
|
||
.new-file { color: #1a7a1a; font-weight: bold; }
|
||
.mod-file { color: #7a4a00; font-weight: bold; }
|
||
ul { margin: 4pt 0 8pt 20pt; }
|
||
li { margin-bottom: 3pt; }
|
||
.section-num {
|
||
font-weight: bold;
|
||
margin-right: 6pt;
|
||
}
|
||
hr { border: none; border-top: 1px solid #ddd; margin: 20pt 0; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>Отчёт об изменениях проекта</h1>
|
||
<p class="subtitle">Проект: <strong>Buhuchet</strong> — лендинг услуг удалённого бухгалтера</p>
|
||
<p class="meta">Дата: 02.03.2026 | Ветка: back_alpha</p>
|
||
|
||
<hr>
|
||
|
||
<h2>1. Общая сводка изменений</h2>
|
||
<p>В ходе двух итераций разработки в проект были внесены следующие изменения:</p>
|
||
<ul>
|
||
<li>Добавлен веб-сервер на Express.js с поддержкой SPA и API</li>
|
||
<li>Внедрён клиентский роутинг (Vue Router) с двумя страницами</li>
|
||
<li>Создана страница-заглушка для оформления заказа</li>
|
||
<li>Добавлена база данных SQLite с таблицей регионов</li>
|
||
<li>Данные в селекторе городов теперь загружаются из БД через API</li>
|
||
</ul>
|
||
|
||
<hr>
|
||
|
||
<h2>2. Итерация 1 — Express сервер и страница-заглушка</h2>
|
||
|
||
<h3>2.1 Установленные зависимости</h3>
|
||
<table>
|
||
<tr><th>Пакет</th><th>Версия</th><th>Назначение</th></tr>
|
||
<tr><td><code>express</code></td><td>^5.2.1</td><td>Веб-сервер</td></tr>
|
||
<tr><td><code>vue-router</code></td><td>^5.0.3</td><td>Клиентский роутинг SPA</td></tr>
|
||
</table>
|
||
|
||
<h3>2.2 Новые файлы</h3>
|
||
<table>
|
||
<tr><th>Файл</th><th>Тип</th><th>Описание</th></tr>
|
||
<tr>
|
||
<td><code>server.js</code></td>
|
||
<td><span class="new-file">Новый</span></td>
|
||
<td>Express-сервер, порт 3000. Отдаёт статику из <code>dist/</code>, SPA-fallback на <code>index.html</code> для всех неизвестных маршрутов.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>src/router/index.js</code></td>
|
||
<td><span class="new-file">Новый</span></td>
|
||
<td>Конфигурация Vue Router: маршрут <code>/</code> → HomePage, <code>/order</code> → OrderPage.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>src/pages/HomePage.vue</code></td>
|
||
<td><span class="new-file">Новый</span></td>
|
||
<td>Главная страница, содержимое перенесено из <code>App.vue</code>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>src/pages/OrderPage.vue</code></td>
|
||
<td><span class="new-file">Новый</span></td>
|
||
<td>Страница-заглушка оформления заявки. Отображает название выбранного тарифа (из query-параметра <code>?tariff=</code>), кнопку «Вернуться назад».</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h3>2.3 Изменённые файлы</h3>
|
||
<table>
|
||
<tr><th>Файл</th><th>Тип</th><th>Изменение</th></tr>
|
||
<tr>
|
||
<td><code>src/main.js</code></td>
|
||
<td><span class="mod-file">Изменён</span></td>
|
||
<td>Импорт и подключение <code>vue-router</code>: <code>app.use(router)</code>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>src/App.vue</code></td>
|
||
<td><span class="mod-file">Изменён</span></td>
|
||
<td>Весь контент перенесён в <code>HomePage.vue</code>. Осталось только <code><router-view /></code> как точка монтирования роутера.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>src/components/TariffCards.vue</code></td>
|
||
<td><span class="mod-file">Изменён</span></td>
|
||
<td>Кнопка «Выбрать» теперь вызывает <code>selectTariff(tariff)</code>, которая выполняет навигацию: <code>router.push({ path: '/order', query: { tariff: tariff.title } })</code>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>package.json</code></td>
|
||
<td><span class="mod-file">Изменён</span></td>
|
||
<td>Добавлен скрипт <code>"start": "node server.js"</code> для запуска Express.</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<hr>
|
||
|
||
<h2>3. Итерация 2 — База данных SQLite и динамический селектор регионов</h2>
|
||
|
||
<h3>3.1 Установленные зависимости</h3>
|
||
<table>
|
||
<tr><th>Пакет</th><th>Версия</th><th>Назначение</th></tr>
|
||
<tr><td><code>sqlite3</code></td><td>^5.1.7</td><td>Работа с базой данных SQLite</td></tr>
|
||
</table>
|
||
|
||
<h3>3.2 База данных</h3>
|
||
<p>Файл базы данных: <code>data.db</code> (создаётся автоматически при первом запуске сервера).</p>
|
||
<table>
|
||
<tr><th>Объект БД</th><th>Тип</th><th>Описание</th></tr>
|
||
<tr>
|
||
<td><code>regions</code></td>
|
||
<td>Таблица</td>
|
||
<td>
|
||
Поля: <code>id</code> (INTEGER PK AUTOINCREMENT), <code>region_name</code> (TEXT).<br>
|
||
Начальные данные: <em>Москва, Санкт-Петербург, Казань</em>.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>region_list</code></td>
|
||
<td>VIEW (представление)</td>
|
||
<td>
|
||
<code>SELECT id, region_name FROM regions ORDER BY id</code>.<br>
|
||
Используется функцией <code>getRegions()</code> для абстракции доступа к данным.
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h3>3.3 Новые файлы</h3>
|
||
<table>
|
||
<tr><th>Файл</th><th>Тип</th><th>Описание</th></tr>
|
||
<tr>
|
||
<td><code>db/database.js</code></td>
|
||
<td><span class="new-file">Новый</span></td>
|
||
<td>
|
||
Модуль работы с БД. Экспортирует:
|
||
<ul>
|
||
<li><code>initializeDatabase()</code> — создаёт таблицу, VIEW и заполняет начальными данными при первом запуске;</li>
|
||
<li><code>getRegions()</code> — функция получения регионов через представление <code>region_list</code> (не прямой запрос к таблице).</li>
|
||
</ul>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h3>3.4 Изменённые файлы</h3>
|
||
<table>
|
||
<tr><th>Файл</th><th>Тип</th><th>Изменение</th></tr>
|
||
<tr>
|
||
<td><code>server.js</code></td>
|
||
<td><span class="mod-file">Изменён</span></td>
|
||
<td>
|
||
Добавлены:
|
||
<ul>
|
||
<li>Импорт <code>initializeDatabase</code> и <code>getRegions</code> из <code>./db/database.js</code>;</li>
|
||
<li>Маршрут <code>GET /api/regions</code> — возвращает JSON-массив регионов из БД;</li>
|
||
<li>Запуск сервера теперь происходит после успешной инициализации БД.</li>
|
||
</ul>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>src/components/SiteHeader.vue</code></td>
|
||
<td><span class="mod-file">Изменён</span></td>
|
||
<td>
|
||
Добавлены:
|
||
<ul>
|
||
<li>Секция <code><script setup></code> с <code>ref</code> и <code>onMounted</code>;</li>
|
||
<li>Запрос к <code>/api/regions</code> при монтировании компонента;</li>
|
||
<li>Динамический рендеринг опций через <code>v-for</code>, <code>v-model</code>;</li>
|
||
<li>Состояние загрузки («Загрузка...») до получения данных с сервера.</li>
|
||
</ul>
|
||
Удалены захардкоженные <code><option></code> (Москва, Санкт-Петербург, Казань).
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<hr>
|
||
|
||
<h2>4. Архитектура потока данных</h2>
|
||
<p style="font-family: 'Courier New', monospace; font-size: 11pt; background: #f4f4f4; padding: 10pt; border-left: 3px solid #999;">
|
||
data.db (SQLite)<br>
|
||
└── таблица <em>regions</em><br>
|
||
└── VIEW <em>region_list</em><br>
|
||
└── db/database.js :: getRegions()<br>
|
||
└── server.js :: GET /api/regions<br>
|
||
└── SiteHeader.vue :: fetch('/api/regions') → <select>
|
||
</p>
|
||
|
||
<hr>
|
||
|
||
<h2>5. Запуск проекта</h2>
|
||
<table>
|
||
<tr><th>Режим</th><th>Команда</th><th>Описание</th></tr>
|
||
<tr><td>Разработка (Vite)</td><td><code>npm run dev</code></td><td>Hot reload, порт 5173. API запросы к /api/* не проксируются — нужен отдельный запуск сервера или настройка прокси в vite.config.js</td></tr>
|
||
<tr><td>Сборка</td><td><code>npm run build</code></td><td>Собирает проект в папку <code>dist/</code></td></tr>
|
||
<tr><td>Продакшн (Express)</td><td><code>npm start</code></td><td>Запускает Express на порту 3000. Требует предварительной сборки.</td></tr>
|
||
</table>
|
||
|
||
<hr>
|
||
|
||
<p style="text-align:center; font-size: 11pt; color: #888; margin-top: 30pt;">
|
||
Отчёт подготовлен автоматически — Claude Sonnet 4.6 — 02.03.2026
|
||
</p>
|
||
|
||
</body>
|
||
</html>
|