В первой части этой серии руководств вы узнали, как реализовать функцию входа в систему. В этой части вы узнаете, как реализовать функцию регистрации и изменить функцию регистрации, чтобы проверять действительных пользователей из MongoDB.
Начиная
Давайте начнем с клонирования исходного кода из первой части урока.
|
1
|
git clone https://github.com/royagasthyan/ReactBlogApp-SignIn
|
После того, как каталог был клонирован, перейдите в каталог проекта и установите необходимые зависимости.
|
1
2
|
cd ReactBlogApp-SignIn
npm install
|
Запустите сервер Node.js, и приложение будет запущено по адресу http: // localhost: 7777 / index.html # / .
Настройка Back-end
Для этого приложения вы будете использовать MongoDB в качестве серверной части. Следуйте инструкциям в официальной документации MongoDB для установки MongoDB в Ubuntu. После установки MongoDB вам понадобится соединитель для подключения MongoDB и Node.js. Установите драйвер MongoDB Node.js с помощью диспетчера пакетов Node (или npm):
|
1
|
npm install mongodb
|
После того, как вы установили драйвер, вы сможете запросить драйвер в приложении.
Создайте файл с именем user.js котором вы будете хранить пользовательские материалы. Внутри файла user.js требуются клиентские зависимости MongoDB.
|
1
|
var MongoClient = require(‘mongodb’).MongoClient;
|
Вы будете использовать библиотеку assert для проверки возвращенного ответа. Включите assert в файл user.js
|
1
|
var assert = require(‘assert’);
|
Давайте назовем нашу базу данных Blog в MongoDB, поэтому URL нашей базы данных будет выглядеть так:
|
1
|
var url = ‘mongodb://localhost:27017/Blog’;
|
Внутри файла user.js создайте и экспортируйте функцию с именем signup .
|
1
2
3
4
5
|
module.exports = {
signup: function(){
// Code will be here
}
}
|
Используя клиент MongoDB, попробуйте подключиться к базе данных. После подключения вы зарегистрируете подключенное сообщение в терминале.
|
1
2
3
4
5
6
7
|
module.exports = {
signup: function(name, email, password){
MongoClient.connect(url, function(err, db) {
console.log(‘connected’)
});
}
}
|
Настройка события регистрации
После того, как вы настроили серверную часть MongoDB, давайте реализуем событие регистрации. main.jsx странице main.jsx событие on-change для текстовых полей ввода имени, main.jsx электронной почты и пароля в классе signup .
|
1
2
3
4
5
6
7
8
9
|
handleNameChange(e){
this.setState({name:e.target.value})
}
handleEmailChange(e){
this.setState({email:e.target.value})
}
handlePasswordChange(e){
this.setState({password:e.target.value})
}
|
Свяжите вышеупомянутые изменения события в конструкторе класса.
|
1
2
3
4
5
6
|
constructor(props) {
super(props);
this.handleNameChange = this.handleNameChange.bind(this);
this.handleEmailChange = this.handleEmailChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
}
|
Определите переменные состояния внутри конструктора класса signup .
|
1
2
3
4
5
|
this.state = {
name:»,
email:»,
password:»
};
|
Определите метод регистрации внутри класса signup . Внутри метода регистрации, используя библиотеку axios , выполните вызов метода post для метода signup в файле user.js
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
signUp(){
axios.post(‘/signup’, {
name: this.state.name,
email: this.state.email,
password: this.state.password
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
|
Внутри функции signup в файле user.js вы реализуете вставку базы данных.
Добавьте обработчик запроса /signup в файл app.js как показано, для обработки события щелчка при регистрации. Внутри функции обработчика запроса /signup сделайте вызов метода user.signup .
|
1
2
3
4
|
app.post(‘/signup’, function (req, res) {
user.signup(»,»,»)
console.log(res);
})
|
Требуется файл user.js внутри файла app.js
|
1
|
var user = require(‘./user’)
|
Сохраните вышеуказанные изменения и перезагрузите сервер. В браузере укажите http: // localhost: 7777 / index.html # / signup, и у вас должна появиться страница регистрации Нажмите на кнопку Зарегистрироваться , и вы получите сообщение о connected в терминале.
Сохранить данные пользователя в MongoDB
Чтобы сохранить информацию о пользователе в базе данных Blog , вы создадите коллекцию под названием user . Внутри пользовательской коллекции вы будете хранить все данные пользователя, такие как имя, адрес электронной почты и пароль. MongoClient.connect возвращает параметр db, с помощью которого вы можете вставить запись в коллекцию user .
Вы будете использовать метод insertOne для вставки одной записи в коллекцию пользователей. Измените код в методе регистрации в user.js как показано ниже:
|
1
2
3
4
5
6
7
8
|
db.collection(‘user’).insertOne( {
«name»: name,
«email»: email,
«password»: password
},function(err, result){
assert.equal(err, null);
console.log(«Saved the user sign up details.»);
});
|
Вот полный код user.js :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
var MongoClient = require(‘mongodb’).MongoClient;
var assert = require(‘assert’);
var url = ‘mongodb://localhost:27017/Blog’;
module.exports = {
signup: function(name, email, password){
MongoClient.connect(url, function(err, db) {
db.collection(‘user’).insertOne( {
«name»: name,
«email»: email,
«password»: password
},function(err, result){
assert.equal(err, null);
console.log(«Saved the user sign up details.»);
});
});
}
}
|
Измените обработчик запроса /signup в файле app.js чтобы передать имя, адрес электронной почты и пароль user.js signup user.js
|
01
02
03
04
05
06
07
08
09
10
11
12
|
app.post(‘/signup’, function (req, res) {
var name=req.body.name;
var email=req.body.email;
var password=req.body.password;
if(name && email && password){
user.signup(name, email, password)
}
else{
res.send(‘Failure’);
}
})
|
Сохраните вышеуказанные изменения и перезагрузите сервер. Укажите в браузере адрес http: // localhost: 7777 / index.html # / signup . Заполните данные регистрации пользователя и нажмите кнопку регистрации. У вас будет Saved the user sign up details. сообщение в серверном терминале. Войдите в оболочку MongoDB и проверьте коллекцию user в базе данных Blog . Чтобы найти сведения о пользователе, введите следующую команду в оболочке MongoDB:
|
1
|
db.user.find()
|
Приведенная выше команда отобразит данные пользователя в формате JSON.
|
1
2
3
4
5
6
|
{
«name»: «roy»,
«email»: «[email protected]»,
«password»: «test»,
«_id»: ObjectId(«58f622f50cb9b32905f1cb4b»)
}
|
Реализация проверки входа пользователя
В первой части руководства вы жестко закодировали проверку входа пользователя, поскольку регистрация пользователя не была реализована. Давайте изменим проверку входа в жестком коде и посмотрим на базу данных MongoDB для правильных входов пользователей.
Создайте функцию validateSignIn в файле user.js
|
1
2
3
|
validateSignIn: function(username, password,callback){
}
|
Внутри функции validateSignIn с помощью клиента MongoDB вы подключитесь к базе данных Blog и запросите таблицу пользователей для пользователя с указанными именем пользователя и паролем. Вы будете использовать метод findOne для запроса коллекции пользователей.
|
1
2
3
|
db.collection(‘user’).findOne( { email : username ,password: password },function(err, result){
});
|
Проверьте возвращаемый результат на null, если запись не найдена.
|
1
2
3
4
5
6
|
if(result==null){
callback(false)
}
else{
callback(true)
}
|
Как видно из приведенного выше кода, если запись не найдена, в обратном вызове возвращается false. Если запись найдена, в обратном вызове возвращается true.
Вот полный метод validateSignIn :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
validateSignIn: function(username, password,callback){
MongoClient.connect(url, function(err, db){
db.collection(‘user’).findOne( { email : username ,password: password
},function(err, result){
if(result==null){
callback(false)
}
else{
callback(true)
}
});
});
}
|
В методе /signin в файле app.js вы /signin метод validateSignIn . В функции обратного вызова вы будете проверять ответ. Если это правда, это будет указывать на действительный вход, в противном случае неправильный вход. Вот как это выглядит:
|
01
02
03
04
05
06
07
08
09
10
11
|
app.post(‘/signin’, function (req, res) {
var user_name=req.body.email;
var password=req.body.password;
user.validateSignIn(user_name,password,function(result){
if(result){
res.send(‘Success’)
}
else{
res.send(‘Wrong username password’)
}
});
|
Сохраните вышеуказанные изменения и перезагрузите сервер. Укажите в браузере адрес http: // localhost: 7777 / index.html # / . Введите правильное имя пользователя и пароль, и вы получите сообщение об успехе, зарегистрированное в консоли браузера. При вводе неверного имени пользователя и пароля будет отображаться сообщение об ошибке.
Завершение
В этой части руководства вы увидели, как реализовать процесс регистрации пользователей. Вы увидели, как создать представление регистрации и передать данные из пользовательского интерфейса React в Node.js, а затем сохранить их в MongoDB. Вы также изменили функциональность входа пользователя для проверки правильности входа пользователя из базы данных MongoDB.
В следующей части руководства вы реализуете функцию добавления постов и отображения постов.
Исходный код из этого урока доступен на GitHub .
Дайте нам знать ваши мысли или любые предложения в комментариях ниже.