使用 MERN 堆栈构建登录/注册 - 第 1 部分（后端）

大家好👋！本文我将介绍 Mern Stack 中的身份验证。

登录/注册或者我会说身份验证是任何应用程序的基础之一，无论它是 Web 应用程序还是 Android 应用程序。在本教程中，您将使用 MERN Stack 学习此身份验证。我们将使用 MERN 堆栈创建一个最小的全栈登录/授权应用程序（MongoDB 用于我们的数据库，Express 和 Node 用于我们的后端，React 用于我们的前端）。

我们将借助 Express js 创建身份验证端点，并建立 MongoDB 连接以将用户数据存储在其中。我们将在前端使用 react 和 react-hook 进行状态管理。

应用功能

• 注册
• 登录
• 访问受保护的页面
• 登出

在本文中，我将介绍：

• 使用 npm 设置我们的后端并安装必要的软件包。
• 使用 MongoDB Atlas 设置数据库。
• 使用 Mongoose 为用户创建数据库模式。
• 创建注册路线并将数据保存到数据库。

先决条件

您至少应该对基本的编程概念有基本的了解，并且对介绍性 HTML/CSS/Javascript 有一定的经验。在开始之前，请安装我们设置应用程序所需的所有工具。

• Nodejs
• Mongodb
• Create-React-App
• Visual Studio Code 或您最喜欢的编辑器
• Postman（API 测试）

让我们开始吧 ！

设置后端

在您的工作区中创建一个项目文件夹以构建 REST API（后端）并运行以下命令。

npm init

您可以安全地通过其中的大部分。运行命令后，会创建 package.json

使用命令安装以下依赖项：

npm i express mongoose nodemon

Express :Express 是一个 nodejs Web 应用程序框架，有助于创建 REST API。

Mongoose :Mongoose 是一个用于 MongoDB 和 Node.js 的对象数据建模 (ODM) 库。Node.js 允许您与 MongoDB 数据库进行交互。

Nodemon :Nodemon 是一个工具，通过在文件更改时自动重新启动节点应用程序来帮助开发基于 node.js 的应用程序。

在文件夹中创建文件 app.js 并编写以下代码。

const express=require('express')
const app=express()
const PORT=5000


app.get('/',(req,res)=>{
    res.send("hello world")
})

app.listen(PORT,()=>{
    console.log("Server is running on",PORT)
})

在代码中，我们基本上是在 localhost 的 5000 端口创建一个服务器。这个应用程序启动一个服务器并在端口 5000 上侦听连接。该应用程序响应“Hello World！” 对根 URL (/) 或路由的请求。对于其他所有路径，它将以 404 Not Found 响应。

转到命令行并运行命令：

nodemon app

您将在命令行中看到一条消息：

现在，打开您的浏览器并转到“ localhost:5000 ”，您将看到如下内容：

哇哦😍…您已成功创建服务器。

将我们的服务器连接到数据库

下一步是创建一个 MongoDB atlas 帐户。您可以借助本 教程 或此 视频 来创建帐户。

创建帐户后，获取 mongodb 的 url。您的网址如下所示：

mongodb+srv://<username>:<password>@cluster0.suxf5.mongodb.net/<dbname>?retryWrites=true&w=majority

将 MongoDB atlas cloud 的用户名（和密码）替换为您创建的数据库名称（）。

接下来，我们将测试我们的 MongoDB 与我们的 express 服务器的连接。在我们的 index.js 文件中添加以下代码。

现在，创建一个 keys.js 文件并将 mongourl 保存在那里，如下所示：

让我们将刚刚创建的服务器连接到我们的数据库。

为此，我们必须使用 mongoose.connect() 方法，如下所示：

如果初始连接失败，Mongoose 将发出一个 ‘error’ 事件，并且承诺 mongoose.connect() 返回将拒绝。

Mongoose.connect 将与提到的 url 建立连接，我们将使用 mongoose.connection.on() 方法检查连接。

当您进入命令行时，您将看到正在连接到数据库的消息。

恭喜👍🤩！您刚刚将服务器连接到数据库。

定义模式

现在，下一步是创建数据库模式。我们将在 Mongoose.Schema() 的帮助下创建一个数据库模式。

创建一个文件夹 models 并在该文件夹中创建一个名为 user.js 的文件。它将包含我们的用户 model/schema 。

您需要创建一个新模式并定义您希望为用户提供的各种字段。例如，在用户模式中，您将有一个字段作为名称，然后您需要定义其类型和其他内容，例如必需的、唯一的或任何默认值。最后，您必须使用 mongoose.model 创建该模式的模型，该模型采用参数名称和它指向的模式。

创建注册路线

我们将为注册页面创建路由，用户将从前端发送带有数据的发布请求，并且该数据将保存在我们的数据库中。REST Api 端点中使用了四种主要的 HTTP 方法：

• GET ：GET 请求是 API 和网站中最常见和广泛使用的方法。简单地说，GET 方法用于从指定资源的服务器检索数据。
• POST ：在 Web 服务中，POST 请求用于将数据发送到 API 服务器以创建或更新资源。发送到服务器的数据存储在 HTTP 请求的请求正文中。
• DELETE ：DELETE 方法就像它听起来的那样：删除指定 URL 处的资源。此方法是 RESTful API 中较常见的方法之一，因此最好了解它的工作原理。
• PUT ：与 POST 类似，PUT 请求用于向 API 发送数据以更新或创建资源。不同之处在于 PUT 请求是幂等的。也就是说，多次调用同一个 PUT 请求总是会产生相同的结果。相反，重复调用 POST 请求会产生多次创建相同资源的副作用。

我们将向注册路由发送发布请求，以便我们的数据保存/发布到我们的数据库中。路由是指应用程序的端点 (URI) 如何响应客户端请求。

您使用与 HTTP 方法对应的 Express 应用程序对象的方法定义路由；例如，app.get() 处理 GET 请求和app.post处理 POST 请求。

应用程序“监听”与指定路由和方法匹配的请求，当它检测到匹配时，它调用指定的回调函数。路由路径与请求方法相结合，定义了可以发出请求的端点。路由路径可以是字符串、字符串模式或正则表达式。

为路由创建一个文件夹和一个用于创建路由的文件。需要包并在 express.Router() 的帮助下创建路由。

const express=require('express');
const router=express.Router();
const mongoose=require("mongoose")
const User=mongoose.model("User")

router.get('/signup',(req,res)=>{
      res.send("hello");
})

module.exports=router

在上面的代码中，在 localhost:5000/signup 设置了一个路由，当我们向上面的路径发送一个 get 请求时，它里面的代码就会运行。

需要我们 app.js 中的文件并使用 app.use() 创建一个中间件。此外，使用 express.json() 将该数据转换为 json 对象。在这里，我在路由文件夹中的文件中的 auth.js。

在这种情况下，你好会印在屏幕上，如下所示：

如果这显示在您的浏览器上，那么您已经成功创建了一个注册路径。现在，是时候为该路由创建一个发布请求了。添加以下代码以创建发布请求。

router.post('/signup',(req,res)=>{
    var {name,email,password}=req.body
    console.log(req.body)
    if(!email || !password || !name)
    {
        return res.status(422).json({error:"Add all data"})
    }
  return res.status(200).json({message:"DONE  !"})
})

我们将通过 Postman 发送要发布的数据。这是教程。通过 post 请求发送到服务器的数据存储在请求的正文中，我们可以使用 req.body() 访问该数据。我们发送了一个 json 数据，例如：

发送请求后，我们需要使用 {} 解构该数据。

var {名称、电子邮件、密码}=req.body

这基本上从 body 获取数据并保存到相应的变量中。如果该字段中的任何一个字段不可用，则它将发送状态为 422 的错误消息。

在 postman 中，尝试使用 body 中的 json 数据向 localhost:5000/signup 发送 post 请求。您将在 postman 中看到以下 DONE 消息。

现在，由于我们可以访问数据，我们将把它保存到我们的数据库中。为此，我们将首先检查是否存在具有相同邮件的用户。如果它不存在，我们将创建一个用户（模型）类型的对象，其中包含我们已经解构的数据。

之后，使用 User.save() 保存用户。一旦执行，它将返回一个错误，我们将在 catch 博客中捕获该错误，或​​者返回已保存的用户。我们将使用 .then 进行检查，并使用 catch 块来捕获任何类型的错误。如果该邮件的数据存在，则会显示错误。

完整代码是：

const express=require('express');
const router=express.Router();
const mongoose=require("mongoose")
const User=mongoose.model("User")

router.get('/signup',(req,res)=>{
    res.send("hello");
});

router.post('/signup',(req,res)=>{
    var {name,email,password}=req.body
    console.log(req.body)
    if(!email || !password || !name)
    {
        return res.status(422).json({error:"Add all data"})
    }
    User.findOne({email:email})
   .then((savedUser)=>{
       if(savedUser){
            return res.status(422).json({error:"User already exists with that email"})
       }
       const user=new User({
        email,
        password,
        name,
    })
    user.save()
    .then((user)=>{
        res.json({message:"Saved Successfully"})
        console.log(user.email)
    })
    .catch((err)=>{
        console.log(err)
    })
})
.catch((err)=>{
    console.log(err)
})
})

module.exports=router

现在，当您从 Postman 发送请求时，数据将保存在我们的数据库中。保存数据后，消息将显示在我们的 Postman 中。

你可以查看Mongodb Atlas中的文档，你的数据会有一个文档。如果你能看到那么非常祝贺你。您已成功将数据发布到您的数据库😍🤩。