Express:路由，中间件，编写接口

小木荣

已于 2022-05-10 21:04:08 修改

阅读量1.2k

点赞数

分类专栏： NodeJS 文章标签： node.js express

于 2022-04-02 16:46:50 首次发布

本文链接：https://blog.csdn.net/W2001r/article/details/123922805

版权

NodeJS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了Express.js的基础知识，包括路由的创建与模块化、中间件的工作原理与应用，以及如何设置CORS解决跨域问题来编写RESTful API接口。通过实例展示了全局和局部中间件的使用，以及GET、POST、DELETE方法的接口实现。最后，提供了网页测试示例，演示了如何使用jQuery调用这些接口。

摘要由CSDN通过智能技术生成

一、路由
 二、中间件
 三、编写接口

一、路由

1.简介

路由指的是客户端的请求（路径）与服务器处理函数之间的映射关系
Express 中的路由分 3 部分组成：请求的类型、请求的 URL 地址和处理函数

路由格式：app.METHOD(PATH,HANDLER) （例：app.get('/',function(){}) ）

2.模块化使用

将路由抽离为单独模块的步骤如下：
  创建路由模块对应的 .js 文件
  调用 express.Router() 函数创建路由对象
  向路由对象上挂载具体的路由
  使用 export 向外共享路由对象
  使用 app.use() 函数注册路由模块

//router.js
import express from 'express'
// 创建路由对象
const router = express.Router()

// 挂载具体路由
router.get('/user/list', (req, res) => {
    res.send('Get user list.')
})

// 向外导出路由对象
export { router }
---------------------------------------------------
//a.js
import express from 'express'
import { router } from './router.js'

const app = express()

// 注册路由模块，添加访问前缀
app.use('/api', router)

app.listen(82, () => {
    console.log('http://127.0.0.1:82')
})

二、中间件

1.中间件简介

中间件（Middleware ），特指业务流程的中间处理环节。
服务器收到请求后，可先调用中间件进行预处理
中间件是一个函数，至少应该包含 req, res, next 三个参数，next() 参数把流转关系交给下一个中间件或路由

调用流程：
在这里插入图片描述

2.中间件实例

2.1全局中间件

import express from 'express'
const app = express()

// 定义第一个全局中间件
const mw1 = function(req,res,next){
	console.log('调用了第1个全局中间件')
	next()
}
app.use(mw1)
// 定义第二个全局中间件(简化)
app.use((req, res, next) => {
  console.log('调用了第2个全局中间件')
  next()
})

app.get('/user', (req, res) => {
  res.send('User page.')
})

app.listen(80, () => {
  console.log('http://127.0.0.1')
})

2.2局部中间件

import express from 'express'
const app = express()

// 定义两个中间件函数
const mw1 = (req, res, next) => {
    console.log('调用了第一个局部生效的中间件')
    next()
}
const mw2 = (req, res, next) => {
    console.log('调用了第二个局部生效的中间件')
    next()
}

// 两种定义局部中间件的方式，1,2顺序不同先后不同
app.get('/hello', mw2, mw1, (req, res) => { res.send('hello page.') })
app.get('/about', [mw1, mw2], (req, res) => res.send('about page.'))

app.listen(83, function () {
    console.log('Express server running at http://127.0.0.1')
})

3.中间件分类

1 应用级别的中间件
	通过app.use() 、app.get() 或 app.post()  绑定到 app 实例上的中间件
2 路由级别的中间件
	绑定到 express.Router() 实例上的中间件
3 错误级别的中间件
	用于捕获项目的异常错误，有四个参数 err req res next (顺序不能换)
	注意：**此中间件必须注册在所有路由之后！**
4 Express 内置的中间件
    express.static 快速托管静态资源的内置中间件
    express.json 解析 JSON 格式的请求体数据（在 4.16.0+ 版本中可用，下同）
    express.urlencoded 解析 URL-encoded 格式的请求体数据
5 第三方的中间件
	其实就是和express有关的包

三、编写接口

解决跨域问题：CORS（Cross-Origin Resource Sharing，跨域资源共享）
跨域：协议、域名、端口号有一个不同就是跨域

1.创建服务器
test.js

import express from 'express'
import { router } from './apiRouter.js'
import cors from 'cors'

const app = express()

app.use(cors())
app.use('/api', router)

app.listen(8080, (req, res) => {
    console.log('http://127.0.0.1:8080');
})

2.创建api路由模块及编写get post delete 接口
apiRouter.js

import express from 'express'
const router = express.Router()

router.get('/get', (req, res) => {
    res.send({
        status: 0,
        msg: 'get ok!',
        data: { "name": "get" }
    })
})
router.post('/post', (req, res) => {
    res.send({
        status: 0,
        msg: 'post ok!',
        data: { "name": "post" }
    })
})
router.delete('/delete', (req, res) => {
    res.send({
        status: 0,
        msg: 'delete ok!'
    })
})

export { router }

3.网页测试
test.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(function () {
            // 1. 测试GET接口
            $('#btnGET').on('click', function () {
                $.ajax({
                    type: 'GET',
                    url: 'http://127.0.0.1:8080/api/get',
                    data: { name: 'zs', age: 20 },
                    success: function (res) {
                        console.log(res)
                    },
                })
            })
            // 2. 测试POST接口
            $('#btnPOST').on('click', function () {
                $.ajax({
                    type: 'POST',
                    url: 'http://127.0.0.1:8080/api/post',
                    data: { bookname: '水浒传', author: '施耐庵' },
                    success: function (res) {
                        console.log(res)
                    },
                })
            })
            // 3. 为删除按钮绑定点击事件处理函数
            $('#btnDELETE').on('click', function () {
                $.ajax({
                    type: 'DELETE',
                    url: 'http://127.0.0.1:8080/api/delete',
                    success: function (res) {
                        console.log(res)
                    },
                })
            })
        })
    </script>
</head>

<body>
    <button id="btnGET">GET</button>
    <button id="btnPOST">POST</button>
    <button id="btnDELETE">DELETE</button>
</body>

</html>