编写接口
1.自定义路由模块
const express=require('express')
const router=express.Router()
// 挂载对应的路由
router.get('/get',(req,res)=>{
// 通过req.query获取客户端通过查询字符串，发送到服务器的数据
const query=req.query
// 调用res.send()方法，向客户端响应处理的结果
res.send({
status:0, // 0表示处理成功，1表示处理失败
msg:'GET 请求成功', //状态的描述
data:query // 需要响应给客户端的数据
})
})
// 定义post接口
router.post('/post',(req,res)=>{
//通过req.body获取请求体中包含的url-encoded格式的数据
const body=req.body
//调用res.send()向客户端响应结果
res.send({
status:0,
msg:'post 请求成功',
data:body
})
})
module.exports=router
2.将路由注册到服务器实例上
1.并且引入cors中间件注册到服务器实例上，解决跨域问题
2.将自定义路由模块挂载到服务器上，/api请求
3.express.urlencoded({extends:false} 解析表单中间件
// 导入express
const express=require('express')
// 创建服务实例
const app=express()
// 配置解析表单数据的中间件
app.use(express.urlencoded({extends:false}))
// 一定要在路由之前，配置cors这个中间件，从而解决接口跨域问题
const cors=require('cors')
app.use(cors)
// 导入路由模块
const router=require('./02_apiRouter')
// 把路由模块,注册到app上
app.use('/api',router)
// 启动服务器
app.listen(8080,()=>{
console.log('Express server running st http://127.0.0.1:8080');
})
测试接口跨域问题
在导入路由模块前，将cors中间件注册到服务器实例上
// 导入express
const express=require('express')
// 创建服务实例
const app=express()
// 配置解析表单数据的中间件
app.use(express.urlencoded({extends:false}))
// 一定要在路由之前，配置cors这个中间件，从而解决接口跨域问题
const cors=require('cors')
app.use(cors)
// 导入路由模块
const router=require('./02_apiRouter')
// 把路由模块,注册到app上
app.use('/api',router)
// 启动服务器
app.listen(8080,()=>{
console.log('Express server running st http://127.0.0.1:8080');
})
cors介绍：
使用express写接口
CORS响应头
1.Access-Control-Allow-Origin
允许那些网站能够请求
2.限制客户端发送过来的请求头：Access-Control-Allow-Headers
客户端发送请求过来，不能发送额外的请求头信息，因为CORS设定好了，除非在服务端对 Access-Control-Allow-Headers 进行声明
3.限制请求方式：Access-Control-Allow-Methods
4.简单请求
5.预检请求
就是对CORS默认的放行资源之外的请求就叫预检请求
简单请求和预检请求的区别
JSONNP接口
1.概念：
JSONP是一个跨域解决方案，目的是跨域请求JSON数据，因为JSON数据是不能跨域请求的，但是我们js跨域请求js脚本是可以的，可以把数据封装成一个js语句，做一个方法的调用。跨域请求js脚本即可获取数据
-
- 标签script的src属性是可以跨域的，所以我们跨域的服务器只要写成调用本地的函数，回调数据就可以实现跨域了
-
- 过我们发现，web页面调用js文件则不受跨域的影响（不仅如此，我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力，比如<\script>、<\img>、<\iframe>）
-
- 恰巧我们知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据。
- 恰巧我们知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据。
注意事项：
2.实践，实现JSONP接口的步骤：
代码：
// 导入express
const express=require('express')
// 创建服务实例
const app=express()
// 配置解析表单数据的中间件
app.use(express.urlencoded({extends:false}))
// 配置json接口(必须在配置cors中间件前配置jsonp接口)
app.get('/api/jsonp',(req,res)=>{
// 1.得到回调函数的名称
const funcName=req.query.callback
// 2.定义要发送到客户端的数据对象（回调的数据）
const data={ name: 'zs', age: 22 }
// 3.拼接出函数调用的字符串（请求的名称+数据）
const scriptStr = `${funcName}(${JSON.stringify(data)})`
// 4.把拼接的字符串响应给客户端
res.send(scriptStr)
})
// 一定要在路由之前，配置cors这个中间件，从而解决接口跨域问题
const cors=require('cors')
app.use(cors)
// 导入路由模块
const router=require('./02_apiRouter')
// 把路由模块,注册到app上
app.use('/api',router)
// 启动服务器
app.listen(8080,()=>{
console.log('Express server running st http://127.0.0.1:8080');
})
网页：
<!DOCTYPE html>
<html lang="zh">
<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://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button id="btnget">get</button>
<button id="btnpost">post</button>
<button id="btndelete">delete</button>
<button id="btnJSONP">jsonp</button>
<script>
$(function(){
// 1.测试get接口
$('#btnget').on('click',function(){
$.ajax({
type:'GET',
uel:'http://127.0.0.1/api/get',
data:{name:'cc',age:18},
success:function(res){
console.log(res);
}
})
})
// 2.测试delete接口
$('#btndelete').on('click',function(){
$.ajax({
type:'DELETE',
uel:'http://127.0.0.1/api/delete',
data:{name:'cc',age:18},
success:function(res){
console.log(res);
}
})
})
$('#btnJSONP').on('click',function(){
$.ajax({
type: 'GET',
url: 'http://127.0.0.1/api/jsonp',
dataType: 'jsonp',
success: function(res){
console.log(res)
},
})
})
// 2.测试post接口
// $('#btnpost').on('click',function(){
// $.ajax({
// type:'POST',
// uel:'http://127.0.0.1/api/post',
// data:{bookname:'水浒传',author:'施耐庵'},
// success:function(res){
// console.log(res);
// }
// })
// })
})
</script>
</body>
</html>
测试发现得到回调后服务端所发来的数据
