mockjs
程序
前端
访问后端接口
展示数据
后端
后端,负责出来业务逻辑
访问数据的数据,返回给前端
数据库
存储数据
情况
很多公司,后端还没有做好接口,写好接口文档
(前端就不需要等待后端实现接口再写代码)
前端可以通过mockjs 参考接口文档自己先摸拟数据
写业务代码,等待后端准备好,在用后端接口替换自己写模拟数据
实现前后端同时开发
mockjs
生成随机数据,拦截ajax
安装
| npm i mockjs -D
使用
| import Mock from 'mockjs'
| Mock.mock(url,data)
mock用法
mock(url,data)
mock(url,method,data)
mock(url,method,function(option){return data})
url:可以是正则,也可以是字符串
method:post,get,put,delete
option
url 请求地址
method请求方法
body 请求的参数
随机
数字
整数 'num|1-100'
小数点 "price|25-50.2-3":1
递增
字符串随机
文字 "score|1-5":"⭐"
中文标题
"title":"@ctitle(8,14)"
中文段落
"des":"@paragraph"
布尔值
"bol|1":true
数组
"friend|1":[1,2,3]
"friend|2":[1,2,3] (复制两份)
对象
"des|2":{}
随机从对象取两个属性
其他常用
"id|+1":1024,//(id值)
name: "@cname",//(名字)
"age|1-100": 1,//(年龄)
"price|25-50.2-5": 1,//(价格)
"score|1-5": "⭐",//(评价)
"title": "@ctitle(8,14)",
"description": "@cparagraph",
"isLog|1": true,
"friend|2-10": ["小红", "小蓝", "小绿"],
"des|2": { "eye": 1, "hand": 2, "job": "teacher" },
"tel": /1\d{10}/,//(正则)
"email": /[a-z]{2,6}@(126|163|qq)\.(com|cn|net)/,//(邮箱)
"canMerry": function () {
if (this.age > 22) {
return true;
} else {
return false;
}
},//(函数,此处的是用来判断年龄)
"day": "@date('yyyy'-MM-ddd)",//(年月日)
"time": "@time('HH:mm:ss')",//(时分秒)
"add": "@county(true)",//(地址)
"avatar":"@dataImage('200x100','图片')"//(图片)