Создание приложения для блога на React, часть 2: регистрация пользователей

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

Начинаем

Давайте начнем с клонирования исходного кода из первой части учебника.

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

Запустите сервер Node.js, и у вас будет приложение, запущенное по адресу http://localhost:7777/index.html#/.

Настройка бэкенда

Для этого приложения вы будете использовать MongoDB в качестве бэкенда. Следуйте инструкциям в официальной документации MongoDB, чтобы установить MongoDB на Ubuntu. После установки MongoDB вам понадобится коннектор для подключения к MongoDB в Node.js. Установите драйвер MongoDB Node.js с помощью Node Package Manager (или npm):

После установки драйвера вы сможете подключить драйвер в приложении.

Создайте файл user.js , в котором вы будете хранить информацию, связанную с пользователем. Внутри файла user.js требуются зависимости от клиента MongoDB.

Вы будете использовать библиотеку с именем assert для проверки возвращенного ответа. Добавим assert в файл user.js .

Давайте назовем нашу базу данных Blog в MongoDB, поэтому наш URL-адрес базы данных будет выглядеть так:

Внутри файла user.js создайте и экспортируйте функцию с именем signup .

Используя клиент MongoDB, попробуйте подключиться к базе данных. После подключения вы выведете соответствующее сообщение в терминале.

Настройка события регистрации

После того, как вы настроите бэкенд с MongoDB, давайте реализуем событие регистрации. Внутри страницы main.jsx включите событие изменения в поле ввода имени, электронной почты и пароля в классе signup .

Свяжите вышеуказанные изменения событий в конструкторе класса.

Определите переменные состояния внутри конструктора класса signup .

Определите метод регистрации внутри класса signup . Внутри метода регистрации, используя библиотеку axios , сделайте вызов метода post методу signup в файле user.js .

Внутри функции signup в файле user.js вы будете реализовывать вставку в базу данных.

Добавьте обработчик запроса /signup в файл app.js , как показано, чтобы обработать событие click-up click. Внутри функции обработчика запроса /signup выполните вызов метода user.signup .

Подключим файл user.js в файле app.js .

Сохраните указанные выше изменения и перезапустите сервер. Откройте в своем браузере страницу http://localhost:7777/index.html#/signup, и у вас должна быть страница регистрации. Нажмите кнопку «Sign Up», и у вас будет выведено в терминале сообщение connected .

Сохраняем данные пользователя в MongoDB

Чтобы сохранить данные пользователя в базе данных Blog , вы создадите коллекцию user . Внутри этой коллекции вы будете хранить все данные пользователя, такие как имя, адрес электронной почты и пароль. MongoClient.connect возвращает параметр db, с помощью которого вы можете вставить запись в коллекцию user .

Вы будете использовать метод insertOne для вставки отдельной записи в коллекцию пользователей. Измените код в методе регистрации в user.js , как показано ниже:

Вот полный код user.js :

Измените обработчик запроса /signup в файле app.js , чтобы передать имя, адрес электронной почты и пароль методу signup в файле user.js .

Сохраните указанные выше изменения и перезапустите сервер. Откройте в своем браузере http://localhost:7777/index.html#/signup. Заполните регистрационные данные пользователя и нажмите кнопку регистрации. У вас будет Saved the user sign up details . cообщение в терминале сервера. Войдите в оболочку MongoDB и проверьте коллекцию user в базе данных Blog . Чтобы найти информацию о пользователе, введите следующую команду в оболочке MongoDB:

Вышеуказанная команда отобразит данные пользователя в формате JSON.

Внедрение проверки входа в систему

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

Создайте функцию под названием validateSignIn в файле user.js .

Внутри функции validateSignIn с помощью клиента MongoDB вы подключаетесь к базе данных Blog и запрашиваете таблицу user для пользователя с указанным именем пользователя и паролем. Вы будете использовать метод findOne для запроса к коллекции user.

Проверьте возвращенный результат на null, если запись не найдена.

Как видно из приведенного выше кода, если запись не найдена, в обратном вызове возвращается false. Если запись найдена, в обратном вызове возвращается значение true.

Вот полный метод validateSignIn :

В методе /signin в файле app.js вы вызовете метод validateSignIn . В функции обратного вызова вы будете проверять ответ. Если значение true, то оно будет указывать на действительный вход, иначе будет недопустимый вход. Вот как это выглядит:

Сохраните указанные выше изменения и перезапустите сервер. Откройте в своем браузере http://localhost:7777/index.html#/. Введите действительное имя пользователя и пароль, и у вас будет успешное сообщение, зарегистрированное в консоли браузера. При вводе неверного имени пользователя и пароля сервер отобразит сообщение об ошибке.

Подведем итоги

В этой части учебника вы узнали, как реализовать процесс регистрации пользователей. Вы видели, как создать представление регистрации и передать данные из пользовательского интерфейса React в Node.js, а затем сохранить их в MongoDB. Вы также изменили функцию входа в систему, чтобы проверить действительный вход пользователя в базе данных MongoDB.

В следующей части учебника вы будете использовать функции добавления сообщений и отображения страницы.