Vue项目中mockjs简单应用

1、安装引入：
需要安装mockjs和axios，

npm install mockjs --save
npm install axios --save

在main.js文件中引入mockjs

require('./mock.js');

2、设置模拟数据：
Src目录下建立Mock.js文件，根据数据模板生成随机数据，具体需要的数据可依据官方文档自行设置。
Eg：

import Mock from 'mockjs';

const Random = Mock.Random;// 工具类，用于生成各种随机数据

let data = [];

let size = [
  '400x200', '500x100', '200x300', '100x10', '600x100'
];// 生成随机图像尺寸选择

for (let i = 0; i < 5; i++) {
  let template = {
    'String': Mock.mock({
      "随机重复★|1-10": "★"
    }),
    'Boolean': Random.boolean,
    'Natural': Random.natural(1, 10),
    'Integer': Random.integer(1, 100),
    'Float': Random.float(0, 100, 0, 5),
    'Character': Random.character(),// 生成单个随机字符
    'Date': Random.date(),
    'Image': Random.image(Random.size, '#02adea', 'hello'),//生成随机图像
    'Paragraph': Random.paragraph(2, 5),// 生成2到5个句子的文本
    'Address': Random.province(), // 随机省市
    'Url': Random.url(),
    'TestJson|5': [{
      'key|+1': 1,
      'title|1': ['不想换电脑', '随便写写', '我编不出来了', '我好难', '电脑还卡'],
      'content|1': ['氪不改命', '抽卡沉船', '碎片2=1等一年', '一单下去一个水花都没有'],
      'option|1': ['我好惨', '我真的太惨了', '行了我知道没人比我更惨了']
    }]
  }
  data.push(template);
}

Mock.mock('/data/index', 'post', data)
// 当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

3、src目录下建立axios文件夹，创建api.js文件，模拟接口。

import axios from 'axios'
import { resolve } from 'path';

axios.defaults.headers.post['Content-Type']='application/x-www-from-urlencoded';
// 窗体数据被编码为名称/值对,标准编码格式

// 请求拦截器
axios.interceptors.request.use(function(config){
    return config;
},function(error){
    return Promise.reject(error);
})

// 响应拦截器
axios.interceptors.response.use(function(response){
    return response;
},function(error){
    return Promise.reject(error);
})

export function fetch(url,params){
    return new Promise((resolve,reject)=>{
        axios.post(url,params)
        .then(response => {
            resolve(response.data)
        })
        .catch((error)=>{
            reject(error);
        })
    })
}

export default{
    mockdata(url,params){
        return fetch(url,params);
    }
}

4、测试数据是否模拟成功。建立一个vue文件，router.js文件中注册后简单显示控制台数据（篇幅限制，只挑选了了一部分输出）

注意json报文未作解析处理，页面显示undefined，控制台可查看具体值，如果需要解析，遍历即可，核心代码如下

methods: {
getdata: function () {
api.mockdata(’/data/index’)
.then(res => {
var data = JSON.stringify(res);
this.dataShow = eval("(" + data + “)”);
console.log(this.dataShow);
var mydata = this.dataShow;
mydata.forEach(item => {
if (Array.isArray(item.TestJson)) {
this.myJson = item.TestJson;
}
});
console.log(this.myJson);
})
}
}

5、总结：
Mock.js生成随机数据,拦截Ajax请求，能够在接口没出来时非常方便的模拟数据，进行简单的测试。
demo下载地址如下：https://download.csdn.net/download/qq_36680300/11597799