Сделал альфа версию веб-сервера и интеграцию с базой данных

2026-03-02 22:39:04 +03:00
12 changed files with 3112 additions and 51 deletions
--- a/data.db
+++ b/data.db
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -6,11 +6,15 @@
  "scripts": {
    "dev": "vite",
    "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "start": "node server.js"
  },
  "dependencies": {
+    "express": "^5.2.1",
    "naive-ui": "^2.43.2",
-    "vue": "^3.5.25"
+    "sqlite3": "^5.1.7",
+    "vue": "^3.5.25",
+    "vue-router": "^5.0.3"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.2",
--- a/report.html
+++ b/report.html
@@ -0,0 +1,265 @@
+<!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 &nbsp;|&nbsp; Ветка: 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>&lt;router-view /&gt;</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>&lt;script setup&gt;</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>&lt;option&gt;</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>
+  &nbsp;&nbsp;└── таблица <em>regions</em><br>
+  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── VIEW <em>region_list</em><br>
+  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── db/database.js :: getRegions()<br>
+  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── server.js :: GET /api/regions<br>
+  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── SiteHeader.vue :: fetch('/api/regions') → &lt;select&gt;
+</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;">
+  Отчёт подготовлен автоматически &mdash; Claude Sonnet 4.6 &mdash; 02.03.2026
+</p>
+
+</body>
+</html>
--- a/server.js
+++ b/server.js
@@ -0,0 +1,29 @@
+import express from 'express'
+import Database from 'sqlite3'
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const app = express()
+const PORT = 3000
+
+const db = new Database.Database(join(__dirname, 'data.db'))
+
+app.use(express.static(join(__dirname, 'dist')))
+
+// получение списка регионов из БД
+app.get('/api/regions', (_req, res) => {
+  db.all('SELECT id, region_name FROM regions ORDER BY id', (err, rows) => {
+    if (err) return res.status(500).json({ error: 'Ошибка получения регионов' })
+    res.json(rows)
+  })
+})
+
+// и что им не понравилось в *?
+app.get('/{*splat}', (_req, res) => {
+  res.sendFile(join(__dirname, 'dist', 'index.html'))
+})
+
+app.listen(PORT, () => {
+  console.log(`Сервер запущен: http://localhost:${PORT}`)
+})
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,47 +1,11 @@
 <template>
-  
-  <div class="app">
-    <SiteHeader />
-    <main class="container">
-      <TaxModeSelector v-model="selectedMode" />
-      <TariffCards :mode="selectedMode" />
-      <MarqueeBar />
-      <PriceTable />
-      <ServicesGrid />
-      <AdvantagesSection />
-      
-    </main>
-    <Footer />
-  </div>
+  <router-view />
 </template>

-<script setup>
-import { ref } from 'vue'
-import SiteHeader from './components/SiteHeader.vue'
-import TaxModeSelector from './components/TaxModeSelector.vue'
-import TariffCards from './components/TariffCards.vue'
-import MarqueeBar from './components/MarqueeBar.vue'
-import PriceTable from './components/PriceTable.vue'
-import ServicesGrid from './components/ServicesGrid.vue'
-import AdvantagesSection from './components/AdvantagesSection.vue'
-import Footer from './components/Footer.vue'
-const selectedMode = ref('special')
-</script>
-
 <style>
 body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #000;
 }
-
-.app {
-  background: linear-gradient(90deg, #ffd400, #ff0000);
-  min-height: 100vh;
-}
-
-.container {
-  margin: 0 auto;
-  padding: 40px 60px 80px;
-}
 </style>
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -7,10 +7,15 @@

      <div class="col center">
        <div class="title">Удалённый бухгалтер</div>
-        <select class="city">
-          <option>Москва</option>
-          <option>Санкт-Петербург</option>
-          <option>Казань</option>
+        <select class="city" v-model="selectedRegion">
+          <option v-if="regions.length === 0" disabled value="">Загрузка...</option>
+          <option
+            v-for="region in regions"
+            :key="region.id"
+            :value="region.region_name"
+          >
+            {{ region.region_name }}
+          </option>
        </select>
      </div>

@@ -21,6 +26,25 @@
  </header>
 </template>

+<script setup>
+import { ref, onMounted } from 'vue'
+
+const regions = ref([])
+const selectedRegion = ref('')
+
+onMounted(async () => {
+  try {
+    const res = await fetch('/api/regions')
+    regions.value = await res.json()
+    if (regions.value.length > 0) {
+      selectedRegion.value = regions.value[0].region_name
+    }
+  } catch (err) {
+    console.error('Не удалось загрузить регионы:', err)
+  }
+})
+</script>
+
 <style scoped>
 .header {
  padding: 25px 0;
--- a/src/components/TariffCards.vue
+++ b/src/components/TariffCards.vue
@@ -31,7 +31,7 @@
          {{ tariff.price }} ₽
        </div>

-        <n-button type="primary" block>
+        <n-button type="primary" block @click="selectTariff(tariff)">
          Выбрать
        </n-button>
      </n-card>
@@ -41,6 +41,13 @@

 <script setup>
 import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+function selectTariff(tariff) {
+  router.push({ path: '/order', query: { tariff: tariff.title } })
+}

 const props = defineProps({
  mode: {
--- a/src/main.js
+++ b/src/main.js
@@ -2,9 +2,9 @@ import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
 import naive from 'naive-ui'
-
-
+import router from './router/index.js'

 const app = createApp(App)
 app.use(naive)
+app.use(router)
 app.mount('#app')
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="app">
+    <SiteHeader />
+    <main class="container">
+      <TaxModeSelector v-model="selectedMode" />
+      <TariffCards :mode="selectedMode" />
+      <MarqueeBar />
+      <PriceTable />
+      <ServicesGrid />
+      <AdvantagesSection />
+    </main>
+    <Footer />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import SiteHeader from '../components/SiteHeader.vue'
+import TaxModeSelector from '../components/TaxModeSelector.vue'
+import TariffCards from '../components/TariffCards.vue'
+import MarqueeBar from '../components/MarqueeBar.vue'
+import PriceTable from '../components/PriceTable.vue'
+import ServicesGrid from '../components/ServicesGrid.vue'
+import AdvantagesSection from '../components/AdvantagesSection.vue'
+import Footer from '../components/Footer.vue'
+
+const selectedMode = ref('special')
+</script>
+
+<style scoped>
+.app {
+  background: linear-gradient(90deg, #ffd400, #ff0000);
+  min-height: 100vh;
+}
+
+.container {
+  margin: 0 auto;
+  padding: 40px 60px 80px;
+}
+</style>
--- a/src/pages/OrderPage.vue
+++ b/src/pages/OrderPage.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="order-page">
+    <div class="order-card">
+      <div class="order-icon">📋</div>
+      <h1>Оформление заявки</h1>
+      <p class="order-subtitle">Тариф: <strong>{{ tariffName }}</strong></p>
+      <p class="order-description">
+        Страница в разработке. Скоро здесь хоть что-нибудь появится.
+      </p>
+      <n-button type="primary" size="large" @click="goBack">
+        ← Вернуться назад
+      </n-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+const tariffName = computed(() => route.query.tariff || 'Не выбран')
+
+function goBack() {
+  router.push('/')
+}
+</script>
+
+<style scoped>
+.order-page {
+  background: linear-gradient(90deg, #ffd400, #ff0000);
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.order-card {
+  background: #fff;
+  border-radius: 16px;
+  padding: 60px 80px;
+  text-align: center;
+  max-width: 500px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+}
+
+.order-icon {
+  font-size: 64px;
+  margin-bottom: 20px;
+}
+
+h1 {
+  font-size: 28px;
+  margin: 0 0 12px;
+  color: #111;
+}
+
+.order-subtitle {
+  font-size: 18px;
+  color: #444;
+  margin-bottom: 20px;
+}
+
+.order-description {
+  font-size: 15px;
+  color: #777;
+  line-height: 1.6;
+  margin-bottom: 36px;
+}
+</style>
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,13 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomePage from '../pages/HomePage.vue'
+import OrderPage from '../pages/OrderPage.vue'
+
+const routes = [
+  { path: '/', component: HomePage },
+  { path: '/order', component: OrderPage }
+]
+
+export default createRouter({
+  history: createWebHistory(),
+  routes
+})