gitverse new year логотип

vue_vite_ts

Форк
0

16 часов назад
16 часов назад
16 часов назад
15 часов назад
16 часов назад
12 дней назад
README.md

Архитектура приложения

Общее описание

Архитектура приложения разделена на фронтенд и бекенд. Фронтенд реализован на Vue 3 с использованием TypeScript и системы сборки Vite. Бекенд написан на Python с использованием фреймворка FastAPI и ORM SQLModel.

Часть 1 - фронтенд

На клиенте используется система сборки приложения Vite, а также Node.js и менеджер пакетов

npm
для загрузки необходимых модулей.

Структура проекта

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 для тестов

Основные модули

assets/
- Содержит статические ресурсы: изображения и иконки

  • components/
    - Компоненты приложения.
    • AddTaskForm.vue
      – компонент добавления задачи.
    • AuthReg.vue
      - компонент авторизации/регистрации.
    • Mainpage.vue
      - основной компонент для работы с задачами.
    • navbar.vue
      - компонент шапки.
    • navbarmain.vue
      - основной компонент шапки.
    • SearchTasks.vue
      - компонент для поиска задач.
    • TaskFilters.vue
      - компонент для фильтрации задач.
    • TaskItem.vue
      - компонент для отображения списка задач.
    • text.vue
      - компонент с текстом описывающим функционал задачи.

router/
:

  • index.ts
    - описывает маршруты приложения с использованием Vue Router.

tests/
:

  • moduletests/
    - модульные тесты (реализованы на Vitest и jsdom).
  • UI/
    - тесты пользовательских интерфейсов (с использованием Python, Selenium и Pytest)
  • tests/
    - юнит-тесты, покрывающие логику компонентов и страниц. (реализованы на Vitest)

App.vue
- Корневой компонент, содержащий базовый макет.

main.ts
- Точка входа, где приложение инициализируется и монтируется.

Конфигурационные файлы:

  • tsconfig.json
    - конфигурация TypeScript.
  • vite.config.ts
    - настройки для сборки через Vite.
  • vitest.config.ts
    - конфигурация для тестирования.

Бэкенд

На стороне сервера используется язык программирования Python c использованием фреймворка FastAPI. База данных интерпретируется с помощью SQLModel (поверх SQLAlchemy) с использованием сервера базы данных MariaDB.

Структура проекта

backend/
├── py/
│ └── database.py # Код для настройки базы данных
├── main.py # Основной файл приложения со всеми маршрутами и функциями-обработчиками запросов, а также логикой настроки авторизации при помощи JWT токенов
└── requirements.txt # Зависимости проекта

Основные модули

database.py
:

  • Task - Модель SQLAlchemy для задачи
  • UserDB - Модель пользователя
  • TaskResponse - Pydantic модель ответа задачи
  • User - Pydantic модель для пользователя
  • TaskCreate - Pydantic модель для создания задачи

main.py
:

  • register_new_user(...) - регистрация нового пользователя
  • login_user(...) - авторизация пользователя
  • get_tasks(...) - получение задач определенного пользователя
  • create_task(...) - создает задачу для определенного пользователя
  • update_task(...) - обновление задачи
  • task_delete(...) - удаление задачи определенного пользователя

requirements.txt
- список всех зависимостей, использующихся в серверном скрипте

Документация

По маршруту

/docs
доступна автоматически сгенерированная интерактивная документация 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 вашего сервера.

Описание

Языки

Vue

  • HTML
  • TypeScript
  • CSS
  • Dockerfile
  • Python
Сообщить о нарушении

Использование cookies

Мы используем файлы cookie в соответствии с Политикой конфиденциальности и Политикой использования cookies.

Нажимая кнопку «Принимаю», Вы даете АО «СберТех» согласие на обработку Ваших персональных данных в целях совершенствования нашего веб-сайта и Сервиса GitVerse, а также повышения удобства их использования.

Запретить использование cookies Вы можете самостоятельно в настройках Вашего браузера.