使用React创建博客应用：用户注册

使用React创建博客应用：用户注册第1张

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

入门

让我们首先从教程的第一部分克隆源代码。

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

克隆目录后，导航到项目目录并安装require d 依赖项。

cd ReactBlogApp-SignIn
npm install

启动节点.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来检查返回的响应。包含assert在user.js文件中。

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 后端后，让我们实现注册事件。在页面内，包括类中名称、电子邮件和密码输入文本框的 on-change 事件。main.jsxsignup

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

在类const ructor中绑定上述事件变化。

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。在注册方法中，使用库对文件中的方法进行 post 方法调用。 axiossignupuser.js

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方法。

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

要求user.js文件里面的app.js文件。

var user = require('./user')

保存上述更改并让服务器恢复正常。将浏览器指向 http://localhost:7777/index.html#/signup ，您应该会看到注册页面。单击注册按钮，您将connected在终端中看到消息。

在 MongoDB 中保存用户详细信息

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

您将使用该insertOne方法在用户集合中插入一条记录。修改signup方法中的代码 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.");
			});
		});
	}
}

修改文件中的/signup请求处理程序以app.js将名称、电子邮件和密码传递给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#/signup。填写用户注册详细信息，然后单击注册按钮。您将 Saved the user sign up details.在服务器终端中看到消息。登录 MongoDB shell 并检查数据库user中的集合 Blog。要查找用户详细信息，请在 MongoDB shell 中输入以下命令：

db.user.find()

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

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

实施用户登录检查

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

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

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(error, result) {
if (result == null) {
callback (false)
}
else {
callback (true)
}
});
});}

在文件中的/signin方法中app.js，您将调用该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#/。输入有效的用户名和密码，您将在浏览器控制台中记录成功消息。在输入无效的用户名和密码时，它会显示一条错误消息。