express

已于 2023-05-15 21:06:26 修改
阅读量713 收藏
点赞数
分类专栏： 全栈工程师的基本素养 # 后端开发 文章标签： express 前端 javascript npm 后端
于 2023-04-15 10:29:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60306931/article/details/130161372
版权

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！

系列文章目录

前端系列文章——传送门
后端系列文章——传送门

文章目录

express

一、express介绍

1.简介

利用nodejs中http创建的服务器，在处理请求的时候，只能放在一个回调函数中，且判断也相对较为复杂。为了方便基于nodejs服务器的开发，有人对nodejs服务器的创建、请求处理等操作，进行了封装，比较常见的就是express。

可以说，express就是基于nodejs封装的一个框架，专业用于提供方便易操作的web服务器。

Express 的本质：就是一个 npm 上的第三方包，提供了快速创建 Web 服务器的便捷方法。

使用Express开发框架可以非常方便、快速的创建Web网站的服务器或API接口的服务器

官网：https://www.expressjs.com.cn/

2、初体验

下载安装：

npm init -y
npm i express -S

使用步骤：

  1. 导入包
  2. 创建服务器
  3. 处理请求
  4. 监听端口
const express = require('express')
const app = express()
app.get(路由,回调) // get是请求方法
app.listen(端口号)

二、路由

含义：请求路径跟响应内容之间的对应关系。简单的说，这次路由：什么方式来的，请求路径是什么，响应什么。

1、路由方法

语法：

app.路由方法(路径, 处理函数)

路由方法包括：

  • get：请求方式是get的，且请求路径为参数1的，可以处理，只能处理一次

    const express = require('express')
const app = express()
app.listen(3000)

app.get('/', (req, res) => {
    res.end('heihei')
})

app.get('/', (req, res) => {
    res.end('haha')
})

    页面只显示heihei

  • post：请求方式是post的，且请求路径为参数1的，可以处理，只能处理一次

    准备表单页面

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单页面</title>
</head>
<body>
    <form method='post' action="/postSubmit">
        账号：<input type="text" name="account" />
        <br>
        密码：<input type="password" name="password" />
        <br>
        <input type="submit" />
    </form>
</body>
</html>

    js：

    const express = require('express')
const app = express()
app.listen(3000)

app.get('/', (req, res) => {
    res.end(require('fs').readFileSync('./form.html'))
})

app.post('/postSubmit', (req, res) => {
    res.end('haha')
})

    get请求比较方便通过浏览器就可以完成，但是post请求和后续的put请求以及delete请求，无法使用浏览器发送了，所以我们需要专门用于发送请求的软件（postman）或插件（postwomen）来调试请求。

    打开谷歌浏览器，点击右上角 … 三个点图标，选择 更多工具 ，打开 扩展程序 ，搜索postwomen，安装。

    使用方式：

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

  • put：请求方式是put的，且请求路径为参数1的，可以处理，只能处理一次

    const express = require('express')
const app = express()
app.listen(3000)

app.put('/', (req, res) => {
    res.end('this is put request"s response')
})

  • delete：请求方式是delete的，且请求路径为参数1的，可以处理，只能处理一次

    const express = require('express')
const app = express()
app.listen(3000)
app.delete('/', (req, res) => {
    res.end('this is delete request"s response')
})

  • all：任意请求方法都可以处理，且请求路径为参数1的，都可以处理，只能处理一次

    const express = require('express')
const app = express()
app.listen(3000)

app.all('/', (req, res) => {
    res.end('this is all request"s response')
})

    处理get请求

    处理post请求

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单页面</title>
</head>
<body>
    <form method='post' action="/">
        账号：<input type="text" name="account" />
        <br>
        密码：<input type="password" name="password" />
        <br>
        <input type="submit" />
    </form>
</body>
</html>

    处理put请求

    处理delete请求

  • use：任意请求方法都可以处理，且请求路径以参数1开头的，都可以处理，可以处理多次。可以省略参数1，表示任意路径的请求都会被处理。

    处理路径开头的请求：

    const express = require('express')
const app = express()
app.listen(3000)

app.use('/a', (req, res) => {
    res.end('use method handle request that the path startsWith "/a"')
})

    任意方法请求的处理

    处理多次：

    const express = require('express')
const app = express()
app.listen(3000)

app.use('/', (req, res, next) => {
    console.log('第一次处理');
    next()
})

app.get('/', (req, res) => {
    console.log('第二次处理');
    res.end('use method handle many requests')
})

    处理请求的函数中，可以添加第三个参数next，调用next，表示这次处理结束后，会继续向下执行，再次匹配到后，会再次处理：

    处理任意路径的请求：

    const express = require('express')
const app = express()
app.listen(3000)

app.use((req, res, next) => {
    console.log('总会被这里处理');
    next()
})

app.get('/', (req, res) => {
    console.log('路径为"/"的请求');
    res.end('use method handle any method request')
})

app.post('/abc', (req, res) => {
    console.log('路径为"/abc"的请求');
    res.end('use method handle any method request')
})

2、路径匹配

2.1、完全匹配

请求的路径必须跟定义好的路径完全相等，才会处理：

// 匹配根路径的请求
app.get('/', function (req, res) {
  res.send('root');
});

// 匹配 /about 路径的请求
app.get('/about', function (req, res) {
  res.send('about');
});

// 匹配 /random.text 路径的请求
app.get('/random.text', function (req, res) {
  res.send('random.text');
});
2.2、不完全匹配

请求路径能符合定义好的路径的规则即可处理：

// 匹配 acd 和 abcd
app.get('/ab?cd', function(req, res) {
  res.send('ab?cd');
});

// 匹配 abcd、abbcd、abbbcd等
app.get('/ab+cd', function(req, res) {
  res.send('ab+cd');
});

// 匹配 abcd、abxcd、abRABDOMcd、ab123cd等
app.get('/ab*cd', function(req, res) {
  res.send('ab*cd');
});

// 匹配 /abe 和 /abcde
app.get('/ab(cd)?e', function(req, res) {
 res.send('ab(cd)?e');
});
2.3、正则匹配

请求的路径能符合定义好的正则规则就可以处理：

// 匹配任何路径中含有 a 的路径：
app.get(/a/, function(req, res) {
  res.send('/a/');
});

// 匹配 butterfly、dragonfly，不匹配 butterflyman、dragonfly man等
app.get(/.*fly$/, function(req, res) {
  res.send('/.*fly$/');
});
2.4、restful风格匹配

在实际项目开发中，为了能让路径中的参数写起来更简便，且更具有迷惑性，通常会采用动态路由方式进行传参。

动态路由传参，其实就是将参数当做路径一部分，不再使用?隔开。

也就是说，传递参数的路径，其实有两种写法，例如：

传统方式：http://localhost:3000/index.html?id=6&name=zhangsan

动态路由：http://localhost:3000/index.html/6/zhangsan

app.get('/about/:id', function (req, res) {
  res.send('about');
});

表示在请求的时候，/about后面必须加一个id才可以匹配成功去处理。

若要表示id可选项的话，使用?：

app.get('/about/:id?', function (req, res) {
  res.send('about');
});
2.5、获取get请求参数

传统方式的路径参数获取，使用req.query。

例如：请求地址 - http://localhost:3000/index.html?id=6&name=zhangsan

const express = require('express')
const app = express()
app.listen(3000)

app.get('/index.html', (req, res) => {
    console.log(req.query);
    res.end('get method"s params')
})

动态路由传参的获取，使用req.params。

例如：请求地址 - http://localhost:3000/index.html/6/zhangsan

const express = require('express')
const app = express()
app.listen(3000)

app.get('/index.html/:id/:name', (req, res) => {
    console.log(req.params);
    res.end('get method"s params')
})

3、路由处理

处理某个请求路径的时候，可以使用一个函数，也可以使用多个函数，也可以使用多个函数组成的数组，也可以将数组和函数组合起来使用。

3.1、单函数处理
app.get('/home', function (req, res) {
  res.end('home');
});
3.2、多函数处理
app.get('/home', function (req, res, next) {
  console.log('这处理完之后会交给下一个函数处理');
  next();
}, function (req, res) {
  res.end('home');
});

多个函数处理同一个请求的时候，多个函数共用同一个req，例：

app.get('/home', function (req, res, next) {
    req.num = 6
  	console.log('这处理完之后会交给下一个函数处理');
  	next();
}, function (req, res) {
    console.log(req.num)
  	res.end('home');
});
3.3、函数数组处理
var cb0 = function (req, res, next) {
  console.log('CB0')
  next()
}

var cb1 = function (req, res, next) {
  console.log('CB1')
  next()
}

var cb2 = function (req, res) {
  res.end('home')
}

app.get('/home', [cb0, cb1, cb2])
3.4、函数和数组混合处理
var cb0 = function (req, res, next) {
  console.log('CB0')
  next()
}

var cb1 = function (req, res, next) {
  console.log('CB1')
  next()
}

app.get('/home', [cb0, cb1], function (req, res, next) {
  console.log('CB')
  next()
}, function (req, res){
  res.end('home')
})
3.5、路由对象处理路由

路由处理的时候，可以使用路由对象来代替函数处理，只是路由对象自己也要像app一样写具体的处理函数：

const express = require('express')
const app = express()
const router = express.Router() // 创建路由变量
app.get(路由,router)
router.get(路由, (req, res) => {})
app.listen(端口号)
3.6、路由对象配合use处理路由

use配合路由对象处理路由的时候，会将自己匹配到的路径截取掉，给router就剩下截取后剩下的路径：

const express = require('express')
const app = express()
// 只要是/home开头的路由都可以匹配到，并都交给router来处理
app.use('/home', router)

const router = expresss.Router()
router.get(完整路径截取掉/home后剩下的路径, (req, res) => {})

app.listen(12345)

例：

完整的请求路径为：/user/add

app.use('/user', router)

router.get('/add', (req, res) => {
    res.end('/user/add')
})

将这次路由交给router去处理，router在进行具体处理的时候，路径不能在前面加use中的路径了，因为被use截取了。

4、路由模块化

利用use方法和router的配合，我们可以将某一部分的请求单独封装到一个文件中，例如，所有有关用户的请求，都会是/user开头的请求路径，将所有有关用户请求的路由处理，单独封装在一个文件中。

app.js

const express = require('express')
const app = express()
const userRouter = require('./user')
app.use('/user', userRouter)
const goodsRouter = require('./goods')
app.use('/goods', goodsRouter)
app.listen(12345)

user.js

const express = require('express')
const router = express.Router()
router.get('/add', (req, res) => {
    res.end('/user/add')
})
router.get('/edit', (req, res) => {
    res.end('/user/edit')
})
module.exports = router

goods.js

const express = require('express')
const router = express.Router()
router.get('/add', (req, res) => {
    res.end('/goods/add')
})
router.get('/edit', (req, res) => {
    res.end('/goods/edit')
})
module.exports = router

三、响应方法

res.end() // 终结响应处理流程。
res.redirect() // 重定向请求。
res.send() // 发送各种类型的响应。
res.sendFile() // 以八位字节流的形式发送文件。
res.sendStatus() // 设置响应状态代码，并将其以字符串形式作为响应体的一部分发送。
res.json()

四、中间件

1、概念

正常的请求，是服务器接收到请求后，匹配请求路径，然后对应的处理函数去处理

中间件是匹配路径后，在最终处理函数响应之前，先交给其他函数去处理一次，然后再交给最终的处理函数去响应，中间处理的函数就叫做中间件

2、中间件的分类

根据中间件的开发者不同，可以将中间件分为3类：

  1. 内置中间件 - express系统自带
  2. 自定义中间件 - 自己开发的中间件
  3. 第三方中间件 - 有人开发好了，我们下载下来使用

根据中间件的使用情况，可以将中间件分为2类：

  1. 应用级别中间件 - 由app调用的
    • 全局应用级别中间件 - 当前路由后面的所有请求都会经过这个中间件
    • 局部应用级别中间件 - 只在当前路由中有效
  2. 路由级别中间件 - 由router调用的
    • 全局路由级别中间件
    • 局部路由级别中间件

3、中间件语法

全局中间件的使用语法：

应用级别使用：

app.use(中间件函数)

路由级别使用：

router.use(中间件函数)

上面两种使用都是全局的，表示他们后面的路由处理都要经过这个中间件。

局部中间件的使用：

应用级别

app.路由方法(路径, 中间件, 回调函数)

路由级别：

router.路由方法(路径, 中间件, 回调函数)

4、内置中间件

express提供了好用的内置中间件。

  1. 静态资源服务器中间件：express.static() - 必须是全局中间件

    app.use(express.static('托管目录地址'))

    此时我们可以通过/静态资源名称就能访问到指定文件夹中的静态资源

    app.use('前缀',express.static('托管目录地址'))

    为了方便区分静态资源路径和其他请求的处理，可以指定请求静态资源的时候，使用指定的路径前缀，此时我们可以通过/前缀/静态资源名称来访问到指定文件夹的静态资源。

  2. 获取post请求传递的请求主体：express.urlencoded() - 可全局可局部

    app.use(express.urlencoded({extended: false}))

    此后的post请求都可以通过req.body获取到post请求传递的请求主体了。

    这个中间件有版本要求：express >= 4.16.0

5、自定义中间件

自定义中间件，本质上是一个函数，相当有我们使用多个函数处理请求的时候，中间经历的函数。

自定义中间件：

function myMiddleware(req,res,next){	
    //. 自己需要定义的逻辑流程
	// 中间件最后一定要执行此函数，否则程序无法向下执行下去
	next()
}

使用：

app.use(myMiddleware) // 全局应用级别中间件
app.get(路径, myMiddleware, (req, res) => {}) // 局部应用级别中间件

router.use(myMiddleware) // 全局路由级别中间件
router.post(路径, myMiddleware, (req, res) => {}) // 局部路由级别中间件

6、第三方中间件

很多功能都可以通过别人写好的插件来实现，例如：body-parser

body-parser这个中间件的功能是用来获取post请求传递的请求主体的。使用步骤如下：

  1. 下载

    npm i body-parser

  2. 导入

    const bodyParser = require('body-parser')

  3. 使用中间件

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

7、异常处理中间件

当我们在某次请求处理的时候，发生了错误，会给客户端抛出报错，这个报错会让用户有不好的体验感，也容易将自己服务器所在的文件目录结构暴露。为了能解决以上两个缺点，我们可以在发生错误的时候，给用户以比较友好的自定义内容响应。这就是异常处理中间件：

app.get('/',(req,res) => {
    throw new Error('服务器内部发生了致命的错误！')
    res.send('Welcome to my homepage')
})

app.use((err,req,res,next) => {
    console.log('发生了错误：' + err.message) // err.message代表具体的错误信息
    res.send('Error！' + err.message)
})

手动抛出错误语法：

throw new Error('自定义错误信息')

代码运行会报错。

案例：要求指定一个路径（可能路由对应的文件不存在），读取文件内容，输出给用户

注意事项：错误级别中间件要想发挥其作用，必须写在所有的路由的后面。

8、404中间件

当用户发起了一个服务器并没有处理的请求，此时会在页面中输出404，会给用户造成不好的体验感，为了能避免这个问题发生，我们可以在当访问到没有处理的请求的时候，给用户响应自定义内容。

// 该中间件也需要写在最后（与异常中间件的顺序无所谓，只要确保其在所有的路由方法之后就可）
app.use((req,res,next) => {
    // 输出404错误
    res.status(404).send('<h1>404</h1>')
    // 先指定404状态码，然后再输出错误信息
})

注意事项：404中间件，必须在所有路由之后，至于与异常中间件的顺序，谁先谁后无所谓。

模板页面：页面：https://404.life/

注

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog

许小墨~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Express框架
Han_Zhou_Z的博客
02-25 1783
目录 一、Express框架 1、Express简介 2、Express的优势 3、安装Express 4、创建Web服务器的步骤 （1）引入express模块 （2）调用express()方法创建服务器对象 （3）调用get()方法定义GET路由 （4）启动监听：调用listen()方法 5、Express的中间件(Middleware) （1）中间件机制可以实现的用 （2）中间件主要由中间件方法和请求处理函数这两个部分构成。 （3）常用的中间件方法有app.get()、app.
expresscache
06-12
标题“expresscache”所指的是一个专门针对Windows操作系统（如Win7、Win8、Win10）的缓存优化工具。ExpressCache的主要目的是提高计算机的性能，尤其是启动速度和日常使用时的数据加载速度。它通过利用硬盘上的未...
Express
每天都要努力学习哦~~
03-26 1858
初识 Express 1.1 Express 简介 1. 什么是 Express 官方给出的概念：Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。 通俗的理解：Express 的作用和 Node.js 内置的 http 模块类似，是专门用来创建 Web 服务器的。 Express 的本质：就是一个 npm 上的第三方包，提供了快速创建 Web 服务器的便捷方法。 Express 的中文官网： http://www.expressjs.com.cn/ 2. 进一步
NA Express
里查叔叔
03-25 1844
Na Express
QLExpress学习使用总结
热门推荐
张彦峰的博客
11-12 2万+
QLExpress（Quick Language Express）是阿里巴巴开源的一门动态脚本引擎解析工具，起源于阿里巴巴的电商业务，旨在解决业务规则、表达式、数学计算等动态脚本的解析问题。线程安全：QLExpress被设计为线程安全的动态脚本引擎，它使用类型的临时变量，确保在引擎运算过程中的并发场景下的线程安全性。高效执行：为了提高执行效率，QLExpress在编译过程中可以将比较耗时的脚本编译结果缓存到本地机器。
Express中间件
世界和我们都不该止步于此
04-07 3756
目录 一.了解中间件 二.定义中间件 1.定义一个局部生效的中间件 2.定义一个全局生效的中间件 3.定义多个中间件遇到的问题 4.中间件有什么作用？ 5.总结 三.中间件的分类 1.应用级别中间件 2.路由级别中间件 3.错误级别中间件 4.Express内置中间件 5.第三方中间件 一.了解中间件 中间件（Middleware）是一个概念 用来特指业务流程的中间处理环节 在我们的Express服务器中，也是这样的道理，当客户端请求到达Express服务器后...
Plotly Express
最新发布
编码时光
05-18 1483
一、关于 Plotly Express 高级功能 Dash 中的 Plotly Express 关于 Dash 安装 二、画廊 1、Scatter, Line, Area and Bar Charts 2、Part to Whole Charts 3、Distributions 4、Images and Heatmaps 5、Tile Maps 6、Outline Maps 7、Polar Coordinates 8、3D Coordinates 9、Ternary Coordinates
EXPRESS框架
mantou_riji的博客
07-07 2875
express是一款基于Node.js平台,快速、开放、极简的web开发框架。官网：https://www.expressjs.com.cn/express是node的第三方框架 初始化： 安装： 使用的时候引入即可：之前都是用 向前端页面写数据，但是比较麻烦，一般情况下我们还需定义 ，还需要注意返回的书html片段，页面还是json数据，比较麻烦。 EXPRESS框架直接将这些内容封装成,我们可以直接将数据进行返回，比较方便。 处理路由 固定路由 表示可以匹配 和 路径 是一个占位符 表
Express框架(基础部分、路由和中间件)
weixin_63443072的博客
02-05 2002
一义上来讲，路由就是映射关系。// 定义一个最简单的中间件函数console.log('这是个最简单的中间件函数');// 把流转关系交给下一个中间件或路由next()模拟一个类似于 express.urlencoded 这样的中间件来解析 POST 提交到服务器的表单数据。定中间件监听req的 data事件监听req的end 事件使用querystring模块解析请求体数据将解析出来的数据对象挂载为 req.body将自定义中间件封装为模块// 解析表单数据的中间件。
Nodejs—Express
m0_59451453的博客
06-02 3711
官方给出的概念：Express 是基于 Node.js 平台快速、开放、极简的Web 开发框架。通俗的理解：Express 的作用和 Node.js 内置的 http 模块类似，是专门用来创建 Web 服务器的。
Express简介
Kodomo
02-28 1191
一、什么是Express Express是基于Node.js平台,快速、开放、极简的Web开发框架 通俗的理解:Express的作用和Node.js内置的http模块类似,是专门用来创建Web服务器的. Express的本质:就是一个npm上的第三方包,提供了快速创建Web服务器的便捷方法 Express的中文官网:https://www.expressjs.com.cn/
NoteExpress
03-12
NoteExpress是一款专业的文献管理软件，尤其受到科研人员和学者的青睐。它可以帮助用户高效地整理、存储和检索阅读过的各类文献资料，无论是PDF格式的学术论文、书籍章节还是网页文档，NoteExpress都能提供全面的...
Outlook Express.zip
03-01
Outlook Express是一款经典的电子邮件客户端，尤其在Windows 7操作系统中被广泛使用。它是由Microsoft开发的，用于管理和发送电子邮件，是早期Windows版本内置的邮件应用。这个名为"Outlook Express.zip"的压缩包...
NoteExpress参考文献工具
06-26
NoteExpress是一款在中国广受欢迎的文献管理软件，专为科研工作者、学者和学生设计，用于整理、管理和引用学术文献。这款工具极大地简化了论文写作过程中的参考文献管理，支持多种引用格式，如APA、MLA、Chicago等，...
Express Design
02-07
**Express Design 深度解析** Express Design 是一个专为Web和桌面应用程序用户界面设计而生的矢量图形工具。这款软件旨在帮助设计师们创作出引人注目的视觉元素，适用于网页、应用以及各种数字媒体内容。在深入...
PCI Express Base Specification Revision 2.0 协议规范
12-19
"PCI Express Base Specification Revision 2.0 协议规范" PCI Express Base Specification Revision 2.0 协议规范是PCI-SIG（Peripheral Component Interconnect Special Interest Group）发布的一份关于PCI ...
vue3+express
07-22
vue3 + express的项目中报错：warning in ./node_modules/express/lib/view.js， Critical dependency: the request of a dependency is an expression 的解决方案。 必能解决。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

许小墨~

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值