2021-02-26【技术】如何vue项目中使用Mock.js

Mock.js的说明文档：http://mockjs.com/examples.html

Mock.js的作用就是：生成随机数据，拦截 Ajax

使用情形：
1.前端只有接口文档，后台接口暂未写好，这个时候，我们不必等待，也不必手动造一堆静态数据，麻烦而又浪费时间，直接使用Mock.js ,炒鸡方便
2.前端需要一些数据，需要在页面操作很多步骤或者求助后端帮忙造数据，而有了Mock.js,想要什么数据，不必再找后端或者自己走一遍流程
3.使用Mock.js，可以随机生成数据，方便我们自己测试，而不用等到项目快上线了，因为数据的原因而没怎么测试`，以后想怎么测就怎测

1.下载Mock.js

npm install mockjs --save-dev

2.在项目中新建Mock.js文件，内容如下

// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const productData = function() {
  let Data = [];
  for (let i = 0; i < 100; i++) {
    let data = {
      name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
      date: Random.date()  // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd
    }
    Data.push(data)
  }
 
  return {
    Data: Data
  }
}
//mock 第二组数据
const newsData = function () {
    let articles = []
    for (let i = 0; i < 10; i++) {
        let newsObj = {
            date: Random.date(),  //年月日
            longDate:Random.datetime(), //精确到时分秒
            number:Random.natural(201,205),  //数字
            image:Random.image(),      //图片
            flag:Random.boolean(),  // true-false
            name:Random.cname(),     //姓名
            url:Random.url(),       //url地址
            province:Random.province(),  //省
            city:Random.city(),     //市
            county:Random.county()  //区
        }
        articles.push(newsObj)
    }

    return {
        code: 0,
        msg: "操作成功",
        data: articles,
    }

}
//设置相应时间
Mock.setup({
    timeout: 500
})

// Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/user/login', 'post', productData );//mock 第一组数据
Mock.mock('/user/query', 'post', newsData);//mock 第二组数据

mock文件夹示例

3.在main.js中引入文件Mock.js

引入文件Mock.js

4.发送网络请求

在VUE项目，需要获取数据的页面中，写入如下请求

 mounted() {
            console.log("这里是mounted");
            //使用接口一
            axios.post("/user/login").then(res => {
                console.log(res);
            }).catch(res => {
                console.log("err")
            });
            //使用接口二
            axios.post("/user/query").then(res => {
                console.log(res);
            }).catch(res => {
                console.log("err")
            });
        },

5.返回的数据

返回的数据

6、 参数的添加

 mounted() {
            console.log("这里是mounted");
            //使用接口一
            axios.post("/user/login",{
                params:{
                    a:1,b:2
                }
            }).then(res => {
                console.log(res);
            }).catch(res => {
                console.log("err")
            });
            //使用接口二
            axios.post("/user/query").then(res => {
                console.log(res);
            }).catch(res => {
                console.log("err")
            });
        },

image.png