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

2023-07-20  本文已影响0人  码上行动

前言: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)
      })
上一篇下一篇

猜你喜欢

热点阅读