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;