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上找到。
在评论区中让我们知道您的想法或意见。
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.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post