Vue + MockJs 快速上手

Vue + MockJs 快速上手

抛弃后台接口，从Mock开始
1、npm i mockjs --save-dev 安装模块依赖
2、import Mock from 'mockjs' 在main.js中引入模块
3、const Random = Mock.Random;在main.js中取出Random，为生成随机数据做准备
4、Mock.mock(rurl, rtype,template|function) 紧接着拦截对应url的交易返回模拟数据，比如：

let getMockData = function（option）{
let list = [];
    for (let i = 0; i < 5; i++) {
        let newObject = {
            name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
            cfirst: Random.cfirst(), //模拟姓氏
            natural: Random.natural(10, 30), //返回一个随机的自然数
            clast: Random.clast(),//模拟名字
            age: Random.csentence(5, 10), // 生成一条随机的中文句子 ( min, max )
            data: Random.date("yyyy-MM-dd"),// 生成的日期字符串的格式,默yyyy-MM-dd；
            time: Random.time(),//时间
            image: Random.image('200x100', '#4A7BF7', 'Hello'), //图片宽高不指定则随机
            city: Random.city(true), //生成在某个省份的某个城市 city()生成随机城市
            province: Random.province(),//生成随机省份
            url: Random.url(), //生成随机URL(每次运行结果不同)
            ip: Random.ip()   //  "74.97.41.159" 生成随机IP(每次运行结果不同)
        }
        list.push(newObject);

    }
    return list;
}
    Mock.mock('http://127.0.0.1:3000/login', getMockData)；

这样mockjs就可以拦截到login交易，并返回对应模拟数据，当然真实项目接口量不是一点，所以需要抛弃之前的，重新开始；

1、在src下建一个mock文件夹
2、mock文件夹下建一个index.js文件
3、index中书写如下：

index.js

import Mock from 'mockjs'
import login from './mock-login'
Mock.setup({
    timeout: 800, // 设置延迟响应，模拟向后端请求数据
});
//对应模块的接口列表
let loginUrlList = [{
    url: 'pclogin/timeStamp',
    method: login.timeStamp
}];
//所有模块列表名数组
let urlList = [loginUrlList];
for (let i = 0; i < urlList.length; i++) {
    for (let j = 0; j < urlList[i].length; j++) {
        // Mock.mock( url, post/get , 返回的数据)；
        //url可以是正则也可以是字符串（字符串需要全拼）
        Mock.mock('http://127.0.0.1:3000/pcformadp/' + urlList[i][j].url, 'post', urlList[i][j].method);
    }

}

mock-login.js

import { Random } from 'mockjs'
import setRes from './utils-data-type'//引用包装数据函数
/**
 * req 为请求参数
 * setRes 返回数据包装
 * for循环是展示的条数
 * 
 */
const timeStamp = function (req) {
    let list = [];
    for (let i = 0; i < 5; i++) {
        let newObject = {
            name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
            cfirst: Random.cfirst(), //模拟姓氏
            natural: Random.natural(10, 30), //返回一个随机的自然数
            clast: Random.clast(),//模拟名字
            age: Random.csentence(5, 10), // 生成一条随机的中文句子 ( min, max )
            data: Random.date("yyyy-MM-dd"),// Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
            time: Random.time(),//时间
            image: Random.image('200x100', '#4A7BF7', 'Hello'), //模拟图片 宽高不指定则随机
            city: Random.city(true), //生成在某个省份的某个城市 city()生成随机城市
            province: Random.province(),//生成随机省份
            url: Random.url(), //生成随机URL(每次运行结果不同)
            ip: Random.ip()   //  "74.97.41.159" 生成随机IP(每次运行结果不同)
        }
        list.push(newObject);
    }
    return setRes(req, {
        data: list,
    });
}
export default {
    timeStamp
}

utils-data-type.js

import { Random } from 'mockjs'
/**
 * 
 * @param {*} req 上送参数
 * @param {*} options 包装后的数据集合
 * Random.int(0, 5) >= 1 交易成功的概率计算0.8（自行调整）
 * data 生成的模拟数据
 * message 错误信息
 * totalCount 总条数
 */
function setRes(req, options) {
    console.log(options);
    const { code = Random.int(0, 5) >= 1 ? '000000' : '999999', message, data = {}, totalCount = 10 } = options;
    const result = {
        code,
        message: message || ['失败', '错误', '异常'][Random.integer(0, 2)],
        data,
        totalCount,
    };
    return result;
}
export default setRes;

整体就是这么个流程，结束，睡觉！