Vue使用json-serve模拟接口请求详解

前言：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服务

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();
	},

如图可以看到已经请求成功了

以上就是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(() => {});
		}

可以看到响应成功，完美撒花！

四、进阶，增删改查的使用

对于增删改查的数据要配置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)
      })