I AM

Шаг 1. Создание проекта

В этой демонстрации мы настроим учебный проект TaskBoard, с которым будем работать на протяжении курса. TaskBoard — это приложение-канбан для управления задачами. Преподаватель демонстрирует работу над ним в ходе лекций, а вы параллельно развиваете собственный проект OnlinePizza.

Создайте новый Vue-проект с помощью Vite (как было показано в уроке о создании проекта с помощью Vite) или vue-init (как было показано в уроке о создании проекта с помощью vue-init).

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

  • frontend — основная рабочая директория;
  • demo — песочница для реализации абстрактных компонентов.

Все необходимые шрифты, изображения и стили расположены в директории frontend/src/assets.

Стили компонентов будут предоставлены в ходе демонстраций.

Далее необходимо строго и последовательно следовать шагам демонстрации, чтобы избежать дополнительных сложностей и конфликтов.

Шаг 2. Запуск бэкенда через Docker

В качестве бэкенда используется json-server — простой REST API на основе JSON-файла. Бэкенд запускается через Docker.

Склонируйте репозиторий с бэкендом в удобное место (не внутрь вашего Vue-проекта):

git clone https://github.com/EnderWarik/vue-course-backend.git
cd vue-course-backend

Запустите API одной командой:

docker-compose up

Docker соберёт образ с json-server и запустит его. API будет доступен по адресу http://localhost:3000.

Для остановки нажмите Ctrl + C. Для перезапуска:

docker-compose down && docker-compose up

Шаг 3. Запуск фронтенда

В терминале из корневой директории проекта:

  1. Перейдите в директорию фронтенда: cd frontend
  2. Установите зависимости: npm install
  3. Запустите проект: npm run dev

Клиент будет доступен по адресу http://localhost:5173.

Шаг 4. Вход (авторизация) в приложение

В базе данных подготовлены тестовые пользователи. Для входа используйте:

email: user@example.com
password: password123

Запомните эти данные — они понадобятся при работе над авторизацией.

Шаг 5. API-документация

Для просмотра доступных эндпоинтов запустите бэкенд и откройте в браузере:

http://localhost:3000

json-server покажет список всех доступных маршрутов. Каждый маршрут соответствует коллекции данных из файла db.json.

API поддерживает стандартные REST-операции: GET, POST, PUT, PATCH, DELETE. Вы можете отправить запрос к любому эндпоинту прямо из браузера или через инструменты вроде Postman — это помогает проверить корректность работы API.

Пример: откройте http://localhost:3000/columns в браузере — вы увидите JSON-массив с колонками доски задач.

json-server автоматически поддерживает фильтрацию через query-параметры (например, GET /tasks?columnId=1), пагинацию и сортировку.

Заключение

Подход с json-server позволяет быстро получить рабочий REST API без настройки полноценного сервера. Все данные хранятся в файле db.json, который монтируется как volume в Docker — изменения сохраняются между перезапусками контейнера.

НазадДалее