class07：Express框架、中间件

已于 2022-07-26 08:50:04 修改
阅读量385 收藏 1
点赞数
分类专栏： # Nodejs 文章标签： 中间件 前端 javascript
于 2022-07-25 09:03:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51667621/article/details/125967872
版权

这里写目录标题

一、express模块

1. 安装使用express

官网：Express官网

express是一个高度包容、快速而极简的 Node.js Web 框架。

Express 是一种保持最低程度规模的灵活 Node.js Web 应用程序框架，为 Web 和移动应用程序提供一组强大的功能。

使用express模块比http更加方便、简单。

安装：

npm init -y
npm install express --save

在这里插入图片描述

使用：

// 引入express
const express = require("express");

// 使用express用于创建服务器应用
const app = express();  // 执行函数，返回函数内部方法

// 启动应用程序，监听3000端口
app.listen("3000", () => {
    console.log("3000端口已经开启")
});

想要页面地址栏访问时获取数据 => 配置对应的地址，配置对应的路由：

app.get("/", (req, res) => {
    // res.send() 向前端发送数据：字符串  对象 数组 buffer
    res.send("云想衣裳花想容，春风扶槛露华浓。")
});

前端页面发送get时，进入app.get进行路由匹配，/根路由就是启动路由地址：http:localhost:3000
在这里插入图片描述

注意：http模块向前端发送数据用res.end，而express用的是res.send；且http模块在发送数据前需要设置响应头让前端按照格式进行解析，而express不需要。

// 让前端按照该格式进行解析
response.setHeader("Content-Type", "text/html;charset=utf-8");

2. 设置跨域

使用前端html页面访问后端数据：

<body>
    <button id="box">get请求1</button>
    <br />
    
    <script src="https: //unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        // 向后端 / 根路由发起请求
        box.onclick = () => {
            axios({
                method: 'get',
                url: "http://localhost:3000",
            }).then(res => {
                console.log(res.data)
            })
        };
    </script>
</body>

显示跨域错误：

在这里插入图片描述

设置跨域头：

// 设置允许任何人都可以访问
res.header("Access-Control-Allow-Origin", "*");

在这里插入图片描述

但是如果我们在根路由的基础上多配置几个访问路径，那么每个路径的后端都需要设置跨域响应头，较为麻烦，例如：

在这里插入图片描述

解决：

express中有all方法，用于解决每返回一个地址就要加一个解决跨域的麻烦：

app.all("*", (req, res, next) => {      
    // * 可以理解为一个变量,第三个参数next执行下一个请求方式相同的路由地址
    // 设置允许任何人都可以访问
    res.header("Access-Control-Allow-Origin", "*");
    console.log("所有路由经过地", req.url);     // 这里的路由是不可以变化的
    next();      // 执行下一个get请求方式和all里面的req.url相同的路由地址
});

注意：该方法一定要添加next参数并调用，否则不会返回数据到前端。

结果显示：

在这里插入图片描述
在这里插入图片描述

​

后端完整代码：

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

app.all("*", (req, res, next) => {      
    res.header("Access-Control-Allow-Origin", "*");
    console.log("所有路由经过地", req.url);    
    next();      
});     

app.get("/", (req, res) => {
    res.send("云想衣裳花想容，春风扶槛露华浓。")
});

app.get("/test1", (req, res) => {
    res.send("若非群玉山头见，会向瑶台月下逢。")
});

app.get("/test2", (req, res) => {
    res.send("天生我材必有用，千金散尽还复来。")
});

app.listen("3000", () => {
    console.log("3000端口已经开启")
});

二、中间件

1. 跨域中间件

CORS 是一个node.js包，用于提供连接/高速中间件，可用于启用具有各种选项的 CORS。

安装和使用：

npm i cors -S

在这里插入图片描述

后端js代码优化为：

const express = require("express");
const app = express();  
const cors = require("cors");  // 引入core跨域中间件包
app.use(cors());    // express 提供使用中间件的方法

app.get("/", (req, res) => {
    res.send("云想衣裳花想容，春风扶槛露华浓。")
});

app.get("/test1", (req, res) => {
    res.send("若非群玉山头见，会向瑶台月下逢。")
});

app.get("/test2", (req, res) => {
    res.send("天生我材必有用，千金散尽还复来。")
});

app.listen("3000", () => {
    console.log("3000端口已经开启")
});

成功渲染数据：
在这里插入图片描述

中间件原理： 关键在next()这个方法会执行下一个和当前请求方式（get或post）一样的路由地址，前端发送请求的时候后端可以通过设置中间件处理各种问题，同时前端的请求会先提交到第一个中间件函数，再通过next() 执行自定义配置的路由地址。

其实我们还可以发现，前端html页面每一个点击事件中都会重复的写根路由 http://localhost:3000；

而跟路由可以用/表示，所以我们可以配置全局默认配置：

// 设置axios 全局默认配置
axios.defaults.baseURL = "http://localhost:3000";

前端html代码：

<body>
    <button id="box1">get请求1</button>
    <br />
    <button id="box2">get请求2</button>
    <br />
    <button id="box3">get请求3</button>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 设置axios 全局默认配置
        axios.defaults.baseURL = "http://localhost:3000";
        // 向后端 / 根路由发起请求
        box1.onclick = () => {
            axios({
                method: 'get',
                url: "/",
            }).then(res => {
                console.log(res.data)
            })
        };


        box2.onclick = () => {
            axios({
                method: 'get',
                url: "/test1",
            }).then(res => {
                console.log(res.data)
            })
        }

        box3.onclick = () => {
            axios({
                method: 'get',
                url: "/test2",
            }).then(res => {
                console.log(res.data)
            })
        }
    </script>
</body>

2. 后端获取前端发送的数据

2.1 get方式

前端在点击事件中使用params参数发送数据给后端：

box2.onclick = () => {
    axios({
        method: 'get',
        url: "/test1",
        params: {
            name: "LeBron James",
            age: "38",
            pro: "player",
        }
    }).then(res => {
    	console.log(res.data)
    })
}

后端通过req.query的方法获取前端发送的的数据

app.get("/test1", (req, res) => {
    res.send("若非群玉山头见，会向瑶台月下逢。");
    console.log(req.query);
});

打印输出：
在这里插入图片描述

2.2 post方式

express规定get请求和post请求是互相独立的，各自发起请求的，但all.use()方法都接收这里种请求。

所以我们只需修改get请求，不需修改中间件。

且前端post是通过data参数发送数据，后端post通过req.body接收数据，另外需要配置中间件进行解码。

// 使后端获取前端发送来的post数据
app.use(express.urlencoded({extended:true}));   // 通过中间件解码post请求的数据
app.use(express.json());// post数据json化

前端post请求代码：

<button id="box4">get请求4</button>
<script>
	box4.onclick = () => {
            axios({
                method: 'post',
                url: "/test_post",
                data: {
                    name: "Kobe Bryant",
                    age: "41",
                    pro: "player",
                }
            }).then(res => {
                console.log(res.data)
            })
        }
</script>

后端post接收代码：

app.use(express.urlencoded({extended:true}));   // 通过中间件解码post请求的数据
app.use(express.json());// post数据json化
app.post("/test_post", (req, res) => {
    res.send("沉舟侧畔千帆过，病树前头万木春。");
    console.log(req.body);
});

渲染结果：
在这里插入图片描述

打印输出：

在这里插入图片描述

不过其实我发现如果只把get改成post，只要前端发送用params，后端接收用req.query，后端就能获取到数据。而且这样也不用设置解码等操作。

Laker 23
关注
专栏目录
classy-express:一个简单的基于类的 Express Web 框架
07-20
一个超级简单的基于模块的 Express 框架。 有点受 Jenkins 基于类的视图的启发，其中 url 与类层次结构相匹配。 这可能不是最好的主意，我只是想尝试一下。 安装 > npm install classy-express 用 一旦安装了中间件...
express-es6-template:Express ES6样板
05-18
Express框架是Node.js中广泛使用的Web应用开发框架，它简化了构建Web服务和API的过程。本篇文章将深入探讨基于ES6（ECMAScript 2015）语法的Express模板，如何利用现代JavaScript特性提高开发效率。 ### 1. Express...
Express框架之中间件
宅羽的博客
12-27 525
◆ 中间件的作用： 中间件就是一堆方法，主要由中间件方法以及请求处理函数组成。可以接收客户端发来的请求、可以对请求做出响应，也可以将请求继续交给下一个中间件继续处理。 app.get('请求路径', '处理函数') // 接收并处理get请求 app.post('请求路径', '处理函数') // 接收并处理post请求 ◆ next方法 可以针对同一个请求设置多个中间件，对同一个请求进...
Express框架——中间件
weixin_47085255的博客
07-21 273
1. 中间件 1.1 什么是中间件 中间件就是一堆方法, 可以接受客户端发来的请求、可以对请求做出响应，也可以将请求继续交给下一个中间件继续处理。 中间件主要有两部分构成， 中间件方法以及请求处理函数 中间件方法由Express提供，负责拦截请求，请求处理函数由开发人员提供，负责处理请求。 app.get('请求路径', '处理函数') // 接收并处理get请求 app.post('请求路径', '处理函数') // 接收并处理post请求 可以针对同一个请求设置多个中间件 默认情
express框架常用中间件（插件）
qq_26481279的博客
08-04 1005
1. body-parser 用于post请求解析req.body消息体 2. express-ip-filter ip过滤器 3. morgan 、 winston 、 express-winston 日志记录 4. cookie-parser和cookie-session 解析客户端传过来的cookie，cookie-session中间件用来建立基于cookie的会话session 5. request-validate koa2、express、nodejs参数校验 6. config-lite 读取
es6-boilerplate:Express + ES6 + Stylus 样板
05-30
**标题与描述解析** 标题"es6-boilerplate:Express + ES6 ...综上所述，这个项目是一个使用ES6语法、Express框架和Stylus预处理器的Web应用开发模板，为初学者提供了一个良好的起点，便于快速搭建现代JavaScript应用。
express_examples_in_class:在课堂上使用的快速示例的回购
06-14
在这个“express_examples_in_class”仓库中，我们可以期待看到一些实际的 Express 代码片段，这些片段可能是为了教学目的而创建的。这些示例可能包括： 1. **基本路由设置**：Express 提供了简单的 API 来定义路由...
doodoo.js：Doodoo.js-中文最佳实践Node.js Web快速开发框架，支持Koa.js，Express.js中间件
02-04
Doodoo.js-中文最佳实践Node.js Web快速开发框架，支持Koa.js，Express.js中间件。 //base controller, app/demo/controller/base.js module . exports = class extends doodoo . Controller { async _initialize...
Node.js基础---Express中间件
Anorry的博客
03-01 912
中间件(Middleware)，特指业务流程的中间处理环节
Node中Express中间件详解
最新发布
qq_44741577的博客
03-04 845
console.log("这是一个中间件");// 把流转关系转交给下一个中间件或者路由next();// 全局生效中间件简写形式-----第一个中间件console.log("调用了第一个全局中间件");next();});// 第二个中间件console.log("调用了第二个全局中间件");next();});res.end("成功");});});自己手动模拟一个类似于这样的中间件，来解析POST提交到服务器的表单数据定义中间件。
一：express框架学习之路由控制与中间件
smile_bestSun的博客
10-20 1344
一：express框架学习之路由控制与中间件
Express框架(基础部分、路由和中间件)
weixin_63443072的博客
02-05 3357
一义上来讲，路由就是映射关系。// 定义一个最简单的中间件函数console.log('这是个最简单的中间件函数');// 把流转关系交给下一个中间件或路由next()模拟一个类似于 express.urlencoded 这样的中间件来解析 POST 提交到服务器的表单数据。定中间件监听req的 data事件监听req的end 事件使用querystring模块解析请求体数据将解析出来的数据对象挂载为 req.body将自定义中间件封装为模块// 解析表单数据的中间件。
学会nodejs中express框架进行get和post请求，如何获取和增加用户数据？(express的安装以及实战案例讲解)
weixin_45745641的博客
09-16 3339
本篇文章主要介绍node.js中如何使用express框架进行get和post的请求。本文案例中将数据存放在本地文件中，使用get和post请求对文件进行读取和添加数据，模拟实际开发中的情形。如果不太了解node基础的，可以先去看我的另一篇文章node.js新手入门—教你写属于自己的接口get和post请求基础详解本文主要介绍了express框架中进行get和post请求的处理，在实际开发中无非就联动数据库进行增查删改，以及实现其它的业务逻辑。
express基于nodejs的web开发框架 - 简单使用
weixin_49070186的博客
01-12 362
Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。搭建web服务器 Express 的本质：就是一个 npm 上的第三方包，提供了快速创建 Web 服务器的便捷方法。 使用Express开发框架可以非常方便、快速的创建Web网站的服务器或API接口的服务器 官网：Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网 使用步骤： 导入包 创建服务器 处理请求 ..
Express全系列教程之(二)：Express的路由以及动态路由
no10086的博客
04-04 3058
一、Express路由简介 路由表示应用程序端点 (URI) 的定义以及响应客户端请求的方式。它包含一个请求方时（methods）、路径（path）和路由匹配时的函数（callback）; app.methods(path, callback); 二、Express路由方法 Express方法源于 HTTP 方法之一，附加到 express 类的实例。它可请求的方法包括： get、post、pu...
Express与常用中间件的使用
嘿嘿
11-27 572
1.Express是什么？ 在Node.js后端开发中，使用官方提供的http模块可以创建一个Web服务器应用，但是此模块非常底层，要处理各种情形，比较繁琐，为此便有了Express,它是第三方模块，是一个基于Node.js的http模块而编写的高层模块，简化Web服务器端应用的开发。 ２.Express框架使用方法 (1). 下载express npm i express (2). 引入express const express = require('express') ...
渗透测试-中间件解析漏洞分析
lza20001103的博客
04-27 4076
中间件解析漏洞分析
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Laker 23

要秃啦，支持一下嘛~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值