mockjs基本使用

1、安装

npm install -D mockjs

2、在项目中新建mock.js文件

image.png

3、编辑mock.js

使用API：Mock.mock( url, type, function( options ) )

• url
  需要拦截的 URL，可以是 字符串或正则。例如 /user/detail、/\/user\/*/
• type
  请求类型。例如 get、post、put、delete等。
• function(options)
  生成响应数据的函数。
  • options
    请求的信息，包含url、type 和 body 三个属性

例子

// mock.js
const Mock = require('mockjs');
Mock.mock('/user/detail', 'post', ({url, type, body}) => {
    console.log(url, type, body);
    const detail = {
        name: '李美丽',
        age: 18,
    };
    return detail;
});

3、引用mock.js文件

可以在具体vue文件中，或者main.js中引用mock.js

// main.js
require('./mock.js')

或者

// pages/index.vue
require('../mock.js')

4、正常开发

正常进行业务开发，这时候页面发送的请求会被mock拦截，如果url一致，或者正则匹配到了，则返回mock数据，没有进行网络请求发起

// pages/index.vue

  methods: {
      getUserInfo() {
          axios.post('/user/detail').then(data => {
                 console.log(data);
          })
      },
    ......

5、关闭mock

只需要把引用的mock.js删掉或者注释掉就可以了。

// main.js

//require('./mock.js')

或者

// pages/index.vue

//require('../mock.js')