Руководство программиста
Выделяем основные папки для дальнейшей работы в проекте(см рисунок 17)
Рисунок 17 Основные папки для проекта
В папке auth будут храниться формы авторизации студентов, преподавателей, администратора. В папке components хранятся основные страницы приложения. В папку models будут храниться представления данных и их структурирование в приложении. Папка services предназначена для хранения сервисах приложения. Папка shared хранит компоненты, которые могут повторно использоваться в приложении.
Начнем разработку с страницы администратора, потому что он добавляет в базу данных преподавателей и секции, которые понадобятся нам в дальнейшей работе. Страница администора должна содержать карточки уже созданных секций и преподавателей, поэтому загружаем их в компоненте при его загрузке с помсощью сервисов( см рисунок 18)
Рисунок 18 Загружаем данные уже созданных секций и преподавателей
Если еще не созданы, то у нас не выведутся данные. Прописываем шаблон компонента данной страницы и реализовываем загрузку фотографий на нашей страницы. Используя сервис uploadService и сервер который мы создаем с помощью библиотек express и multer.(см рисунок 19 и 20)
Рисунок 19 Методы в компоненте для загрузки фотографий
onFileSelected(event: any): void метод вызывается, когда пользователь выбирает файл с своего устройства (например, изображение).Он получает выбранный файл из события (event) и сохраняет его в переменной selectedFile, если файл действительно выбран.
Это необходимо, чтобы позже можно было использовать данный файл для загрузки.
uploadImage(section: Section): void метод отвечает за загрузку изображения на сервер. Если файл был выбран (т.е. selectedFile не равен null), он вызывает метод uploadFile из UploadService и передает ему файл. В случае успешной загрузки (как указано в блоке next): URL загруженного изображения сохраняется в объекте section. Показано сообщение об успешной загрузке. Переменная selectedFile сбрасывается в null.
Если есть ошибка при загрузке (в блоке error), ошибка логируется в консоль, и пользователю отображается уведомление о неудаче.
Если файл не был выбран, выводится соответствующее сообщение.
Сервис UploadService UploadService — это сервис, который отвечает за загрузку файлов на сервер. Он использует HttpClient для выполнения HTTP-запросов. Метод uploadFile создает объект FormData, добавляет в него выбранный файл и отправляет его на указанный URL с помощью POST-запроса.(см рисунок 21)
Рисунок 20 сервер с использованием express и multer
Рисунок 21 Методя для передачи загрузки в сервер
Далее реализовываем логику с удалением и редактированием секции. onSubmit(): void сначала проверяется, валидны ли введенные данные с помощью метода validateSection. Если данные валидны, назначается уникальный ID секции. Затем вызывается сервис sectionService для добавления новой секции.(см рисунок 22) Если добавление прошло успешно, происходит:
Вывод сообщения об успехе.
Обновление списков секций у соответствующего преподавателя.
Повторная загрузка всех секций, чтобы отобразить актуальные данные.
Сброс формы для новой записи.
Рисунок 22 Метод загрузки секции
Теперь рассмотрим логику редактирования и удаления секции:
Метод onEdit устанавливает данные секции для редактирования и плавно прокручивает к форме для редактирования.
Метод onSaveEdit проверяет данные на валидность перед отправкой. Если данные валидны:
Сохраняется ID инструктора для возможных изменений.
Вызывается метод updateSection для обновления существующей секции.
Если изменился преподаватель, происходит обновление секций как у старого, так и у нового преподавателя.
После успешного обновления происходит загрузка текущих данных о преподавателях и вывод сообщения об успехе.
removeSectionFromTeacher: удаляет секцию из списка секций конкретного преподавателя. updateTeacherSections: обновляет список секций у преподавателя, когда секция добавляется (см рисунок 23 и 24)
Рисунок 23 Методы для редактирования секции.
Рисунок 24 Методы для корреткного изменения секций у преподавателей
Рассмотрим удаление секции. Метод onDelete запрашивает подтверждение на удаление секции.
Если пользователь подтвердил, вызывается метод deleteSection из сервиса.(см рисунок 25) Если удаление прошло успешно:
Секция удаляется из массива.
Удаляется также связь секции с преподавателем.
Выводится сообщение об успешном удалении.
Рисунок 25 Метод для удаления секции
Методы которые использую в SectionService для реализации логики этой страницы(см рисунок 26):
Добавление новых секций: Метод addSection отправляет POST-запрос на сервер с данными новой секции.
Обновление секций: Метод updateSection отправляет PUT-запрос для изменения существующей секции по ее ID.
Удаление секций: Метод deleteSection отправляет DELETE-запрос для удаления секции.
Получение всех секций: Метод getSections отправляет GET-запрос для получения списка всех доступных секций.
Рисунок 26 Методы в сервисе для реализации работ с данными секций
В TeacherService (см рисунок 27):
Получение преподавателя по ID: Метод getTeacherById получает данные конкретного преподавателя.
Обновление преподавателя: Метод updateTeacher отправляет PUT-запрос для обновления информации о преподавателе, включая их секции.
Рисунок 27 Методы в сервисе для работы с данными учителей
HTTP-запросы: Оба сервиса используют HttpClient для выполнения HTTP-запросов к серверу, что позволяет взаимодействовать с RESTful API для получения и управления данными.
Реализация страницы администратора для добавления учителей аналогичная. Единственным отличей является больше проверок данных в валидации формы.
Теперь перейдем к разработке главной страницы с регистрацией. Загружаем информацию с базы данных об учителях и секциях. Которые были добавлены через страницу администратора.(см рисунок 28)
Рисунок 28 методы для загрузки данных
Далее реализовываем логику регистрации студента. Импортируются необходимые модули, такие как FormBuilder и FormGroup для работы с реактивными формами. Импортируются сервисы для взаимодействия с данными (например, SectionService и StudentService). Также определяем @Output() sectionUpdated = new EventEmitter<void>(); событие для обновления секций. Нам это нужно чтобы количество доступных мест при регистрации автоматически обновлялись. Метод ngOnInit создает реактивную форму с использованием FormBuilder. Определяются поля формы с валидацией, например, обязательные поля и минимальная длина для пароля. Подписка на изменения в поле email, чтобы проверять существование этого адреса в базе данных. Вызов методов loadSections и loadInstitutes для загрузки доступных секций и институтов.
Метод checkEmailExists Этот метод вызывает сервис StudentService для проверки, существует ли уже введённый email. Полученный результат обновляет флаг emailExists.
За обработку регистрации отвечает метод onRegister. Он проверяется валидность формы. Если форма невалидна, устанавливаются флаги и дальнейшая обработка прерывается.Выполняется ещё одна проверка на существование email. Если email не существует, происходит резервирование секции, и показывается форма оплаты. Запускается таймер и обновляются секции. После успешной оплаты генерируется уникальный ID для студента. Создаётся экземпляр модели Student с данными из формы. Данные отправляются на сервер через studentService. Если отправка прошла успешно, показывается сообщение об успехе и форма сбрасывается. Для валидации формы помимо валидаторов Ангуляра, создала свои:
nameValidator(): проверяет, что имя содержит только буквы.
passwordStrengthValidator(control): проверяет сложность пароля.
groupValidator(control): проверяет, что группа соответствует заданному формату.(см Приложение )
Теперь реализуем роутинг на сайте. В файле app.routes.ts маршруты определяются в переменной approutes как массив объектов. В каждом объекте есть два ключевых свойства: path и component.(см рисунок 29)
Рисунок 29 Роутнг сайта
Для того чтобы пользователи могли переходить по этим маршрутам используем директивы routerLink. В шаблоне главного компонента обычно app.component.html нужно добавить <router-outlet>. Этот тег будет являться местом, где будут отображаться загружаемые компоненты в зависимости от текущего маршрута.
Следующим создаем страницы авторизации. Рассмотрим страницу авторизации студента, так как авторизация преподавателя и администратор ничем не отличается. Логика авторизации в Методе onSubmit. При отправке формы выполняется проверка её валидности. Если форма валидна, вызывается метод login сервиса AuthService, передавая email и пароль. (см рисунок 30)
Рисунок 30 Метод авторизаци в комопненте
Сервис Auth отвечает за авторизацию пользователей. Метод login Отправляет GET-запрос к API для получения списка всех студентов Сравнивает введенные email и пароль с данными, полученными из API.
Если пользователь найден, его данные сохраняются в localStorage и текущий пользователь обновляется через BehaviorSubjectи студент переходит на свою страницу. Если пользователь не найден, возвращается null.(см рисунок 31)
Рисунок 31 Код авторизации студента
Теперь рассмотрим реализацию страницы студента. Страница преподавателя почти аналогичная, отличием является то что преподаватель может загружать свою фотографию на страницу и у него есть поля для заметок в своем личном кабинете. В компоненте student-page Метод ngOnInit загружает информацию о текущем студенте из localStorage. Если данные студента не найдены, выводится ошибка в консоль. Метод loadInstituteAndSectionNames делает два запроса к API. Получение названия института по ID. Получение данных о секции студента по ID. Метод updateEmail обновляет email студента и производит запрос к API для сохранения изменений. Если обновление прошло успешно, данные студента сохраняются в localStorage. Метод updatePassword вызывает сервис для изменения пароля студента, используя его ID(см рисунок 32)
Рисунок 32 Реализация логики комопнента student-page