7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. React

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

Read Time: 5 mins
This post is part of a series called Creating a Blogging App Using React.
Creating a Blogging App Using React, Part 1: User Sign-In
Creating a Blogging App Using React, Part 3: Add & Display Post

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

В первой части этой серии учебников вы увидели, как реализовать функцию входа в систему. В этой части вы узнаете, как реализовать функцию регистрации и изменить функцию входа в систему, чтобы проверять реальных  пользователей в 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.

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

Исходный код этого учебника доступен в GitHub.

Сообщите нам свои мысли или любые предложения в комментариях ниже.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.