search

pan1caisreal / filmsReviews

0 stars 0 forks source link

Проектно-конструкторская часть #6

Closed pan1caisreal closed 1 year ago

pan1caisreal commented 1 year ago
  1. ПРОЕКТНО-КОНСТРУКТОРСКАЯ ЧАСТЬ

3.1. Реализация готового приложения

Для решения задач данного курсового проекта и реализации приложения, обладающего всеми вышеперечисленными возможностями необходимо в первую очередь решить какая архитектура приложения будет использоваться, кроме того, полезно разбить приложение на модули, описать их назначение, работу и возможные связи друг с другом. Пользовать должен иметь легкий доступ к необходимым данных, для этого можно использовать веб-приложение, получающее всю необходимую информацию от серверного приложения через интерфейсы API. API — описание способов, которыми одна компьютерная программа может взаимодействовать с другой программой. Поэтому для реализации приложения необходимо:  спроектировать базу данных и реализовать работу с ней через серверной приложение  реализовать серверное приложение, предоставляющее удобный интерфейс API  Реализовать клиентское приложение использующие API серверного приложения 3.2. Разработка и реализация структуры базы данных Для реализации структуры базы данных была разработана его логическая схема. Данная схема приведена ниже: image Рисунок 3.1 – Логическая схема базы данных На основе этих данных была сформирована база данных. Связь many-to-many фильмов и актеров реализована через промежуточную таблицу ФильмАктер. Связь many-to-many списков и фильмов реализована через промежуточную таблицу CписокФильм Все таблицы были реализованы с помощью ORM-библиотеки Sequelize. Настройки подключения к серверу БД указаны в файле sequelize.js, сами настройки берутся из файла .env, а в index.js на сервере необходимо инициализировать эту функцию. Метод sync() синхронизирует структуру БД с определением моделей. Если для какой-то модели отсутствует соответствующая таблица в базе данных, то эта таблица создается. Сами определения моделей будут написаны в следующем разделе. Описание моделей с целью дальнейшего создания таблиц реализуется с помощью ORM-библиотеки Sequelize посредством вызова метода define. Пример реализации: const Film = sequelize.define('film',{ id:{type:DataTypes.INTEGER,primaryKey:true,autoIncrement: true}, title:{type:DataTypes.STRING}, genre:{type:DataTypes.STRING}, director:{type:DataTypes.STRING}, country:{type:DataTypes.STRING}, release_year:{type:DataTypes.DATE}, info:{type:DataTypes.TEXT}, img:{type:DataTypes.STRING}, }) В данном примере инициализируется модель сущности «Film» , c соответствующей таблицей БД «film». Помимо названия таблицы, в метод define передается объект полей таблицы, которые в свою очередь имеют options, такие как тип поля, является ли поле первичным или внешним ключом, является ли оно уникальным, нужно ли его инкрементировать и значение по умолчанию. Связи между таблицами в Sequelize определяются с помощью следующих функций:  A.hasOne(B) означает, что между A и B существуют отношения один-к-одному, при этом, внешний ключ определяется в целевой модели (B).  A.belongsTo(B) — отношения один-к-одному, внешний ключ определяется в источнике (A).  A.hasMany(B) — отношения один-ко-многим, внешний ключ определяется в целевой модели (B).  A.belongsToMany(B, { through: 'C' }) означает, что между A и B существуют отношения многие-ко-многим, таблица C выступает в роли связующего звена между ними через внешние ключи (например, aId и bId). Sequelize автоматически создает модель C при ее отсутствии, определяя в ней соответствующие ключи. Например:

Films.hasMany(Reviews)
Reviews.belongsTo(Films)
Films.belongsToMany(Actor,{through: Films_Actor})
Actor.belongsToMany(Film,{through: Films_Actor})

Связь "многие ко многим" сущности "фильм" и "актер" по логической схеме базы данных реализуется через промежуточную таблицу "Film_Actor". Это означает что в одном фильме могут играть разные актеры, и один актер может играть в разных фильмах 3.3. Разработка алгоритмов обработки информации

Описание сущностей базы данных: Система, работающая с базами данных, должна записывать данные в таблицы и получать их при необходимости. Для этих целей сервер должен получать и отправлять файлы в формате JSON. Для работы с данными в формате JSON необходимо добавить middleware. Обычный пользователь не должен иметь возможности администратора, поэтому создадим 3 middleware-компонента: для обработки ошибок(errorMiddleware), для аутентификации пользователя(authMiddleware) и для аутентификации администратора(checkRoleMiddleware). Middlware-компонент пользователя будет требовать, чтобы пользователь подтвердил свою личность с помощью JWT-токена. Этот токен он получает либо после регистрации, либо после входа в личный кабинет. checkRoleMiddleware проверяет, что роль пользователя имеет значение “ADMIN” – и дает ему дополнительные права. Для работы с JWT-токенами нам потребуется пакет jsonwebtoken, чтобы создавать и проверять токены. Чтобы хэшировать пароли пользователей, а не хранить их в базе данных в открытом виде также потребуется пакет bcrypt. Токен необходимо где-то хранить, чтобы использовать в дальнейшем. В данном это реализовано через куки. Маршруты для обмена данными находятся в директории routes. Пример маршрута для получения фильмов: router.get('/:id',filmController.getOne) Пример класса контроллеров:

const getOne = async (req,res,next) => { 
try {
 const {id} = req.params 
 const films = await Films.findOne({where: {id} }) 
 return res.json(films)
}catch (e){
 next(ApiError.badRequest(e.message)) 
} }

В ORM-библиотеке Sequelize имеются методы: create, update, save, destroy, reload, findOne, findByPk, findAll; которые необходимы для реализации методов контроллеров. Пример метода контроллера:

const getAll = async (req,res) => { 
let {genre,limit,page} = req.query 
page = page || 1
limit = limit || 12 
let offset = page * limit - limit 
let films; 
if(!genre){
 films = await Films.findAndCountAll({limit,offset})
}else{
 films = await Films.findAndCountAll({where:{genre},limit,offset})
} 
return res.json(films) 
}

  При вызове данного метода, в константу films передается массив объектов, получаемый из таблицы Films. Метод возвращает нужное количество фильмов зависящее от переменной limit, которая показывает сколько объектов нужно передать из БД. 3.4. Разработка интерфейса взаимодействия пользователя с системой Клиентская часть системы реализована на базе фреймворка React.js. Для ускорения верстки и большей адаптивности веб-интерфейса использовались компоненты из библиотеки ‘react-bootstrap’ и ’bootstrap’. Стили задавались с помощью CSS. Необходимо настроить систему маршрутизации. В React имеется своя система маршрутизации, которая позволяет сопоставлять запросы к приложению с определенными компонентами. Ключевым звеном в работе маршрутизации является модуль react-router, который состоит из react-router-dom и react-router-native. Для браузерных приложений предназначен модуль react-router-dom. Пример маршрутов из routes.js:

export const authRoutes = [ { path: POSTS_ROUTE, Component: <Posts /> }, { path: MOVIES_ROUTE, Component: <Movies /> }, ] Public-маршруты доступны всем посетителям, auth-маршруты доступны авторизованным пользователям, admin-маршруты – администратору. Сайт состоит из 3х блоков: header, body, footer. Блоки header и footer являются одинаковыми для всех страниц сайта. В первом блоке находится навигационная панель, включающая в себя логотип, по совместительству являющийся ссылкой на главную страницу сайта, ссылки «Войти» и «Регистрация» (для неавторизованных пользователей), «Мои отзывы», «Хочу посмотреть» и «Выход» (для авторизованных), «Админ панель» (для администратора). Ссылки – это не обычные ссылки, которые будут загружать с сервера страницы целиком, а специальный хук useNavigate из ‘react-router-dom’, который изменяет информацию на сайте в зависимости от URL ссылки. image Рис. 3.2 – Навигационная панель сайта В блоке footer содержится информация, которая может понадобиться пользователю. image Рис. 3.3 – Footer сайта В блоке body находится основной контент интернет-магазина, который изменяется при изменении состояния: • «Главная страница» - «Слайдер» с фильмами • «Страница фильма» - постер фильма, информация о фильме: название, режиссёр, страна, дата выхода фильма, краткое содержание, актеры которые в нем играли, рецензии которые пользователи оставили, возможность написать свою рецензию (если пользователь авторизован) и кнопка «Хочу посмотреть». • «Вход» и «Регистрация» - 2 поля типа input email и пароль, ссылки на регистрацию и вход соответственно, кнопка для отправки формы. • «Страница актера» - фото актера, информация об актере: рост, дата рождения, страна и фильмы в которых он играл. • «Мои отзывы» - страница с отзывами которые оставил пользователь, кнопки удаление и редактирования рецензий. • «Хочу посмотреть» - страница с фильмами которые пользователь добавил. • «Админ панель» - ссылки на добавление актеров и фильмов в БД.

wldmr-key commented 1 year ago

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