Vue CLI 项目中使用 Mockjs

Mock.js 生成随机数据，拦截 Ajax 请求

需求

后端接口还没有写好，前端需要数据进行调试。

安装

mockjs

$ npm install mockjs --save

axios （http 请求）

$ npm install axios --save

使用

1. 在 src 目录下新建 mock 文件夹，并新建 mock.js 文件，用于拦截 Ajax 请求并返回数据
2. 在 main.js 引入 mock.js 及 axios
3. 在组件中请求数据

// 获取 mock 对象
const Mock = require('mockjs')
// 获取 Random 对象
const Random = Mock.Random
// 拦截域名（自定义）
const rurl = 'http://demo.com/api'
// 多长时间后相应
Mock.setup({
    timeout: '200-600'
})

// 数据
function fn(req) {
    let length = Random.natural(1, 5);
    let data = [];
    for (let i = 0; i < length; i++) {
        let dt = {
            url: Random.dataImage('750x300', ''),
            text: Random.cword(4)
        }
        data.push(dt);
    }
    return data;
}
Mock.mock(`${rurl}/test`, "get", fn);

// axios
import Axios from 'axios'
// 设置默认请求地址
Axios.defaults.baseURL = 'http://demo.com/api'
Vue.prototype.$axios = Axios

// mock
import Mock from './mock/mock.js'

this.$axios({
    method: 'get',
    url: '/test'
}).then((res) => {
    if (res.status == 200 && res.statusText == 'OK') {
        console.log(res)
    }
}).catch(function (error) {
    console.log(error);
});

相关文档

1. Mock.js 官方网站
2. axios 文档（npm）