vue_vite_ts
Архитектура приложения
Общее описание
Архитектура приложения разделена на фронтенд и бекенд. Фронтенд реализован на Vue 3 с использованием TypeScript и системы сборки Vite. Бекенд написан на Python с использованием фреймворка FastAPI и ORM SQLModel.
Часть 1 - фронтенд
На клиенте используется система сборки приложения Vite, а также Node.js и менеджер пакетов
для загрузки необходимых модулей.
Структура проекта
frontend/├── node_modules/ # Зависимости проекта├── src/ # Исходный код приложения│ ├── assets/ # Статические файлы (изображения, иконки)│ ├── components/ # Компоненты приложения│ ├── router/ # Файлы маршрутизации (Vue Router)│ ├── tests/ # Тесты│ │ ├── moduletests/ # Модульные тесты│ │ ├── UI/ # UI-тесты│ │ └── tests/ # Юнит-тесты│ ├── App.vue # Главный компонент приложения│ ├── style.css # Стили для страниц│ └── main.ts # Точка входа приложения├── index.html # Шаблон HTML├── package.json # Список зависимостей и скриптов├── tsconfig.json # Конфигурация TypeScript├── vite.config.ts # Конфигурация Vite└── vitest.config.ts # Конфигурация Vitest для тестов
Основные модули
- Содержит статические ресурсы: изображения и иконки
- Компоненты приложения.components/
– компонент добавления задачи.AddTaskForm.vue
- компонент авторизации/регистрации.AuthReg.vue
- основной компонент для работы с задачами.Mainpage.vue
- компонент шапки.navbar.vue
- основной компонент шапки.navbarmain.vue
- компонент для поиска задач.SearchTasks.vue
- компонент для фильтрации задач.TaskFilters.vue
- компонент для отображения списка задач.TaskItem.vue
- компонент с текстом описывающим функционал задачи.text.vue
:
- описывает маршруты приложения с использованием Vue Router.index.ts
:
- модульные тесты (реализованы на Vitest и jsdom).moduletests/
- тесты пользовательских интерфейсов (с использованием Python, Selenium и Pytest)UI/
- юнит-тесты, покрывающие логику компонентов и страниц. (реализованы на Vitest)tests/
- Корневой компонент, содержащий базовый макет.
- Точка входа, где приложение инициализируется и монтируется.
Конфигурационные файлы:
- конфигурация TypeScript.tsconfig.json
- настройки для сборки через Vite.vite.config.ts
- конфигурация для тестирования.vitest.config.ts
Бэкенд
На стороне сервера используется язык программирования Python c использованием фреймворка FastAPI. База данных интерпретируется с помощью SQLModel (поверх SQLAlchemy) с использованием сервера базы данных MariaDB.
Структура проекта
backend/├── py/ │ └── database.py # Код для настройки базы данных├── main.py # Основной файл приложения со всеми маршрутами и функциями-обработчиками запросов, а также логикой настроки авторизации при помощи JWT токенов└── requirements.txt # Зависимости проекта
Основные модули
:
- Task - Модель SQLAlchemy для задачи
- UserDB - Модель пользователя
- TaskResponse - Pydantic модель ответа задачи
- User - Pydantic модель для пользователя
- TaskCreate - Pydantic модель для создания задачи
:
- register_new_user(...) - регистрация нового пользователя
- login_user(...) - авторизация пользователя
- get_tasks(...) - получение задач определенного пользователя
- create_task(...) - создает задачу для определенного пользователя
- update_task(...) - обновление задачи
- task_delete(...) - удаление задачи определенного пользователя
- список всех зависимостей, использующихся в серверном скрипте
Документация
По маршруту
доступна автоматически сгенерированная интерактивная документация API проекта, основанная на стандарте OpenAPI.
Инструкция по развертыванию проекта
Развернуть проект на сервере можно благодаря Docker образу, который настроен с помощью Dockerfile.
Для этого необходимо на сервере клонировать репозиторий с помощью команды:
git clone https://gitverse.ru/rupollya/vue_vite_ts.git
Перейти в папку проекта:
cd vue_vite_ts
Затем собрать образ:
docker build -t <название образа> .
И запустить контейнер из образа:
docker run -d -p 80:80 <название образа>
После успешного запуска контейнера проект должен быть доступен по адресу http://IP, где IP - IP вашего сервера.