一、路由
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>
delet有两个是因为它是预检请求