前言：MockJS可模拟接口请求，但是MockJS的拦截请求是通过拦截XMLHttpRequest对象来实现的，默认会拦截所有请求，在项目开发过程中踩坑与svga冲突，导致svga不能正常播放，故弃用mockjs 改用兼容性更好的json-serve
一、安装
npm install json-server -g
二、使用
1、新建一个data.json文件，本项目放在src/mock/下（json名可自由命名）
2、如下，在json 写入模拟接口数据
{
//electricityPower对应一个接口名
"electricityPower": {
"code": 0,
"data": {
"totalIn": 139389000,
"totalOut": 45893000
},
"msg": null,
"traceId": null,
"retry": false,
"timestamp": 1688523166925
},
//electricityHistogram对应另一个接口名
"electricityHistogram": {
"code": 0,
"data": [
{
"statisticDate": "2023-06-28",
"totalIn": 3216.767,
"totalOut": 2586.867
},
{
"statisticDate": "2023-06-29",
"totalIn": 3679.556,
"totalOut": 2992.468
},
{
"statisticDate": "2023-06-30",
"totalIn": 3418.045,
"sharpOut": 2642.95,
"totalOut": 2715.76
},
{
"statisticDate": "2023-07-01",
"totalIn": 3340.929,
"totalOut": 2572.334
},
{
"statisticDate": "2023-07-02",
"totalIn": 3303.985,
"totalOut": 2741.317
},
{
"statisticDate": "2023-07-03",
"totalIn": 3653.594,
"totalOut": 2960.794
},
{
"statisticDate": "2023-07-04",
"totalIn": 5000.852,
"totalOut": 3967.703
}
],
"msg": null,
"traceId": null,
"retry": false,
"timestamp": 1688523166924
}
}
3、找到package.json配置json-serve运行命令,并配置端口，端口最好是不常用的以免与其他启动项目冲突
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"mock": "json-server src/mock/data.json --port 8088"
}
4、如下图双开终端，npm run serve运行项目，并运行新配置的json-serve启动命令npm run mock，启动json-serve服务
image.png
5、在页面请求接口拿到数据渲染
getScreenMonitoringStatistic() {
this.$axios
.get("http://localhost:8088/electricityPower")
.then((res) => {
this.totalIn = this.$utils.toFixed(res.data.totalIn / 1000, 2);
this.totalOut = this.$utils.toFixed(res.data.totalOut / 1000, 2);
})
.finally(() => {});
}
mounted() {
this.getScreenMonitoringStatistic();
},
如图可以看到已经请求成功了
image.png
以上就是json-serve的基本使用了。码字不易，点个关注，感谢支持！注意事项是json-serve默认支持get请求**
三、进阶，POST请求的使用
json-server不支持post请求，解决方法如下:
1、利用json-server的--middlewares配置项定制请求和响应。新建一个名为middlewares.js的文件，将它放在src/mock文件夹下：
module.exports = (request, response, next) => {
if (request.method === 'POST') {
request.method = 'GET'
request.query = request.body
}
// 处理IE8下的文件上传
if ((request.headers['content-type'] || '').startsWith('multipart/form-data')) {
response.header('content-type', 'text/html')
}
next()
}
2、重新配置json-serve服务启动命令
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"mock": "json-server src/mock/data.json --port 8088 --middlewares src/mock/middlewares.js"
}
我们将刚才的请求改成post请求
getScreenMonitoringStatistic() {
this.$axios
.post("http://localhost:8088/electricityPower")
.then((res) => {
this.totalIn = this.$utils.toFixed(res.data.totalIn / 1000, 2);
this.totalOut = this.$utils.toFixed(res.data.totalOut / 1000, 2);
})
.finally(() => {});
}
可以看到响应成功，完美撒花！
image.png
四、进阶，增删改查的使用
对于增删改查的数据要配置id，否则不能找到对应数据就会报错
数据参考
{
"data": [
{"id":1,"name":"一号测试数据","time":"2023-06-06 12:10:00"},
{"id":2,"name":"二号测试数据","time":"2023-06-07 09:56:17"},
{"id":3,"name":"三号测试数据","time":"2023-06-08 16:07:10"}
]
}
实例代码
// 查询所有
axios({
url:"http://localhost:8088/data",
method:"get",
}).then(res=>{
console.log(res.data);
})
// 查询单个
axios({
url:"http://localhost:8088/data",
method:"get",
params:{
id:1, //随便写，但是id是唯一值，只能查到一条，
}
}).then(res=>{
console.log(res.data);
})
// -添加操作
axios({
url:"http://localhost:8088/data",
method:"post",
data:{
id:1, //id可以不写，会自增，如有该id会报错
name: '一号测试数据',
Time: new Date()
}
}).then(res=>{
console.log(res);
})
// 删除操作
axios({
url:"http://localhost:8088/data/1", //1为id
method:"delete",
}).then(res=>{
console.log(res);
})
// 修改操作
//patch 仅替换匹配项
axios({
url:"http://localhost:8088/data/2", //2为要修改的那条数据的id
method:"patch",
data:{
name:"修改二号", //修改内容
}
}).then(res=>{
console.log(res);
})
//put 全部替换 删除之前除id所有内容
axios({
url:"http://localhost:8088/data/2",
method:"put",
data:{
name:"我是新名字",
}
}).then(res=>{
console.log(res);
})
// json-server提供模糊查询 字段_like
axios({
url:'http://localhost:8088/data',
method:"get",
params:{
name_like: '测'
}
}).then(res=>{
console.log(res.data)
})
