vue 使用mock模拟get和post请求

最新推荐文章于 2024-07-11 15:07:06 发布

原创最新推荐文章于 2024-07-11 15:07:06 发布 · 945 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #vue.js #前端 #json

前端专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中利用mockjs进行接口数据模拟，包括安装、配置mock数据及在组件中调用，以便于前端开发在后端API未完成时进行调试。

很多时候，前端的开发需要配合后端接口数据，但是后端开发未完成的时候，前端不能苦等，可以先用mock来进行数据模拟和调试。

使用方法如下：

1、安装mockjs

npm install mockjs

2、在vue项目中创建文件夹

3、在index.js中写如下代码

const Mock = require('mockjs');
//格式： Mock.mock( url, post/get , 返回的数据)；  下面的userInfo是指mock目录下的json目录下的userInfo.json文件
Mock.mock('/user/userInfo', 'get', require('./json/userInfo.json'));
Mock.mock('/api/addgoods', 'post', require('./json/userInfo.json'));

// 下边这个模拟post请求也行
/*Mock.mock('/api/addgoods', 'post', function (option) {undefined
    let $name=JSON.parse(option.body).name;
    if($name){undefined
        return Mock.mock({undefined
            status: 200,
            message: '提交成功！！！'
        })
    }else{undefined
        return Mock.mock({undefined
            status: 400,
            message: '未提交参数'
        })
    }
})*/

在userInfo.json中写如下代码，记着这个是.json格式的不是js格式的

{
  "result": "success",
  "data": {
    "userSn": "3785521",
    "username": "不求甚解",
    "age": 25,
    "imgUrl": "https://avatar.youkuaiyun.com/8/5/D/3_bocongbo.jpg"
  },
  "msg": ""
}

在需要获取接口数据的地方（组件，方法等里面），如下调用，就可以使用mock自定义的json数据了：

axios.post("/api/addgoods",
        //   {
        //   name: "张三",
        //   age: "14"
        // }
        ).then((res) => {
          console.log("res1111" + res.data.data.age)
        })