Проект на ReactJS + Express.js для предмета "Технологии обработки информации"

Выполнил студент группы 0432-05 Иванов Владислав В.

Задания

Задание 1 - код находится тут.
1. Реализовать реакт приложение, которое получает данные пользователя с сервера
2. С помощью [].find() => найти принадлежащий конкретному пользователю пост, и его также вывести на страницу ( получится карточка содержащая данные о пользователе, и данные что пользователь написал в посте). Проверку можно завязать на id (Пользователь) == userId (Пост)
Задание 2 - текущий репозиторий.
1. Реализовать раздел навигации Вход / Регистрация
2. Развернуть на фронте стор менеджер (redux)
3. Реализовать редюсер, который будет вызывать редюсер для получения пользователя и произовить регистрацию пользователя (в данном случае соединять массив) let users = [ {...}, newUser ]
4. Хранить шаблонные данные пользователя в локальной переменной, которую вернет редюсер
5. Развернуть сервер на express.js. Создать роутинги по аналогии с роутингом posts
6. При нажатии на кнопку Вход / Зарегистрироваться передавать заполненные данные на сервер, в соответствующий роутинг (GET , POST)
7. Если действие является "Вход" - выполнить вызов метода Users.findOne({login: login, password: password}), полученный ответ передать в реакт (фронт), иначе вывести положительный ответ с текстом "Пользователь отсутствует".
8. Если действие является "Регистрация" заносить в базу данных в коллекцию (таблицу) users данные, введенные пользователем. [ ]После чего перенаправлять на роутинг получения пользователя ( res.redirect(/user/${id}) ) и вернуть полученного пользователя в реакт (фронт).

Пояснения

Тут я оставлю небольшую справку по данному проекту.

Задание 2

Задача 1

Реализовать раздел навигации Вход / Регистрация

Раздел навигации был реализован в <Aside> страницы. В Redux хранится объект (в userReducer), содержащий поле authorized. Во время логина/авторизации/регистрации значение этого ключа изменяется на true; при логауте, соответственно, false. В <Aside> постоянно проверяется значение ключа authorized и, в соответствии со значением, выводит пользователю либо ссылки на регистрацию и авторизацию, либо его данные.

Задача 2

Развернуть на фронте стор менеджер (redux)

Развернуто в src\store\reducers\usersReducer.js. У меня используется для хранения данных об этом авторизованном пользователе.

const initState = {
	authorized: false,
	nickname : '',
	login : '',
	registred : '',
	catwarId : 0
}

authorized - см. задачу 1

nickname - имя пользователя

login - уникальное имя полбзователя

registred - дата регистрации

catwarId - не учитывать; для будущего проекта

Задача 3, 4

Реализовать редюсер, который будет вызывать редюсер для получения пользователя и произовить регистрацию пользователя (в данном случае соединять массив) let users = [ {...}, newUser ]

Хранить шаблонные данные пользователя в локальной переменной, которую вернет редюсер

Мне кажется, что хранить данные обо всех пользователях на фронте - не лучшая идея... Пример использования Reducer указал в задаче 2.

Задание 2 - со звёздочкой

Весь бэкэнд находится в database.

Внимание! Я не успел доделать блоги на фронте, а на сервере всё уже сделано. На бэке может быть закомментированный код - это код для блогов. Он рабочий и проверен.

Задача 5

Развернуть сервер на express.js. Создать роутинги по аналогии с роутингом posts

Находится в database\routes.

Задача 6, 7, 8

При нажатии на кнопку Вход / Зарегистрироваться передавать заполненные данные на сервер, в соответствующий роутинг (GET , POST)

Если действие является "Вход" - выполнить вызов метода Users.findOne({login: login, password: password}), полученный ответ передать в реакт (фронт), иначе вывести положительный ответ с текстом "Пользователь отсутствует".

Если действие является "Регистрация" заносить в базу данных в коллекцию (таблицу) users данные, введенные пользователем. После чего перенаправлять на роутинг получения пользователя ( res.redirect(/user/${id}) ) и вернуть полученного пользователя в реакт (фронт).

Авторизация происходит при помощи Cookie. Доступ к кукам на фронте не доступен! При регистрации/авторизации сервер возвращает ответ с заголовком set-cookie и его значением token=<token>. Все дальнейшие действия, касающиеся запросов к бэкэнду, происходят с помощью этого кука.

Бэкэнд:

Весь код тут: database\routes\users.js

Фонтэнд:

Логаут и выбор кнопок регистрация/авторизация в src\layouts\Aside.jsx;
Логин происходит на странице по адресу /login. Код фронта находится тут: src\contents\Login.jsx;
Регистрация происходит на странице по адресу /reg. Код фронта находится тут: src\contents\Reg.jsx.

Запуск проекта

При запуске проекта доступны несколько скриптов:

npm run build, npm run test, npm run eject - стандарт рикта

npm run react - запуск фронтэнда (без бэкэнда)

npm run database - запуск бэкэнда (без фронтэнда)

npm start - одновременный параллельный запуск всего проекта (фронтэнда и бэкэнда). Необходимо concurrently; иначе запускать проект по частям.

Константы

Константы проекта указаны в src\const.json. Там указаны данные для подключения к бэкэнду, базе данных и имя базы данных.

Дополнительноиспользованные библиотеки

Библиотеки, которые я использовал дополнительно (не по шаблону преподавателя).

colors - для быстрой покраски текста в консоли на бэкэнде.

cookie-parser - для куков

nodemon - для автоматичесокго перезапуска бэкэнда при изменении кода/ошибки

redux-devtools-extension с соответствующим расширением в браузере - для дебага фронта

Использование Git

Моя ошибка - не делал коммиты, из-за чего потом сам и страдал.

Serolapy / react_mysite