0
点赞
收藏
分享

微信扫一扫

mockjs基本使用

IT影子 2021-09-19 阅读 121

1、安装

npm install -D mockjs

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

3、编辑mock.js

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

  • url
    需要拦截的 URL,可以是 字符串或正则。例如 /user/detail/\/user\/*/
  • type
    请求类型。例如 getpostputdelete等。
  • 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')
举报

相关推荐

0 条评论