【H2O2|全栈】Node.js(3)

前言

开篇语

准备工作

get和post登录校验测试

准备

创建应用

数据

端口监听

get方式校验

代码

测试

编辑

post方式校验

代码

测试

中间件

概念

流程

结束语

前言

开篇语

本系列博客分享Node.js的相关知识点，本章讲解登录校验原理和中间件。

与基础部分的语法相比，ES6的语法进行了一些更加严谨的约束和优化，因此，在之后使用原生JS时，我们应该尽量使用ES6的语法进行代码编写。

准备工作

软件：【参考版本】Visual Studio Code，Postman

插件（扩展包）：Open in browser, Live Preview, Live Server, Tencent Cloud AI Code Assistant, htmltagwrap

提示：在不熟练的阶段建议关闭AI助手

系统版本： Win10/11

提示：node.js在当前文件夹下使用cmd运行，不在浏览器解析运行

get和post登录校验测试

准备

在上一期中，我们已经完成了服务器的创建和运行，我们也知道了应用的常见请求方式。

今天，我们通过一种常见的需求——登录校验，来加深对get和post请求的理解。

在这一次的登录测试中，我们使用Postman发送请求数据，不涉及前端页面，数据库内容默认已经拿到，所以不连接数据库。

创建应用

首先，在01.登录.js文件中使用express创建应用（express的内容详见上一期）——

const express = require("express")
const app = express()

数据

我们假设已经获取了数据库的数据，以JSON对象数组的形式保存在data目录下的user.json文件中。

user.json中的数据如下——

[{"username":"admin","pwd":"123456"},{"username":"zhangsan","pwd":"123456"},{"username":"lisi","pwd":"123456"}
]

我们在01.登录.js中使用require导入数据数组——

const users = require("./data/user.json")

端口监听

我们选用3000端口进行连接，使用listen()进行监听——

app.listen(3000, "127.0.0.1", () => {console.log("http://127.0.0.1:3000");
})

get方式校验

代码

这里我们假设登录的路由地址为 /login。

get请求有?传参和路径传参两种方式，这里我们以?传参为例。

?传参 query: url?key=value

路径传参 params: url/:key1/:key2.....

在处理函数中，使用解构赋值接收传入的两个参数username（用户名）和pwd（密码）。

const { username, pwd } = req.query;

由于用户名是唯一的（键），所以我们可以使用数组的find()方法，查找users中是否有我们所需要的username，并用user接收查找到的对象。

const user = users.find(item => item.username == username)

接下来，我们需要判断用户名是否存在，如果不存在，则find()将返回null给我们，此时为用户响应“用户不存在”，直接return结束get请求。

在用户名存在的情况下，判断user的pwd属性是否与输入值相同，不同时响应“密码错误”。

如果输入没有问题，则提示用户登录成功。

if (!user) {return res.send("用户名不存在!")
}
if (user.pwd != pwd) {return res.send("密码错误!")
}
res.send("登录成功")

完整的get请求校验代码如下——

app.get("/login", (req, res) => {const { username, pwd } = req.query;const user = users.find(item => item.username == username);if (!user) {return res.send("用户名不存在!");}if (user.pwd != pwd) {return res.send("密码错误!");}res.send("登录成功");
})

测试

下面，我们使用Postman来测试这个登录的功能能否完成。

首先，我们在地址栏输入正确的登录信息用户名admin和密码123456——

点击发送，在控制台显示登录成功。

然后我们测试错误的情况，例如我们输入一个错误的密码——

点击发送，在控制台显示密码错误。

post方式校验

代码

post方式校验的过程与get几乎相同，但是post请求的数据在虚拟载体（请求体，body）中，所以我们需要把第一步的解构赋值换成下面的代码——

const { username, pwd } = req.body;

但是，我们直接来拿body的内容是拿不到的，需要使用到中间件body-parser的帮助，中间件的内容在下一节中。

使用npm下载body-parser，并使用express导入。

var bodyParser = require('body-parser')

如果请求方式为application/x-www-form-urlencoded，则使用urlencoded()中间件；如果请求方式为application/json，则使用json()中间件。

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

其余代码与get方式相同。

测试

post方式的校验测试需要我们在body中传输数据。

post方式请求不使用地址，所以路由地址到login即可，注意把请求方式更换为post。

比如，我们使用x-www-form-urlencoded方式请求，首先在Postman中配置请求头——

然后，在body中选择该种方式，并输入用户名和密码——

点击发送，控制台提示登录成功。

错误的登录信息测试略。

中间件

概念

中间件是一类介于两个不同系统之间的组件，它可以在两个系统之间传递、处理、转换数据，以达到协同工作的目的。

通过中间件，应用程序可以更加灵活地处理请求和响应。

在本节中，我们使用express提供的中间件。

流程

为了更加方便地理解中间件，我们借助自来水厂的生产流程来编写代码。

我们可以将中间件理解为生产流程中的各个环节，而自来水厂通常来说有下面的生产步骤——

沉淀、过滤、增压...

我们利用use()来使用中间件，它可以接受两个参数——路径和处理函数。

不添加路径，表示作为所有路由的中间件；添加路径，表示作为指定路由路径的中间件。

这里我们不添加路由路径。

在处理函数中，接收三个参数——req，res，next。

req为请求，在所有使用相同路径的中间件中通用。res为响应，可以调用send()响应数据。next为放行下一步，可以调用下一个中间件。

下面，我们将这三个步骤实现，并使过滤步骤在/home路径下，增压步骤在/list路径下——

// 沉淀
app.use((req,res,next) => {console.log("沉淀....");next()
})
// 过滤
app.use("/home",(req,res,next) => {console.log("过滤....");next()
})
// 增压
app.use("/list",(req,res,next) => {console.log("增压....");next()
})

然后，我们为req添加三个参数a，b，c——

// 沉淀
app.use((req,res,next) => {console.log("沉淀....");req.a = "沉淀a"next()
})
// 过滤
app.use("/home",(req,res,next) => {console.log("过滤....");req.b = "过滤b"next()
})
// 增压
app.use("/list",(req,res,next) => {console.log("增压....");req.c = "增压c"next()
})

在get请求中，测试不同路径下req是否可以拿到这三个数据（即完成的“生产步骤”）——

app.get("/home",(req,res) => {res.send(`home....${req.a},${req.b},${req.c}`)
})app.get("/list",(req,res) => {res.send(`list....${req.a},${req.b},${req.c}`)
})

我们发现，/home路径下完成了沉淀和过滤，而/list路径下完成了沉淀和增压——