准备工作
目录
第一步在app.js上创建最基本的服务器
// 导入 express 模块
const express = require('express')// 创建 express 的服务器实例
const app = express()// 调用 app.listen 方法，指定端口号并启动 web 服务器
app.listen(8888, () => {
console.log('running……')
})
第二步在router.js创建API路由模块
const express = require('express')
const router = express.Router()// 在这里挂载对应的路由
module.exports = router
第三步在app.js导入路由模块
完整代码
// 导入 express 模块
const express = require('express')// 创建 express 的服务器实例
const app = express()// 导入路由模块
const router = require('./router.js')
// 把路由模块，注册到 app 上
app.use('/api', router)// 调用 app.listen 方法，指定端口号并启动 web 服务器
app.listen(8888, () => {
console.log('running……')
})
第四步在router.js上编写get请求
完整代码
const express = require('express')
const router = express.Router()// 在这里挂载对应的路由
router.get('/book', (req, res) => {
// 通过 req.query 获取客户端通过查询字符串发送到服务器的数据
const query = req.query// 调用 res.send() 方法，想客户端响应处理的结果
res.send({
status: 0, // 0 表示处理成功，1 表示处理失败
msg: 'GET 请求成功', // 状态描述
data: query // 需要响应给客户端的数据
})
})module.exports = router
第五步在router.js上编写post请求
完整代码
const express = require('express')
const router = express.Router()
// 在这里挂载对应的路由
// get请求
router.get('/book', (req, res) => {
const query = req.query
// 调用res.send()方法,向客户端响应处理的结果
res.send({
status: 0, //0表示处理成功,1表示处理失败
mag: 'GET,请求成功', //状态描述
data: query //需要响应给客户端的数据
})
})
module.exports = router
// post请求
// 定义 POST 接口
router.post('/book', (req, res) => {
// 通过 req.body 获取请求题中包含的 url-encoded 格式的数据
const body = req.body
// 调用 res.send() 方法，向客户端响应结果
res.send({
status: 0,
msg: 'Post 请求成功',
data: body
})
})
module.exports = router
第五步,要在app.js配置中间件
完整代码
// 导入express模块
const express = require('express')
// 创建express的服务器
const app = express()
// 配置解析表单数据的中间件
//注意：如果要获取 URL-encoded 格式的请求体数据，必须配置中间件 app.use(express.urlencoded({ extended: false }))
app.use(express.urlencoded({
extended: false
}))
// 导入路由模块
const router = require('./router')
// 把路由模块,注册到app上
app.use('./api', router)
// 调用app.listen方法,指向端口号并启动web服务器
app.listen(8888, () => {
console.log('running');
})
第六步在1.html写上代码
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head><body>
<button class="btn1">get</button>
<button class="btn2">post</button><script>
$(function () {
$('.btn1').click(function () {
$.ajax({
url: 'http://127.0.0.1:8888/api/book?name=tom&age=10',
success: function (data) {
console.log(data)
}
})
})$('.btn2').click(function () {
$.ajax({
url: 'http://127.0.0.1:8888/api/book',
method: 'post',
data: {
name: '雪中悍刀行',
author: '烽火戏诸侯'
},
success: function (data) {
console.log(data)
}
})
})
})
</script>
</body></html>
第七步,解决跨域问题
编写的 GET 和 POST 接口，存在一个很严重的问题：不支持跨域请求
解决接口跨域问题的方案主要有两种 :
CORS (主流的解决方案，推荐使用)
JSONP (有缺陷的解决方案：只支持 GET 请求
使用cors中间件解决跨域问题步骤:
安装中间件:npm i cors
导入中间件:const cors = require('cors')
配置中间件:在路由之前调用app.use(cors())
完整代码
// 导入express模块
const express = require('express')
// 创建express的服务器
const app = express()
// 导入中间件
const cors = require('cors')
// 配置中间件
app.use(cors())
// 配置解析表单数据的中间件
//注意：如果要获取 URL-encoded 格式的请求体数据，必须配置中间件 app.use(express.urlencoded({ extended: false }))
app.use(express.urlencoded({
extended: false
}))
// 导入路由模块
const router = require('./router')
// 把路由模块,注册到app上
app.use('/api', router)
// 调用app.listen方法,指向端口号并启动web服务器
app.listen(8888, () => {
console.log('running');
})
效果是这样的: