1 简介
Express是一个基于Node平台的web应用开发框架,它提供了一系列的强大特性用来创建各种Web应用。
可以使用
npm install express
命令安装Express,安装后包含两个文件夹:
再在根目录新建文件
server.js
,具体使用方法见第3节。
2 原生Node.js与Express框架路由实现对比
2.1 原生Node.js路由
1 |
app.on('request', (req, res) => { |
2.2 Express路由
1 |
// 当客户端以get方式访问/时 |
3 Express框架简单使用
启动一个Express网站服务器并开启一个“/”的路由监听:
1 |
// 1.引入Express框架,并创建Express实例 |
输入
node server.js
启动服务器,但因node项目在每次编辑后都要重新启动才会生效,所以使用
nodemon
工具来自动启动服务,推荐全局安装,命令如下:
1 |
npm install -g nodemon |
安装成功后就可以使用命令
nodemon server.js
来启动服务。
4 中间件
1 |
app.get('/request', (req, res, next) => { |
默认情况下,请求从上到下依次匹配中间件,一旦匹配成功,终止匹配。可以调用
next()
方法将请求的控制权交给下一个中间件,直到遇到结束请求的中间件。
4.1 万能中间件
app.use
app.use
匹配所有的请求方式,可以直接传入请求处理函数,代表接收所有的请求。
1 |
app.use((req, res, next) => { |
app.use
第一个参数也可以传入请求地址,代表不论什么请求方式,只要是这个请求地址就接收这个请求。
1 |
app.use('/about', (req, res, next) => { |
4.2 中间件的应用
1 |
// 登录过程模拟 |
1 |
app.use((req, res, next) => { |
1 |
app.use((req, res, next) => { |
4.3 处理错误中间件
在程序执行的过程中,不可避免的会出现一些无法预料的错误,比如文件读取失败,数据库连接失败。错误处理中间件是一个集中处理错误的地方。
1 |
app.get('/index', (req, res) => { |
1 |
app.get('/', (req, res, next) => { |
4.4 捕获错误
在nodejs中,异步API的错误信息都是通过回调函数获取的,支持Promise对象的异步API发生错误可以通过catch方法捕获。异步函数执行如果发生错误要如何捕获错误呢?
try catch
可以捕获异步函数以及其他同步代码在执行过程中发生的错误,但是不能其他类型的API发生的错误。下面代码中把读取文件改造成支持异步函数的形式。
1 |
const promisify = require('util').promisify |
4.5 构建模块化路由
1 |
// 创建路由对象 |

5 GET参数的获取
Express框架中使用req.query即可获取GET参数,框架内部会将GET参数转换为对象并返回。
1 |
// 接收地址栏中问号后面的参数 |
6 POST参数的获取
1 |
// 引入body-parser模块 |
注:可以直接使用
app.use(express.json());
代替body-parser。
【1】 https://stackoverflow.com/questions/61551926/express-json-vs-body-parser
【2】 https://cloud.tencent.com/developer/ask/37434
7 Express路由参数
在定义时,可以显式定义请求接收的参数,在url后面用冒号加上参数:
1 |
// localhost:3000/find/123 |
8 静态资源的处理
通过Express内置的
express.static
可以方便地托管静态文件,例如img、CSS、JavaScript 文件等。
1 |
const path = require('path') |
- http://localhost:3000/images/kitten.jpg
- http://localhost:3000/css/style.css
- http://localhost:3000/js/app.js
- http://localhost:3000/images/bg.png
- http://localhost:3000/hello.html
除此之外,还可以控制路径,可以在添加一个参数
static
,
1 |
app.use('static', express.static(path.join(__dirname, 'public'))) |
再访问静态资源的时候就要在url中加入
static
,如:
http://localhost:3000/static/hello.html
。
9 跨域处理
参考资料:
https://juejin.cn/post/6844904126246027278#heading-1
现在如有接口:
1 |
app.get('/user', (req, res) => { |
该接口的访问地址是:
http://localhost:3000/user
。使用静态资源处理,在public文件夹中新建
index.html
。
此时通过
http://localhost:3000/index.html
可以访问,在
body
中添加如下内容:
1 |
<script> |
再次访问
http://localhost:3000/index.html
,就可以在Console中看到输出的对象:
{name: "syz", age: "18"}
。
这是数据是可以正常访问到的,此时右键
index.html
,利用vscode插件Live server打卡,该插件会启动一个以5500为端口的服务:
访问地址为:
http://127.0.0.1:5500/public/index.html
,此时可以发现Console无法请求到数据了,并报了跨域错误。
处理跨域问题需要用到第三方库:
npm i cors
,在
server.js
中添加如下代码:
1 |
// 引入cors,返回的是一个函数,直接()执行,执行后是一个Express中间件,app.use使用它即可 |
再访问 http://127.0.0.1:5500/public/index.html 即可获取到数据。