Mock.js
Mock拦截Ajax请求，
一、安装、使用
$ npm i mockjs --save
import Mock from 'mockjs';
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
'id|+1': 1 // 属性 id 是一个自增数，起始值为 1，每次增 1
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))
二、Mock.js提供4个方法方法和一个工具库
1、方法
Mock.mock(url, type, { 响应值 }) - 设置拦截请求、返回响应结果
Mock.setup({ // 设置响应时间
timeout: 400
})
Mock.valid()
Mock.toJSONSchema()
2、工具库
Mock.Random
三、工具库
const Mock = require('mockjs)
const Random = Mock.Random; // 先获取Random对象
1、Random.boolean(); // true 生成出一个布尔值
2、Random.natural(); // 8518407945788098
Random.natural(60, 100); // 生成出一个自然数60-100之间
3、Random.integer(min, max); // 7546601449898424
4、Random.float(); // 1479142551150828.5
5、Random.character() // "E"
6、Random.string(count) // 随机一个字符串
7、Random.range(10) // [0,1,2,3,4,5,6,7,8,9]
8、Random.date() // "2005-09-28"
9、Random.time() // "00:43:01"
10、Random.datetime()
11、Random.now() // "2019-02-01 10:38:56"
12、Random.image('200x100', color, 'text') // 生成一个宽200高100的图片占位
13、Random.dataImage('200x100', 'Hello Mock.js!')
14、Random.color() // 生成一个颜色 "#f2a079"
15、Random.rgb() // "rgb(190, 121, 242)"
16、Random.rgba() // "rgba(121, 157, 242, 0.37)"
17、Random.paragraph() // 生成内容
18、Random.url()
19、Random.email() // email
20、Random.ip() // 随机ip
21、Random.province() // 随机省会名'黑龙江'
22、Random.city() // 随机城市名'哈尔滨'
23、Random.county() // 随机区名'南岗'
24、Random.capitalize('hello') // 首字母大写 'Hello'
25、Random.upper( str )、Random.lower( str ) // 转换大小写
26、Random.pick(['a', 'e', 'i', 'o', 'u']) // "u" 随机一个
27、Random.shuffle(['a', 'e', 'i', 'o', 'u']) // 洗牌 ["a","i","o","e","u"]
28、Random.id() // "320000200603050615"
29、Random.guid() // "CbdCfC92-9cb6-7ebb-1a7c-e28AbCD0fd04"
上面所有方法都可以写成@占位符的方式
data: {
boolean: Random.boolean()
}
data: {
boolean: '@boolean'
}
这两个都相同，具体参考 http://mockjs.com/examples.html#Array
四、语法
'name|rule': value
生成规则 有 7 种格式：
'name|min-max': 'abc' // min-max 生成一个字符串，重复次数大于min，小于max
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value
五、示例
1、属性值是字符串String
'name|min-max': 'ab' // 重复 'ab' 字符串，重复次数大于等于 min，小于等于 max。 { name: 'abababab'}
'name|count': 'ab' // 重复 'ab' 字符串，重复次数等于 count
2、属性值是数值Number
'name|+1': 100 // 初始值自动加1，返回101
'name|1-100': 100 // 生成一个大于等于 1、小于等于 100 的整数，属性值 100 只用来确定类型。
'name|1-100.1-10': 100 // 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 10 位。
3、属性值是布尔Boolean
'name|1': true // 返回true或false
'name|min-max': true // 随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。
4、属性值是对象Object
'name|min-max': { // 从属性值 {} 中随机选取 min 到 max 个属性。
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
}
'name|count': {} // 随机出对象中个数的对象属性
5、属性值是数组 Array
'name|1': [{}, {} ...] // 从属性值 [{}, {} ...] 中随机选取 1 个元素，作为最终值。
'name|min-max': [{}, {} ...] // 重复属性值 [{}, {} ...] 生成一个新数组，重复次数大于等于 min，小于等于 max。
'name|count': [{}, {} ...] // 重复属性值 [{}, {} ...] 生成一个新数组，重复次数为 count。
6、属性值是函数function
Mock.mock({
'foo': 'Syntax Demo',
'name': function() {
return this.foo
}
})
// 返回
{
"foo": "Syntax Demo",
"name": "Syntax Demo"
}
7、属性值为RegExp
Mock.mock({
'regexp': /[a-z][A-Z][0-9]/ // { "regexp": "sW7" }
})
8、Path 通过 @key来找到指定的值
Mock.mock({
"foo": "Hello",
"nested": {
"a": {
"b": {
"c": "Mock.js"
}
}
},
"absolutePath": "@/foo @/nested/a/b/c" // 这里输出 "absolutePath": "Hello Mock.js"
})
六、Vue框架中使用Mcok.js
mockData.js 定义mock接口和响应数据
import Mock from 'mockjs'
const Random = Mock.Random;
Mock.mock('/api/login', 'post', {
data: {
'username|1': Random.cfirst() + Random.clast(),
'toKen': Random.id()
},
message: 'ok',
status: '000000'
})
request.js 请求类
import axios from 'axios'
import {MessageBox, Notification, Loading} from 'element-ui'
// 创建axios实例
const request = axios.create({
baseURL: '/api', // api的base_url
timeout: 20000, // 请求超时时间 ms
})
// request 拦截器，在每个请求之前执行
request.interceptors.request.use(config => {
return config
}, error => {
console.error(error)
return Promise.reject(error)
})
// response 拦截器，在每个请求返回之后执行
request.interceptors.response.use(
response => {
const res = response.data;
return res;
},
error => {
Notification.error({
title: '错误',
message: error.message,
duration: 10000
})
return Promise.reject(error)
}
)
export default request
main.js
import mockData from '@/utils/mockData'
login.vue
request({
url: '/login',
method: 'post',
}).then(od => {
that.$notify.success({
title: '成功',
message: od.message
});
that.$router.push('/main')
})
Rap
阿里的产品和mockjs，来模拟真实数据
https://github.com/thx/RAP/wiki/user_manual_cn#%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE
Rap使用
一、注册和登录Rap
http://rapapi.org/
二、分为团队、业务线、项目
1、查找你所在的团队
2、进入你所在的团
3、创建业务
4、创建模块和使用
三、其它技巧
1、将一个接口的字段下所有字段copy到另一个接口
选择要copy的字段名，到另一个接口粘贴后在control+Enter，就将所有的内容全部copy过来
四、MOCK工具
1、使用参数的变量
请求字段
page
响应字段
pageResponse 字段 @mock=${page} // 这里最终pageResponse的显示就是Request中page的输入
或者写默认值 @mock=${page=100} // 如果请求不写page值默认为100
2、id自动加1
变量名 备注
id|+1 @mock=100 // 表示id从100开始，每次加1
3、其它写法
@mock=@DATE
@mock=true
@mock=function(){return 100 + Math.random()*100}
| http://mockjs.com/examples.html