Лабораторная работа № 3

Разработка одностраничного веб-приложения (SPA) с использованием фреймворка Vue.JS

Описание: Мигрировать ранее написанный сайт на фреймворк Vue.JS.

Минимальные требования:

• Должен быть подключён роутер
• Должна быть реализована работа с внешним API
• Разумное деление на компоненты

Вариант: Взял базу данных отеля, написанную на Django

---

Компоненты, представления, роутер и API

• clientTable - таблица для отображения клиентов
• CurrentBooks - отображения текщих бронирований
• headOfTableRooms - заголовки таблицы для отображения комнат
• modalForEdit - модальное окно для возможности редактировать объект базы данных
• roomsCard - отоборажние комнат
• workersCard - отображение сотрудников

---

• ClientPage - страница клиентов
• CurrentBooksForRoomPage - страница всех бронирований для выбранной комнаты
• LoginPage - вход
• MainPage - главная страница
• RoomsPage - страница всех комнат
• SingupPage - страница регистрации
• WorkersPage - страница всех работников

---

• src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
 history: createWebHistory(import.meta.env.BASE_URL),

 routes: [
   {
     path: '/all_workers',
     name: 'workers',
     component: () => import('../views/WorkersPage.vue')
   },
     {
         path: '/login',
         name: 'login',
         component: () => import('../views/LoginPage.vue')
     },
     {
         path: '/singup',
         name: 'singup',
         component: () => import('../views/SingupPage.vue')
     },
     {
         path: '/',
         name: 'main',
         component: () => import('../views/MainPage.vue')
     },
     {
         path: '/rooms',
         name: 'rooms',
         component: () => import('../views/RoomsPage.vue')
     },
     {
         path: '/room_book',
         name: 'room_book',
         component: () => import('../views/CurrentBooksForRoomPage.vue')
     },
     {
         path: '/client',
         name: 'client',
         component: () => import('../views/ClientPage.vue')
     },
 ]
})

// экспортируем сконфигурированный роутер
export default router

---

• API

---

Страницы: главная, вход и регистрация

• Реализована аутентификация по токенам, на данный момент навагиационная панель отображает лишь часть кнопок, поскольку пользователь не вошел в аккаунт

• Если не залогиненый пользователь захочет перейти по url, к которому у него нет доступа, то он получит это:

• Теперь войдем в аккаунт и посмотрим главную страницу

---

Страницы: номера, бронирования в конкретном номере

• Сортировка здесь происходит на серверной части:

• Теперь нажмем кнопку бронирования, нас перенаправит на /room_book. Если у нас на текущий день свободен номер, то можно будет заселить гостя, который уже есть в базе данных, если номер занят, то будет выведен соотвествующий статус

• Если нажать кнопку заселить, то выведется модальное окно

• Комната, которая занята:

• Также, по кнопке можно выселить постояльца или заселить, тогда статус комнаты ссотвественно поменяется:

---

Страницы: работников и постояльцев

• Постояльцы

• Работники

• При нажатии кнопок: добавить сотрудника, редактировать и удалить появятся следущие модальные окна, позвольющие выполнить данные действия

---

Вывод

В ходе работы был разработан одностраничное веб-приложение с использованием фреймворка Vue.JS и Django (DRF), и библиотекой bootsrtrap