Выполнил студент группы 0432-05 Иванов Владислав В.
- Задание 1 - код находится тут.
- Реализовать реакт приложение, которое получает данные пользователя с сервера
- С помощью [].find() => найти принадлежащий конкретному пользователю пост, и его также вывести на страницу ( получится карточка содержащая данные о пользователе, и данные что пользователь написал в посте). Проверку можно завязать на id (Пользователь) == userId (Пост)
- Задание 2 - текущий репозиторий.
-
Реализовать раздел навигации Вход / Регистрация
-
Развернуть на фронте стор менеджер (redux)
-
Реализовать редюсер, который будет вызывать редюсер для получения пользователя и произовить регистрацию пользователя (в данном случае соединять массив) let users = [ {...}, newUser ]
-
Хранить шаблонные данные пользователя в локальной переменной, которую вернет редюсер
-
Развернуть сервер на express.js. Создать роутинги по аналогии с роутингом posts
-
При нажатии на кнопку Вход / Зарегистрироваться передавать заполненные данные на сервер, в соответствующий роутинг (GET , POST)
-
Если действие является "Вход" - выполнить вызов метода Users.findOne({login: login, password: password}), полученный ответ передать в реакт (фронт), иначе вывести положительный ответ с текстом "Пользователь отсутствует".
-
Если действие является "Регистрация" заносить в базу данных в коллекцию (таблицу) users данные, введенные пользователем. [ ]После чего перенаправлять на роутинг получения пользователя ( res.redirect(/user/${id}) ) и вернуть полученного пользователя в реакт (фронт).
-
Тут я оставлю небольшую справку по данному проекту.
Реализовать раздел навигации Вход / Регистрация
Раздел навигации был реализован в <Aside>
страницы. В Redux хранится объект (в userReducer), содержащий поле authorized
. Во время логина/авторизации/регистрации значение этого ключа изменяется на true
; при логауте, соответственно, false
. В <Aside>
постоянно проверяется значение ключа authorized
и, в соответствии со значением, выводит пользователю либо ссылки на регистрацию и авторизацию, либо его данные.
Развернуть на фронте стор менеджер (redux)
Развернуто в src\store\reducers\usersReducer.js
. У меня используется для хранения данных об этом авторизованном пользователе.
const initState = {
authorized: false,
nickname : '',
login : '',
registred : '',
catwarId : 0
}
authorized
- см. задачу 1
nickname
- имя пользователя
login
- уникальное имя полбзователя
registred
- дата регистрации
catwarId
- не учитывать; для будущего проекта
Реализовать редюсер, который будет вызывать редюсер для получения пользователя и произовить регистрацию пользователя (в данном случае соединять массив) let users = [ {...}, newUser ]
Хранить шаблонные данные пользователя в локальной переменной, которую вернет редюсер
Мне кажется, что хранить данные обо всех пользователях на фронте - не лучшая идея... Пример использования Reducer указал в задаче 2.
Весь бэкэнд находится в database.
Внимание! Я не успел доделать блоги на фронте, а на сервере всё уже сделано. На бэке может быть закомментированный код - это код для блогов. Он рабочий и проверен.
Развернуть сервер на express.js. Создать роутинги по аналогии с роутингом posts
Находится в database\routes
.
При нажатии на кнопку Вход / Зарегистрироваться передавать заполненные данные на сервер, в соответствующий роутинг (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
с соответствующим расширением в браузере - для дебага фронта
Моя ошибка - не делал коммиты, из-за чего потом сам и страдал.