本文已参与「新人创作礼」活动,一起开启掘金创作之路。
在重新复习node的时间点,网上搜罗扒拉整理了下面一个node服务端提供前端api的案例。
案例代码如下:
const express = require('express')
const app = express()
// 使用时bodyParser被编译器划上横线提示已弃用(19年已弃用)
// const bodyParser = require('body-parser')
// app.use(bodyParser.json())
// app.use(bodyParser.urlencoded({ extended: true }))
// 解决办法(直接使用express代替bodyParser进行调用)
// json请求
app.use(express.json())
// 表单请求
app.use(express.urlencoded({ extended: false }))
// 设置跨域
app.all('*', (req, res, next) => {
// //设置请求头
// //允许所有来源访问
// res.header('Access-Control-Allow-Origin', '*')
// //用于判断request来自ajax还是传统请求
// res.header('Access-Control-Allow-Headers', 'X-Requested-With')
// //允许访问的方式
// res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
// //修改程序信息与版本
// res.header('X-Powered-By', '3.2.1')
// //内容类型:如果是post请求必须指定这个属性
// res.header('Content-Type', 'application/json;charset=utf-8')
// 上面的请求头配置,在前端接口请求的content-type是application/json的时候会报错:'...Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.';
// 所以第二项"Access-Control-Allow-Headers",需要设置请求类型
//设置请求头
//允许所有来源访问
res.header('Access-Control-Allow-Origin', '*')
//用于判断request来自ajax还是传统请求
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
//允许访问的方式
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
//修改程序信息与版本
res.header('X-Powered-By', '3.2.1')
//内容类型:如果是post请求必须指定这个属性
res.header('Content-Type', 'application/json;charset=utf-8')
next()
})
// 模拟返回数据
const comebackData = [
{
name: 'jimson',
age: 18,
sex: '男'
},
{
name: 'licy',
age: 18,
sex: '女'
}
]
// 定义接口
app.get('/123', (req, res) => {
res.status(200)
res.json(comebackData)
})
app.post('/test234', (req, res) => {
console.log(req.stack);
console.log(req.body);
console.log(req.url);
console.log(req.query);
res.json(req.body)
})
// 配置服务
const server = app.listen(9527, () => {
const host = server.address().address
const port = server.address().port
console.log("This app listen at http://%s:%s", host, port)
})
步骤总结:
1)使用有一定历史的,稳定的express作为接口请求的定义工具(注意bodyParser已在2019年弃用,所以直接使用express定义接口请求);
2)定义json和表单两种类型请求;
3)配置跨域和请求头其他参数,注意'Access-Control-Allow-Headers'这一项的配置;
4)分别定义了get和post请求类型的接口,并且返回不同类型的数据;
5)配置服务,开启端口,即可在浏览器地址栏进行接口请求。
接口请求方式如下:
1、get请求: 地址栏直接请求,得到返回的数据。
2、post请求: 我们也可以通过定义一个html文件,在这个文件里面进行接口的请求(比如通过ajax)来模拟post请求。
<!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="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<script>
comebackData = {
name: 'jimson',
pass: '123456'
}
$(function () {
$.ajax({
type: 'POST',
url: 'http://localhost:9527/test234',
dataType: 'JSON', //请求类型指定JSON
data: JSON.stringify(comebackData), //请求参数JSON序列化
contentType: 'application/json;charset=utf-8', //指定请求头内容类型
success(data) {
console.log(data, '1111111')
},
error(err) {
console.log(err)
}
})
})
</script>
</body>
</html>
这时候,我们双击执行这个html文件(这里的名字是index.html),即可实现接口的请求:
这个html页面也会得到返回的数据:
注意: 服务端配置跨域的时候记得配置Content-Type:
如果使用Vue写前端页面
我们知道Vue项目写前端项目,后面都会被编译压缩成html代码和js代码,所以本质上和上面的index.html执行的时候,调用接口发起请求的情况是一致的。
唯独不同的是,我们在开发Vue项目的时候有调试阶段,即接口请求调试,这时候要注意本地环境和线上环境的接口请求地址的替换,一般Vue项目会有vue.config.js文件进行devServer配置代理,发布线上的时候也会有nginx.conf文件进行请求地址的配置。
所以,写完Vue项目调试完毕之后,需要进行地址配置替换,然后再在服务器上面部署Vue项目代码(前端代码)和后端代码(node服务代码或java服务代码)。