使用mockjs_前后端分离实践—正确开启Mockjs的姿势

最新推荐文章于 2022-06-30 14:40:22 发布

weixin_39599654

最新推荐文章于 2022-06-30 14:40:22 发布

阅读量122

点赞数

文章标签：使用mockjs

本文链接：https://blog.csdn.net/weixin_39599654/article/details/111699850

版权

本文介绍了Mockjs的基本使用方法，包括生成中文姓名、英文名、数字、日期时间等各类数据，以及如何结合对象和数组进行更复杂的模拟数据创建。通过实例展示了Mockjs在开发中如何快速提供临时数据，满足测试和演示需求。

摘要由CSDN通过智能技术生成

Mockjs就是：造假数据。满足临时所需。

第一部分：直接使用

如果直接看GitHub或看一些文章，直接就是ajax拦截之类的。

但我们的需求就是，造一些假数据，满足使用即可，

如果基本需求都没满足，别的都没用，第二部分，来整没用的东西。

1.1 提前条件

1. 安装nodejs, 【可以自行查找具体安装方法】。

2. npm install mockjs

1.2 罗列基本法，尽量开箱即用

基本涵盖了常用的所有字段类型

// mock.jsconst Mock = require('mockjs')const Random = Mock.Random;const data = Mock.mock({ // 中文名字 | 姓 | 名 china_name: Random.cname(), china_first: Random.cfirst(), china_last: Random.clast(), // 英文名 | firatname | lastname | 带中间字的 eng_name: Random.name(), eng_first: Random.first(), eng_last: Random.last(), eng_last: Random.name(true), // 长度为4的字符串 string: Random.string(4), // 数字 最小1 最大100 age: Random.integer(1, 100), // 数字 浮点数 num: Random.float(1, 10, 1, 4), // 数字 字符串 numString: Random.character('number'), // 日期 YYYY-MM-DD date: Random.date(), // 时间 HH:mm:ss time: Random.time(), // 日期 时间 YYYY-MM-DD HH:mm:ss dateTime: Random.datetime(), // 当前日期 now: Random.now(), // 图片 image: Random.image('200x100', '#ffcc33', '#FFF', 'png', '文字'), // 颜色 hex rgb color: Random.color(), // 标题 title: Random.ctitle(), cword: Random.cword(), // 一段文本 1段-100段 cparagraph: Random.cparagraph(1, 2), // 英文 句子 sentence: Random.sentence(), // 区域 region: Random.region(), // 省 city zip couty 等 province: Random.province(), // ip 域名 网址 ip: Random.ip(), url: Random.url(), // 身份证 identify: Random.id(), // 全局自增ID id1: Random.increment(), id2: Random.increment(), id3: Random.increment(),})console.log(data);{ china_name: '韩桂英', china_first: '陈', china_last: '磊', eng_name: 'Thomas Johnson', eng_first: 'Karen', eng_last: 'Kenneth Donald Miller', string: 'm&gP', age: 84, num: 10.3, numString: '1', date: '2005-07-07', time: '14:45:30', dateTime: '1977-06-17 03:30:19', now: '2019-03-15 22:39:51', image: 'http://dummyimage.com/200x100/ffcc33/FFF.png&text=文字', color: '#8279f2', title: '南被复接装', cword: '还', cparagraph: '门油头做得飞作政什影美产术已我半。', sentence: 'Svowsinxy xbqtap fkh yblqteul orfenvlx iynptosx aggjg memsgtpknd xxdh futhhwbye mtnkfyolin vtht zcglztvjk iispwbshwj wnkdxfzg euetgctbn.', region: '西南', province: '贵州省', ip: '15.33.17.63', url: 'news://birulyvmr.bm/kmeqktu', identify: '340000197902270270', id1: 1, id2: 2, id3: 3 }

1.3 结合对象、数组的使用

Random.extend({ constellation: function() { const constellations = [ '白羊座', '金牛座', '双子座', ]; return this.pick(constellations); },});const objList = Mock.mock({ id: Random.integer(), titile: Random.ctitle(), email: Random.email(), // 数组随机生成 2-4 'list|2-4': [ { 'id|+1': 10, incrNum: () => Random.increment(), title: () => Random.ctitle(), date: () => Random.date('yyyy-MM-dd'), enum: () => Random.constellation(), }, ],});console.log(objList);

返回值

{ id: 6615749548973956, titile: '约布权', email: 'p.hbjd@wwoprnolz.ci', list:  [ { id: 10, incrNum: 1, title: '色需列流走只', date: '1981-09-06', enum: '巨蟹座' }, { id: 11, incrNum: 2, title: '型关立', date: '1997-11-18', enum: '射手座' }, { id: 12, incrNum: 3, title: '半我消空单高', date: '1997-02-12', enum: '摩羯座' }, { id: 13, incrNum: 4, title: '才节片化', date: '1993-06-30', enum: '白羊座' }  ] }