Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

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

by
Difficulty:IntermediateLength:ShortLanguages:
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

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

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

开始

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

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

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

设置后端

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

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

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

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

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

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

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

设置注册事件

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

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

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

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

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

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

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

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

在MongoDB中保存用户详细信息

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

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

以下是完整的user.js代码:

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

保存上述更改并重新启动服务器。将浏览器导航到http://localhost:7777/index.html.填写用户注册详细信息,然后单击注册按钮。 您将在服务器终端看到Saved the user sign up details.信息。登录MongoDB shell并检查Blog数据库中的user集合。要查找用户详细信息,请在MongoDB shell中输入以下命令:

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

实现用户登录检查功能

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

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

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

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

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

这是完整的validateSignIn方法:

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

保存上述更改并重新启动服务器。将浏览器导航至http://localhost:7777/index.html. 输入有效的用户名和密码,将在浏览器控制台中输出登录成功消息。输入无效的用户名和密码时,会显示一条错误消息。

结束语

在本教程的这一部分中,您了解了如何实现用户注册过程。您看到如何创建注册视图,并将数据从React用户界面传递到Node.js,然后将其保存在MongoDB中。 您还修改了用户登录功能,以检查MongoDB数据库中的有效用户登录。

在本教程的下一部分中,您将实现添加帖子和显示帖子页面功能。

本教程的源代码可在GitHub上找到。

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

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.