modified: main_dc/yalarba/serv_spa/spa/vue/README.md
new file: main_dc/yalarba/serv_spa/spa/vue/documentation/docs.md renamed: main_dc/yalarba/serv_spa/spa/vue/advices.txt -> main_dc/yalarba/serv_spa/spa/vue/src/assets/advices.txt add documentation for yalarba.ru
This commit is contained in:
@@ -1,10 +1,3 @@
|
|||||||
### Есть задания для фрилансеров. Каждое задание 1000 рублей.
|
|
||||||
|
|
||||||
1. Задача настроить авторизацию через coocky no javaScript.
|
|
||||||
2. Хранение состояния через vuex.
|
|
||||||
3. Создать Makefile для работы со сборкой деплоем.
|
|
||||||
|
|
||||||
|
|
||||||
## Project Setup
|
## Project Setup
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
|
|||||||
@@ -0,0 +1,262 @@
|
|||||||
|
# Документация проекта YalArba
|
||||||
|
|
||||||
|
**Версия документации:** 1.0 (Первичная)
|
||||||
|
**Дата составления:** 03 декабря 2025 года
|
||||||
|
**Актуальный статус проекта:** Разработка в процессе (базовый функционал)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. Общая информация
|
||||||
|
|
||||||
|
### 1.1. Назначение проекта
|
||||||
|
**YalArba** — это веб-приложение, созданное на Vue 3 с использованием современных инструментов разработки. На текущем этапе реализована базовая структура SPA (Single Page Application) с системой авторизации и основными страницами-заглушками для будущего функционала.
|
||||||
|
|
||||||
|
### 1.2. Технологический стек
|
||||||
|
- **Фреймворк:** Vue 3 (Composition API, `<script setup>`)
|
||||||
|
- **Маршрутизация:** Vue Router 4
|
||||||
|
- **Состояние приложения:** Pinia (стейт-менеджмент)
|
||||||
|
- **Интернационализация:** Vue I18n
|
||||||
|
- **Сборка:** Vite (предположительно)
|
||||||
|
- **Стилизация:** CSS (с использованием модульных компонентов)
|
||||||
|
|
||||||
|
### 1.3. Текущий статус функционала
|
||||||
|
✅ **Реализовано:**
|
||||||
|
- Базовая структура SPA с маршрутизацией
|
||||||
|
- Система авторизации (логин, регистрация, защищенные маршруты)
|
||||||
|
- Главная страница с поисковой строкой
|
||||||
|
- Страницы профиля, настроек, поддержки, обратной связи
|
||||||
|
- Страница "О нас" с разделами о разработчиках
|
||||||
|
|
||||||
|
🔄 **В разработке:**
|
||||||
|
- Функционал поиска и отображения результатов
|
||||||
|
- Детальные страницы объектов (restObject)
|
||||||
|
- Основная бизнес-логика приложения
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Архитектура проекта
|
||||||
|
|
||||||
|
### 2.1. Структура каталогов
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── assets/ # Глобальные стили, шрифты, изображения
|
||||||
|
├── auth/ # Логика авторизации (store)
|
||||||
|
├── components/ # Vue-компоненты (сгруппированы по функциям)
|
||||||
|
├── locales/ # Файлы интернационализации (i18n)
|
||||||
|
├── router/ # Конфигурация маршрутизации
|
||||||
|
├── views/ # Страницы приложения (роуты)
|
||||||
|
├── App.vue # Корневой компонент
|
||||||
|
└── main.js # Точка входа приложения
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2.2. Маршрутизация (router/index.js)
|
||||||
|
Приложение использует Vue Router с защитой маршрутов через мета-поле `requiresAuth`.
|
||||||
|
|
||||||
|
#### 2.2.1. Публичные маршруты (доступны без авторизации):
|
||||||
|
- `/` - Главная страница (HomeView)
|
||||||
|
- `/about` - О проекте
|
||||||
|
- `/support` - Поддержка
|
||||||
|
- `/feetback` - Обратная связь
|
||||||
|
- `/results` - Результаты поиска
|
||||||
|
- `/registration` - Регистрация
|
||||||
|
- `/login` - Вход в систему
|
||||||
|
|
||||||
|
#### 2.2.2. Защищенные маршруты (требуют авторизации):
|
||||||
|
- `/profile` - Профиль пользователя
|
||||||
|
- `/settings` - Настройки
|
||||||
|
- `/restObject` - Детальная страница объекта
|
||||||
|
|
||||||
|
#### 2.2.3. Механизм защиты маршрутов:
|
||||||
|
```javascript
|
||||||
|
router.beforeEach(async (to, from, next) => {
|
||||||
|
const authStore = useAuthStore();
|
||||||
|
await authStore.checkAuth();
|
||||||
|
|
||||||
|
if (to.meta.requiresAuth && !authStore.isAuthenticated) {
|
||||||
|
next('/login'); // Перенаправление на страницу входа
|
||||||
|
} else {
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2.3. Компонентная структура
|
||||||
|
Каждая страница (view) состоит из:
|
||||||
|
1. **FHeader** - Полный заголовок (шапка сайта)
|
||||||
|
2. **Основной компонент страницы** (контент)
|
||||||
|
3. **FooterB** - Нижний колонтитул
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Страницы приложения
|
||||||
|
|
||||||
|
### 3.1. Главная страница (`/`)
|
||||||
|
**Компоненты:** `FHeader + SearchLine + FooterB`
|
||||||
|
**Назначение:** Отображает поисковую строку для будущего поискового функционала.
|
||||||
|
|
||||||
|
### 3.2. Страница авторизации (`/login`)
|
||||||
|
**Компоненты:** `FHeader + LogIn + FooterB`
|
||||||
|
**Компонент:** `inout.vue` (логика входа)
|
||||||
|
|
||||||
|
### 3.3. Страница регистрации (`/registration`)
|
||||||
|
**Компоненты:** `FHeader + Registration + FooterB`
|
||||||
|
**Компонент:** `registration.vue`
|
||||||
|
|
||||||
|
### 3.4. Профиль пользователя (`/profile`)
|
||||||
|
**Статус:** Требует авторизации
|
||||||
|
**Компоненты:** `FHeader + Profile + FooterB`
|
||||||
|
**Компонент:** `profile.vue`
|
||||||
|
|
||||||
|
### 3.5. Настройки (`/settings`)
|
||||||
|
**Статус:** Требует авторизации
|
||||||
|
**Компоненты:** `FHeader + Settings + FooterB`
|
||||||
|
**Компонент:** `settings.vue`
|
||||||
|
|
||||||
|
### 3.6. Объект (`/restObject`)
|
||||||
|
**Статус:** Требует авторизации, в разработке
|
||||||
|
**Компоненты:** `FHeader + RestObject + FooterB`
|
||||||
|
**Особенность:** Использует моковые данные (`mockPlace`)
|
||||||
|
|
||||||
|
### 3.7. Результаты поиска (`/results`)
|
||||||
|
**Компоненты:** `FHeader + SearchLine + Results + FooterB`
|
||||||
|
**Компоненты:** `searchLine.vue`, `results.vue`
|
||||||
|
|
||||||
|
### 3.8. О проекте (`/about`)
|
||||||
|
**Компоненты:** `FHeader + About + Developers + Commits + FooterB`
|
||||||
|
**Разделы:** Информация о проекте, разработчики, коммиты
|
||||||
|
|
||||||
|
### 3.9. Поддержка (`/support`)
|
||||||
|
**Компоненты:** `FHeader + Support + FooterB`
|
||||||
|
**Компонент:** `support.vue`
|
||||||
|
|
||||||
|
### 3.10. Обратная связь (`/feetback`)
|
||||||
|
**Примечание:** Возможна опечатка в названии (feedback → feetback)
|
||||||
|
**Компоненты:** `FHeader + Feetback + FooterB`
|
||||||
|
**Компонент:** `feetback.vue`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Система авторизации
|
||||||
|
|
||||||
|
### 4.1. Хранилище состояния (Pinia Store)
|
||||||
|
Расположение: `/src/auth/stores/auth.store.js` (предположительно)
|
||||||
|
|
||||||
|
**Основные функции:**
|
||||||
|
- `checkAuth()` - проверка статуса авторизации
|
||||||
|
- `isAuthenticated` - реактивное состояние авторизации
|
||||||
|
|
||||||
|
### 4.2. Процесс авторизации
|
||||||
|
1. Пользователь переходит на защищенный маршрут
|
||||||
|
2. `router.beforeEach` вызывает `authStore.checkAuth()`
|
||||||
|
3. Если пользователь не авторизован → перенаправление на `/login`
|
||||||
|
4. После успешной авторизации доступ к защищенным маршрутам разрешен
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Конфигурация приложения
|
||||||
|
|
||||||
|
### 5.1. Точка входа (main.js)
|
||||||
|
```javascript
|
||||||
|
import { createApp } from 'vue';
|
||||||
|
import SPA_VUE_App from './App.vue';
|
||||||
|
import appRouter from './router/index.js';
|
||||||
|
import i18n from './locales/i18n.js';
|
||||||
|
import { createPinia } from 'pinia';
|
||||||
|
|
||||||
|
const spaAppVue3 = createApp(SPA_VUE_App);
|
||||||
|
const pinia = createPinia();
|
||||||
|
|
||||||
|
spaAppVue3.use(pinia);
|
||||||
|
spaAppVue3.use(appRouter);
|
||||||
|
spaAppVue3.use(i18n);
|
||||||
|
|
||||||
|
spaAppVue3.mount('#app');
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5.2. Глобальные стили и шрифты
|
||||||
|
- `/src/assets/main.css` - основные стили
|
||||||
|
- `/src/assets/fonts.css` - подключение шрифтов
|
||||||
|
|
||||||
|
### 5.3. Интернационализация (i18n)
|
||||||
|
Конфигурация находится в `/src/locales/i18n.js`
|
||||||
|
(контент файла не предоставлен)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. Текущие задачи и TODO
|
||||||
|
|
||||||
|
### 6.1. Необходимо исправить:
|
||||||
|
1. **Опечатка в маршруте:** `feetback` → `feedback`
|
||||||
|
2. **Импорты в ResultsView.vue:**
|
||||||
|
```javascript
|
||||||
|
// Избыточный импорт (дважды)
|
||||||
|
import searchLine from '@/components/searchLine/searchLine.vue';
|
||||||
|
import SearchLine from '@/components/searchLine/searchLine.vue';
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6.2. Планируемый функционал:
|
||||||
|
1. **Реализация поиска** (компоненты `SearchLine`, `Results`)
|
||||||
|
2. **Работа с API** для получения реальных данных
|
||||||
|
3. **Детальная страница объекта** (заполнение `RestObject`)
|
||||||
|
4. **Интеграция бэкенда** для авторизации
|
||||||
|
5. **Заполнение страниц контентом** (About, Support, Settings)
|
||||||
|
|
||||||
|
### 6.3. Архитектурные улучшения:
|
||||||
|
1. Добавить Error Boundary для обработки ошибок
|
||||||
|
2. Реализовать ленивую загрузку компонентов для всех маршрутов
|
||||||
|
3. Добавить мета-теги для SEO
|
||||||
|
4. Реализовать систему уведомлений
|
||||||
|
5. Добавить валидацию форм
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. Рекомендации по разработке
|
||||||
|
|
||||||
|
### 7.1. Соглашения по именованию:
|
||||||
|
- **Компоненты:** PascalCase (`RestObjectView.vue`)
|
||||||
|
- **Файлы маршрутов:** Папка `views/` + суффикс `View`
|
||||||
|
- **Вложенные компоненты:** Группировка по функциональности
|
||||||
|
|
||||||
|
### 7.2. Структура компонентов:
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<!-- 1. Шапка -->
|
||||||
|
<!-- 2. Основной контент -->
|
||||||
|
<!-- 3. Подвал -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
// Импорты в порядке: header → основной компонент → footer
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7.3. Работа с состоянием:
|
||||||
|
- Использовать Pinia stores для глобального состояния
|
||||||
|
- Локальное состояние хранить в компонентах через `ref()`, `reactive()`
|
||||||
|
- Авторизацию обрабатывать через `auth.store`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. Развертывание и сборка
|
||||||
|
|
||||||
|
### 8.1. Предполагаемая команда сборки:
|
||||||
|
```bash
|
||||||
|
npm run build # или yarn build
|
||||||
|
```
|
||||||
|
|
||||||
|
### 8.2. Структура сборки:
|
||||||
|
- **Входная точка:** `index.html`
|
||||||
|
- **Основной скрипт:** `main.js`
|
||||||
|
- **Базовая настройка:** Мета-теги, фавиконка, подключение стилей
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. Контакты и поддержка
|
||||||
|
|
||||||
|
**Сайт проекта:** [yalarba.ru](https://yalarba.ru)
|
||||||
|
**Дата начала разработки:** Не указана (актуально на 03.12.2025)
|
||||||
|
**Статус:** Активная разработка
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Документация будет обновляться по мере добавления нового функционала. Все изменения в архитектуре и API должны отражаться в соответствующих разделах документации.*
|
||||||
Reference in New Issue
Block a user