前后端分离开发项目中,前端往往很别动,很多交互需要用数据来操作,等后端完成接口的编写并保证联调顺利的情况下再去写交互,显然是很耽误时间的。这时就需要前端自己来模拟真实的数据。交互的特殊性不高,我们还可以在代码中直接写个data,如果交互的特殊性较多,就需要多条数据来完成了。
Mock就是一款用于前端模拟数据的工具,具体的使用方法Mock官网介绍的很详细。
模拟数据
Mock.mock(template)
Mock.mock(rurl,function(options))
Mock.mock(rurl,rtype,template)
Mock.mock(rurl,rtype,function(options))
- template表示数据模板,可以是{‘data|1-10’:[{}]}也可以是’@email’ (下面有一些常用的数据占位符 )
- rurl表示要拦截的地址,可以使普通的url如http://c.cn,也可以是url正则表达式/.json/
- rtype表示需要拦截的 Ajax 请求类型。例如 get、post、put、delete等
- funtion(options)表示用于生成响应数据的函数
代码:
输出:
常用数据占位符
//数据占位符使用
{
"integer": "@integer(10, 30)", //随机生成一个10~30之间的正整数
"float": "@float(60, 100, 2, 2)", //随机生成浮点数,参数分别为整数部分最小值和最大值、小数部分保留最小位数和最大位数
"boolean": "@boolean", //随机生成boolean
"string|1-2": "@string", //随机生成字符串
"name":"@cname", //随机生成名字
"date": "@date(yyyy-MM-dd)", //按照格式随机生成时间
"datetime": "@datetime", //随机生成时间
"now": "@now", //当前时间
"id": "@id", //随机生成一个 18 位身份证
"guid": "@guid", //随机生成一个 GUID
"url": "@url", //随机生成url字符串
"email": "@email", //随机生成邮箱
"image": "@image(200x200)", //随机生成一个大小为200x200的图片链接
"title": "@title", //随机生成一句标题,其中每个单词的首字母大写
"upper": "@upper(@title)", //把生随机成的标题全部转为大写
"cparagraph": "@cparagraph", //随机生成一段中文文本
"csentence": "@csentence", //随机生成一段中文文本
"range": "@range(2, 10)" , //返回一个内容从2开始到9的整型数组
"region": "@region", //随机生成地区 华中
"province": "@province", //随机生成省会 省
"city": "@city", //随机生成城市 市
"county": "@county", //随机生成一个(中国)县
}
其他
vue中的运用VUE项目中使用MOCK,总结的不错呢。