2.2 Верстка сайта

В качестве редактора исходного кода использовался «Visual Studio Code». Файловая структура разработанного приложения представлена на рисунке 2.3.

Рисунок 2.3 – файловая структура директории разработанного приложения

Создали новую базу данных в SQLite под названием «defaultSQLite.db» и произвели операцию генерации таблиц, необходимых для работы функций. Произвели компиляцию проекта с помощью команды «npm install && npm run dev». Запустили сервер с помощью команды «npm run serve» и получили возможность зайти на сайт по адресу, полученному в результате выполнения команды «npm run serve», в нашем случае http://localhost:8081/.

Разработка web-страницы происходит в файле с расширением «.vue». На примере страницы с новостями будет видно, все необходимые пользователю элементы интерфейса: кнопки, надписи, таблица с информацией. А также добавлены всплывающие окна для обработки операций над данными.

Рисунок 2.4 - основное тело страницы

В теге <style> расположены стили что применяются для страницы новостей. А также используется bootstrap — это бесплатный фронтэнд фреймворк для быстрой и простой разработки сайтов [5].

Рисунок 2.5 – стили основных элементов

2.3 Обращение к серверу

Для обращения пользователя к серверу, используется асинхронный запрос в соответствии с рисунком 2.6.

Рисунок 2.6 – запрос на сервер

Заполняем доступные поля, где вводим ФИО, email, пароль в соответствии с рисунком с 2.7.

Рисунок 2.7 - форма регистрации

После успешной регистрации в БД появляется запись о пользователе в таблице «Users» в соответствии с рисунком 2.8.

Рисунок 2.8 - успешное добавление в базу

Обработчики запросов для обращения к серверу со стороны web-приложения представлено на рисунках 2.9-2.16.

Рисунок 2.9 - обработчик запроса авторизацию пользователя

Рисунок 2.10 - обработчик запроса для выхода пользователя

Рисунок 2.11 - обработчик запроса редактирования пользователя

Рисунок 2.12 - обработчик запроса редактирования новости

Рисунок 2.13 - обработчик запроса добавления новости

Рисунок 2.14 - обработчик запроса вывода задач пользователя

Рисунок 2.15 - обработчик запроса удаления пользователя

Рисунок 2.16 - обработчик запроса открытия новости

Обработчики событий на стороне сервера показаны на рисунках 2.17-2.23

Рисунок 2.17 - обработчик запроса открытия новости

Рисунок 2.18 - обработчик запроса открытия задач

Рисунок 2.19 - обработчик запроса сортировки пользователей

Рисунок 2.20 - обработчик запроса регистрации пользователя

Рисунок 2.21 - обработчик запроса авторизации пользователя

Рисунок 2.22 - обработчик запроса удаления пользователя

Рисунок 2.23 - обработчик запроса редактирования пользователя

Выше показаны основные запросы для работы между front-end и back-end. Далее будет представлен клиентский интерфейс и работа с ним [6].

3 Клиентский интерфейс

В результате был реализован как front-end, так и back-end сайта. Попадая на сайт для полноценной работы, нужно зарегистрироваться. Для этого следует заполнить все доступные поля в соответствии с рисунком 3.24

Рисунок 3.24 - интерфейс страницы регистрации

После успешной регистрации пользователя перенаправляет на страницу авторизации. Для дальнейшей работы заполняем доступные поля и авторизуемся в соответствии с рисунком 3.25.

Рисунок 3.25 - интерфейс страницы авторизации

После успешной авторизации у пользователя появляется полный доступ к сайту. Различные функции позволяют просматривать и добавлять новости в соответствии с рисунками 3.26 и 3.27.

Рисунок 3.26 - интерфейс страницы новостей

Рисунок 3.27 - интерфейс страницы добавления новостей

После успешного добавления новости она появится в списке новостей в соответствии с рисунком 3.28, в дальнейшем пользователь может редактировать данную запись в соответствии с рисунком 3.29.

Рисунок 3.28 - интерфейс страницы новостей

Рисунок 3.29 - интерфейс страницы редактирования новостей

Пользователь может выбрать доступный отчет из предложенных и увидеть результат своей деятельности, рейтинг сотрудников по поставленным задачам и узнать все задачи сотрудников как показано на рисунке 3.30.

Рисунок 3.30 - интерфейс главной страницы

Отчеты, представленные на рисунках 3.31-3.33 пользователь может распечатать.

Рисунок 3.31 - отчет о работе сотрудника

Рисунок 3.32 - рейтинг сотрудников

Рисунок 3.33 - отчет о поставленных задачах

Пользователь может поставить задачу для другого пользователя в соответствии с рисунком 3.34.

Рисунок 3.35 - интерфейс страницы добавления задачи

ЗАКЛЮЧЕНИЕ

В рамках курсового проекта реализован серверный API и клиентский интерфейс для взаимодействия с ним: был создана система формирования отчетной документации на базе шаблонных форм.

Главной задачей было создание системы, способной реализовать следующий набор функций:

• регистрация;

• вход-выход в личный кабинет;

• редактирование/удаление профиля;

• доска почета (рейтинг по критерию);

• лента новостей, редактирование новости;

• систему формирования отчетной документации на базе шаблонных форм.

Все требования, объявленные в техническом задании, были полностью реализованы в данном программном продукте.

Все задачи, поставленные в начале разработки проекта, были решены. Таким образом, цель работы достигнута.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Системы и средства формирования отчетов – URL: https://knowledge.allbest.ru/programming/3c0a65635b3ad68a4c43b88421316d37_0.html (дата обращения: 20.12.2021). – Текст: электронный.

2. Учебник HTML и CSS от Трепачёва Дмитрия – URL: http://old.code.mu/books/css (дата обращения: 20.12.2021). – Текст: электронный.

3. Vue JS: функции, события и жизненный цикл. Базовая терминология – URL: https://codernet.ru/articles/js/vue_js_funkczii_sobyitiya_i_zhiznennyij_czikl_bazovaya_terminologiya/ (дата обращения: 20.12.2021). – Текст: электронный.

4. Изучаем TypeScript Н. Розенталс – URL: https://codernet.ru/books/typescript/izuchaem_typescript_3_rozentals/ (дата обращения: 20.12.2021). – Текст: электронный.

5. Bootstrap 4: что нового, описание нововведений и преимуществ 4 версии – URL: https://codernet.ru/articles/drugoe/bootstrap_4_chto_novogo_opisanie_novovvedenij_i_preimushhestv_4_versii/ (дата обращения: 20.12.2021). – Текст: электронный.

6. Frontend- и Backend-разработчики — кто они: подробности о специальностях – URL: https://codernet.ru/articles/drugoe/frontend-_i_backend-razrabotchiki_—_kto_oni_podrobnosti_o_speczialnostyax/ (дата обращения: 20.12.2021). – Текст: электронный.