为什么需要Mock.js
安装与测试
npm instal mockjs；创建JS文件，键入官网示例代码运行即可输出对应的JSON格式的数据：// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1
}]
})
// 输出结果 将JavaScript对象转换为格式化的JSON字符串，并在控制台输出，null表示不使用自定义替换函数，4表示缩进为4个空格
console.log(JSON.stringify(data, null, 4))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="http://mockjs.com/dist/mock.js"></script>
<script>
const data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
});
console.log(data);
console.log(JSON.stringify(data, null, 4));
</script>
</body>
</html>
'属性名|生成规则' : 属性值 //'name|rule' : value
| 生成规则 | 说明 | 示例 |
|---|---|---|
| min-max | 生成min~max之间的字符串 | ‘list|1-10’ |
| count | 生成count个字符串 | ‘list|5’ |
| min-max.dmin-dmax | 生成min~ max之间的浮点数，小数点位数在dmin ~dmax之间 | ‘id|1-10.1-3’:1 |
| count.dcount | 生成count个字符串，小数点位数为dcount | ‘id|8.2’:1 |
| min-max.dcount | //同上 | |
| count.dmin-dmax | //同上 | |
| +step | 每次进行累加一个值 | ‘id|+1’:1 |
| 生成规则 | 说明 | 示例 |
|---|---|---|
| 布尔值 | 生成布尔值，1/2概率true | ‘flag|1’:true |
| 布尔值min-max | 生成布尔值，概率为min/(min+max) | ‘flag|1-10’:true |
| 对象count | 从对象中随机抽取count个属性 | ‘obj|2’:obj |
| 对象min-max | 从对象中随机抽取min-max属性 | ‘obj|1-3’:obj |
| 数组1 | 获取1次数组 | ‘arr|1’:arr |
| 数组count | 重复count次组成新数组 | ‘arr|2’:arr |
| 数组+1 | 累加 | ‘arr|+1’:arr |
| 数组min-max | 重复min-max次组成新数组 | ‘arr|1-2’:arr |
| 生成规则 | 说明 | 示例 |
|---|---|---|
| 函数 | 支持函数 | ‘fn|1’:function |
| 正则 | 支持正则 | ‘reg|1’😕[a-z]/ |
console.log(Mock.Random.cname());
console.log(Mock.mock('@cname'));
| Type | Method |
|---|---|
| Basic | boolean,natural,integer,float,character,string,range,date,time,datetime,now |
| Image | image,dataImage |
| Color | color |
| Text | paragraph,sentence,word,title,cparagraph,csentence,cword,ctitle |
| Name | first,last,name,cfirst,clast,cname |
| Web | url,domain,email,ip,tld |
| Address | area,region |
| Helper | capitalize,upper,lower,pick,shuffle |
| Miscellaneous | guid,id |
//随机中文人名，不带c就是英文
console.log(Mock.mock('@cname'));
//随机ID
console.log(Mock.mock('@id'));
//随机中文标题，不带c就是英文
console.log(Mock.mock('@ctitle'));
//随机ip地址
console.log(Mock.mock('@ip'));
//随机图片地址
console.log(Mock.mock('@image'));
//随机url地址
console.log(Mock.mock('@url'));
//随机颜色，十六进制
console.log(Mock.mock('@color'));
//随机数值
console.log(Mock.mock('@integer'));
//随机日期
console.log(Mock.mock('@datetime'));
//随机字符串
console.log(Mock.mock('@string'));
//自行扩展占位符
Mock.Random.extend({
cstore() {
return this.pick([
'宠物店',
'美容店',
'小吃店',
'数码店',
'快餐店'
]);
}
});
console.log(Mock.mock('@cstore'));
npm insatll axiosconst axios = require('axios');
axios.get('url')
.then(res => {
console.log(res.data);
})
.catch(err => {
console.log('错误' + err);
});
axios({
method : 'get',
url : 'url',
params : {
id : 1,
status : 5
}
}).then(res => {
console.log(res.data);
});
axios.all([
axios({
url : 'url',
data : '1.异步'
}),
axios({
url : 'url',
data : '2.异步'
}),
axios({
url : 'url',
data : '3.异步'
}),
]).then(axios.spread((res1, res2, res3) => {
console.log(res1.config.data);
console.log(res2.config.data);
console.log(res3.config.data);
}));
const myAxios = axios.create();
myAxios.defaults.baseURL = 'url';
//请求拦截
myAxios.interceptors.request.use(config => {
//打印，修改
console.log('loading...');
//config.url = '/data2.json';
//config.timeout = 50;
return config;
});
//响应拦截
myAxios.interceptors.response.use(response => {
//修改返回数据的格式
return response.data;
});
myAxios.request({
method : 'get',
url : '/data.json',
}).then(res => {
console.log(res);
});
Mock.mock
//ajax
axios.request({
method : 'get',
url : 'url'
}).then(res => {
console.log(res.data);
});
//mock拦截
Mock.mock('url', {
'list|5-10' : [
{
'id|+1' : 1,
'username' : '@cname',
'email' : '@email',
'gender' : '@boolean',
'price' : '@integer'
}
]
});
Mock.setup
Mock.setup()配置进行特定的行为：//响应时间为400毫秒(默认值是10-100)
Mock.setup({
timeout: 400
})
// 响应时间介于200-600毫秒之间
Mock.setup({
timeout: '200-600'
})
Mock.setup( settings ) 仅用于配置 Ajax 请求，将来可能用于配置 Mock 的其他行为。Mock.valid
data 是否与数据模板 template 匹配。var template = {
name: 'value1'
}
var data = {
name: 'value2'
}
Mock.valid(template, data)
// =>
[
{
"path": [
"data",
"name"
],
"type": "value",
"actual": "value2",
"expected": "value1",
"action": "equal to",
"message": "[VALUE] Expect ROOT.name'value is equal to value1, but is value2"
}
]
Mock.toJSONSchema
template 转换成 JSON Schema。const Mock = require('mockjs');
// 创建一个 Mock 对象
const mockData = Mock.mock({
'list|1-10': [{
'id|+1': 1,
'name': '@cname',
'age|18-60': 1
}]
});
// 将 Mock 对象转换为 JSON Schema
const jsonSchema = Mock.toJSONSchema(mockData);
console.log(jsonSchema);
npm install mockjs安装mockjs包.env.development，定义环境变量：# 控制是否需要使用mock模拟的数据
MOCK = TRUE
const Mock = require('mockjs')
module.exports = function (app) {
if (process.env.MOCK == 'true') {
// node中的express框架
// 参数1： 接口地址；参数2：服务器处理函数
app.use('/api/userinfo', (req, res) => {
// 随机生成一个对象
var data = Mock.mock({
id: '@id',
username: '@cname',
date: '@date(yyyy-MM-dd)',
description: '@paragraph',
email: '@email',
'age|18-40': 0
})
// 将模拟的数据转成json格式返回给浏览器
res.json(data)
})
}
}
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
// devServer在发送请求时，会先走到before指定的函数中进行处理，如果before中没有对应的接口路由，才会请求外网等
onBeforeSetupMiddleware: require('./mock/index.js')
}
})
3.使用axios调用该接口，获取数据:
<template>
<div id="app">
<h1>Test</h1>
</div>
</template>
<script>
import axios from "axios";
export default {
created() {
axios.get('/api/userinfo').then(res => {
console.log(res);
})
}
}
</script>
<style></style>
主流Mock方案对比
代码侵入：
抓包工具：
本地服务：
使用express或者koa等框架编写后端接口
优点：真实，方便管理
缺点：前端 === 全栈 ？
浏览器插件：
平台类：
请求拦截：