使用React创建Blogging应用程序，第2部分：用户注册

Chinese (Simplified) (中文（简体）) translation by Zuojianzifu 作茧自缚 (you can also view the original English article)

在本教程系列的第一部分中，您学习了如何实现登录功能。在这部分中，您将学习如何实现注册功能并修改登录功能，以检查MongoDB中的有效用户。

开始

从本教程的第一部分克隆源代码然后开始。

git clone https://github.com/royagasthyan/ReactBlogApp-SignIn

克隆目录后，导航到项目目录并安装所需的依赖关系。

cd ReactBlogApp-SignIn
npm install

启动Node.js服务器，您使应用程序在http://localhost:7777/index.html上运行

设置后端

对于此应用程序，您将使用MongoDB作为后端。按照MongoDB官方文档中的说明在Ubuntu上安装MongoDB。一旦安装了MongoDB，您将需要一个连接器来连接MongoDB和Node.js.使用节点包管理器(或npm)安装MongoDB Node.js驱动程序：

npm install mongodb

安装驱动程序后，您应该可以在应用程序中引入驱动程序。

创建一个名为user.js的文件，这将保留用户相关的内容。在user.js文件中，引入与MongoDB客户端相关的依赖关系。

var MongoClient = require('mongodb').MongoClient;

您将使用一个名为assert的库来检查返回的响应。在user.js文件中引入assert。

var assert = require('assert');

我们在MongoDB中将我们的数据库命名为Blog，所以我们的数据库URL如下所示：

var url = 'mongodb://localhost:27017/Blog';

在user.js文件的内部，创建并导出一个名为signup的函数

module.exports = {
    signup: function(){
  	// Code will be here
	}
}

使用MongoDB客户端，尝试连接到数据库。连接后，您将在终端中记录已连接的消息。

module.exports = {
    signup: function(name, email, password){
		MongoClient.connect(url, function(err, db) {
			console.log('connected')
		});
	}
}

设置注册事件

设置了MongoDB后端后，我们来实现注册事件。在main.jsx页面中，在signup类中插入名称，电子邮件和密码输入文本框的更改事件。

handleNameChange(e){
    this.setState({name:e.target.value})
}
handleEmailChange(e){
    this.setState({email:e.target.value})
}   
handlePasswordChange(e){
    this.setState({password:e.target.value})
}

在构造函数中绑定上述事件变化。

constructor(props) {
    super(props);
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
}

在signup类的构造函数中定义状态变量。

this.state = {
  name:'',
  email:'',
  password:''
};

在signup类中定义注册方法。在注册方法内部，使用axios库，发起post请求，调用user.js文件中signup方法。

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);
    });
}

在user.js文件的signup函数内部，将实现数据库插入操作。

在app.js文件中添加/signup请求句柄，以处理注册点击事件。在/signup请求处理函数内部，调用user.signup方法。

app.post('/signup', function (req, res) {
  user.signup('','','')
  console.log(res);
})

在app.js文件中引入user.js文件。

var user = require('./user')

保存上述更改并重新启动服务器。使用历览器打开http://localhost:7777/index.html，这是将看到Sign Up页面。单击注册按钮，您将在终端中看到connected消息。

在MongoDB中保存用户详细信息

为了在Blog数据库中保存用户详细信息，您将创建一个名为user的集合。在user集合中，您将保留所有用户的详细信息，如姓名，电子邮件地址和密码。 MongoClient.connect返回一个可以在user集合中插入条目的数据库参数。

您将使用insertOne方法在user集合中插入单个记录。在user.js中修改注册方法中的代码，如下所示：

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代码：

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.");
			});
		});
	}
}

修改app.js文件中的/signup请求处理程序，将名称，电子邮件和密码传递给user.js的signup方法。

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.填写用户注册详细信息，然后单击注册按钮。您将在服务器终端看到Saved the user sign up details.信息。登录MongoDB shell并检查Blog数据库中的user集合。要查找用户详细信息，请在MongoDB shell中输入以下命令：

db.user.find()

上述命令将以JSON格式显示用户详细信息。

{
    "name": "roy",
    "email": "royagasthyan@gmail.com",
    "password": "test",
    "_id": ObjectId("58f622f50cb9b32905f1cb4b")
}

实现用户登录检查功能

在本教程的第一部分中，因为用户注册尚未实施，所以对用户注册进行了硬编码。现在我们修改硬编码的登录检查，并查看MongoDB数据库中的有效用户登录。

在user.js文件中创建一个名为validateSignIn的函数。

validateSignIn: function(username, password,callback){
    	
}

在validateSignIn函数内部，使用MongoDB客户端，您将连接到Blog数据库，并向具有指定用户名和密码的用户查询用户表。您将使用findOne方法来查询用户集合。

db.collection('user').findOne( { email : username ,password: password },function(err, result){
	
});

以防未找到条目，请检查返回的结果为null。

if(result==null){
	callback(false)
}
else{
	callback(true)
}

如上面的代码所示，如果没有找到条目，则在回调中返回false。如果找到一个条目，则在回调中返回true。

这是完整的validateSignIn方法：

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)
			}
		});
	});
}

在app.js文件中的/signin方法中，您将调用validateSignIn方法。在回调函数中，您将检查该响应。如果为true，则表示有效登录，否则无效登录。这是它的代码：

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上找到。

在评论区中让我们知道您的想法或意见。