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
|
||||
|
||||
```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