Bootstrap

【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路径下完成了沉淀和增压——

结束语

本期内容到此结束。关于本系列的其他博客,可以查看我的Node.js入门专栏。

在全栈领域,博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历,然后把自己领悟到的一些东西总结一下,分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的,一些定义性的文字加入了笔者自己的很多理解在里面,所以仅供参考。如果有说的不对的地方,还请谅解。

==期待与你在下一期博客中再次相遇==

——临期的【H2O2】

;