项目开发过程中,经常需要用到临时数据(假数据),有时候会利用一些json文件来模拟数据,但是用json文件时会有一个问题,线上和线下必须来回切换api,比较繁琐,这种情况下可以直接使用Mockjs,用koa写后台,模拟接口。
1、Mockjs安装
npm install mockjs
2、Mockjs单元文件
import Mock from 'mockjs';
const Random = Mock.Random;
export default class MockUserlistController {
static async getMockUserlist (ctx, next) {
ctx.state = 200;
ctx.body = {
code: '000000',
message: 'success',
data: Mock.mock({
// 属性 list 的值是一个数组,其中含有 1 到 10 个元素
'list|10': [{
// 属性 id 是一个自增数,起始值为 1,每次增 1
'id': '@id',
'name': '@cname',
"date": "@date()",//随机生成日期
'Address': '@county(true)', // 生成省 市 县组成的地址
'Email': '@email',//生成邮箱
"avatar": "@image('200x200','red','#fff','avatar')",//生成图片
// "mark": Random.cparagraph(0, 5),
"description": "@cparagraph()",//描述中文
//描述英文
// "description": "@paragraph()"
}],
'total': Random.integer(70, 100)
})
};
}
}
3、Mockjs常规语法
{
// 随机生成布尔类型
'Boolean': '@boolean',
// 随机生成1到100之间自然数
'Natural': '@natural(1, 100)',
// 生成1到100之间的整数
'Integer': '@integer(1, 100)',
// 生成0到100之间的浮点数,小数点后尾数为0到5位
'Float': '@float(0, 100, 0, 5)',
// 在aeiou中,生成随机字符,不传参表示生成随机字符
'Character': '@character("aeiou")',
// 生成2到10个字符之间的字符串
'String': '@string( 2, 10)',
// 生成一个数组,数组元素从0开始到10结束,间隔为2
'Range': '@range(0, 10, 2)',
// 生成一个随机日期,可加参数定义日期格式,默认yyyy-mm-dd
'Date': '@date("yyyy yy y MM M dd d")',
// 生成一个颜色16进制随机值
'Color1': '@color',
//生成一个颜色rgb随机值
'Color2': '@rgb',
//生成2至5个句子的文本
'Paragraph':'@paragraph(2, 5)',
//生成3至5个单词组成的一个句子
'Sentence':'@sentence(3, 5)',
//生成3-5个字母组成的单词
'World':'@word(3, 5)',
//生成3-5个单词组成的标题
'title':'@title(3,5)',
//生成2至5个句子的中文文本
'cParagraph':'@cparagraph(2, 5)',
//生成3至5个词语组成的一个中文句子
'cSentence':'@csentence(3, 5)',
//生成3-5个字组成的中文词语
'cWorld':'@cword(3, 5)',
//生成3-5个词语组成的中文标题
'ctitle':'@ctitle(3,5)',
// 生成姓名
'Name': '@name',
// 生成中文姓名
'cName': '@cname',
// 生成url地址
'Url': '@url',
//生成邮箱
'Email':'@email',
// 生成省 市 县组成的地址
'Address': '@county(true)',
//生成Guid值
'Guid':'@guid()'
}
参考文档:
Mockjs官网:https://github.com/nuysoft/Mock/wiki/Getting-Started
Mockjs快速入门:https://juejin.im/post/5cf726b5e51d454fbf5409bc
只是自己的随笔总结,不喜勿喷,谢谢。