博主信息
Lon
博文
27
粉丝
0
评论
0
访问量
3027
积分:0
P豆:60

Mock.js 基本用法

2021年10月11日 18:15:56阅读数:172博客 / Lon/ JavaScript

Mock.js 使用教程

了解更多请访问http://mockjs.com/

一、为什么要使用Mock.js

对于前后端分离的项目,后端工程师的 API 数据迟迟没有上线,而前端工程师却没有 JSON 数据进行数据填充,自己写后端模拟又太繁重,这个时候,Mock.js 就能解决这个问题,让前端工程师更加独立做自己;

二、什么是Mock.js

  • 生成随机数据,拦截 Ajax 请求。
  • 通过随机数据,模拟各种场景;不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据;
  • 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等;
  • 支持支持扩展更多数据类型,支持自定义函数和正则。
  • 非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型。

三、开始&安装

安装方式,提供两种常用的,一种在 node 下运行,另一种在浏览器下运行;

1、使用npm安装(不了解的可以先学习一下node.js)

  1. npm install mockjs

应用

  1. // 引入 mockjs
  2. const Mock = require('mockjs')
  3. const data = Mock.mock({
  4. // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
  5. 'list|1-10': [{
  6. // 属性 id 是一个自增数,起始值为 1,每次增 1
  7. 'id|+1': 1
  8. }]
  9. })
  10. // 输出结果
  11. console.log(JSON.stringify(data, null, 4))

2、直接使用script标签引入

  1. <script src="http://mockjs.com/dist/mock.js"></script>

应用

  1. <script src="http://mockjs.com/dist/mock.js"></script>
  2. <script>
  3. const data = Mock.mock({
  4. 'list|1-10' : [{
  5. 'id|+1' : 1
  6. }]
  7. })
  8. console.log(data)
  9. console.log(JSON.stringify(data , null , 4))
  10. </script>

四、使用方式&语法规范

Mock.js 的语法规范包括两个部分:
1、数据模板定义规范
2、数据占位定义规范

1、数据模板定义规范

数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值

  1. // 属性名 name
  2. // 生成规则 rule
  3. // 属性值 value
  4. 'name|rule': value

注意:

  • 属性名生成规则 之间用竖线 | 分隔。
  • 生成规则 是可选的。
  • 生成规则 有 7 种格式:

其中,字符串、数值有 7 种生成规则,具体如表说明:

生成规则 说明 示例
min-max 生成 min ~ max之间的字符串 ‘list | 1-10’
count 生成count个字符串 ‘list | 5’
min-max.dmin-dmax 生成min ~ max之间的浮点数,小数点位数在dmin ~ dmax 之间 ‘id | 1-10.1-3 ‘ : 1
count.dcount 生成count个字符串小数点位数为dcount ‘id | 8.2 ‘ : 1
min-max.dcount //同上 ‘id | 1-10.5’
count.dmin-dmax //同上 ‘id | 5.1-10’
+step 每次进行累加 ‘id | +1’ : 1

除了以上几种规则格式,还有布尔值、对象和数组等规则:

生成规则 说明 示例
布尔值 生成布尔值,1/2概率为true ‘flag | 1’ : true
布尔值 min-max 生成布尔值,概率为min/(min + max) ‘flag | 1-10’ : true
对象count 从对象中随机抽取count个属性 ‘obj | 2’ : obj
对象min-max 从对象中随机抽取min - max个属性 ‘obj | 1-3’ : obj
数组1 获取一次数组 ‘arr | 2’ : arr
数组count 重复count次组成新数组 ‘arr | 2’ : arr
数组+1 累加 ‘arr | +1’ : arr
数组min-max 重复 min-max 次组成新数组 ‘arr | 1-2’ : arr

也支持函数和正则表达式:

生成规则 说明 示例
函数 支持函数 ‘fn | 1’ : function
正则 支持正则 ‘reg | 1’ : /[a-z]/

应用

  1. const Mock = require('mockjs')
  2. const obj = {
  3. name : 'Mr.Lon',
  4. age : 18,
  5. gender : '男'
  6. }
  7. const arr = ['a','b','c','d']
  8. const data = Mock.mock({
  9. 'list|1-10' : [{
  10. // 'id|+1' : 1
  11. // 'id|1-10' : 1
  12. // 'number1|1-10.1-3': 1,
  13. // 'flag|1' : true
  14. // 'obj|1-3' : obj
  15. // 'arr|1-2' : arr
  16. // 'fn' : function(){
  17. // return '这是一个函数';
  18. // }
  19. 'reg' : /[a-z]/
  20. }]
  21. })
  22. console.log(data);
  23. console.log(JSON.stringify(data,null,4))

2、数据占位符定义规范

  • 占位符只是在属性值字符串中占个位置,并不出现在最终的属性值中。
  • 通过 ‘@占位符’ 这种方式来随机产生各种不同的数据;

有两种方式可以输出这种随机占位符,具体如下:

  1. const Mock = require('mockjs')
  2. //第一种输入占位符的方式
  3. console.log(Mock.Random.cname());
  4. //第二种输入占位符的方式
  5. console.log(Mock.mock('@cname'));

注意:

  1. @ 来标识其后的字符串是 占位符
  2. 占位符 引用的是 Mock.Random 中的方法。
  3. 通过 Mock.Random.extend() 来扩展自定义占位符。
  4. 占位符 也可以引用 数据模板 中的属性。
  5. 占位符 会优先引用 数据模板 中的属性。
  6. 占位符 支持 相对路径绝对路径

Mock.Random 是一个工具类,用于生成各种随机数据。

Mock.Random 的方法在数据模板中称为『占位符』,书写格式为 @占位符(参数 [, 参数])

Mock.Random 提供的完整方法(占位符)如下:

Type Method
Basic boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image image, dataImage
Color color
Text paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name first, last, name, cfirst, clast, cname
Web url, domain, email, ip, tld
Address area, region
Helper capitalize, upper, lower, pick, shuffle
Miscellaneous guid, id

应用

  1. const Mock = require('mockjs')
  2. //随机中文人名,不带 c 就是英文
  3. console.log(Mock.mock('@cname'));
  4. //随机 ID
  5. console.log(Mock.mock('@id'));
  6. //随机中文标题,不带 c 就是英文
  7. console.log(Mock.mock('@ctitle'));
  8. //随机颜色,十六进制
  9. console.log(Mock.mock('@color'));
  10. //随机图片,给你一个图片地址
  11. console.log(Mock.mock('@image'));
  12. //随机 ip 地址
  13. console.log(Mock.mock('@ip'));
  14. //随机 url 地址
  15. console.log(Mock.mock('@url'));
  16. //随机字符串
  17. console.log(Mock.mock('@string'));
  18. //随机数值
  19. console.log(Mock.mock('@integer'));
  20. //随机日期
  21. console.log(Mock.mock('@datetime'));
  22. const data = Mock.mock({
  23. 'list|1-10' : [{
  24. cname : '@cname',
  25. city : '@city',
  26. full : '@cname -- @city'
  27. }]
  28. })
  29. console.log(data);
  30. console.log(JSON.stringify(data, null, 4));

扩展

如果没有我们想要的数据格式进行填充,可以使用扩展功能自己扩展

  1. const Mock = require('mockjs')
  2. // 自行拓展占位符
  3. Mock.Random.extend({
  4. game(){
  5. return this.pick([
  6. '英雄联盟',
  7. '穿越火线',
  8. 'QQ飞车',
  9. '生化危机',
  10. '寂静岭',
  11. '逃生'
  12. ])
  13. }
  14. })
  15. console.log(Mock.mock('@game'))

3、mock拦截 axios

这个也是最终的需求功能,我们假设 axios 异步请求的数据尚未上线或不全;

我们可以通过 mock 请求拦截,随机生成填充的数据进行前端设计;

  1. <script src="http://mockjs.com/dist/mock.js"></script>
  2. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  3. <script>
  4. //Mock拦截
  5. Mock.mock('https://jsonplaceholder.typicode.com/posts/1',{
  6. 'list|1-10' : [{
  7. 'userId|1' : 1,
  8. 'id|+1' : 1,
  9. 'title' : '@ctitle',
  10. 'body' : '@sentence'
  11. }]
  12. });
  13. // request请求 通用
  14. axios.request({
  15. method : 'get',
  16. url : 'https://jsonplaceholder.typicode.com/posts/1'
  17. }).then(res => console.log(res.data));
  18. </script>

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 这篇文章主要介绍了ES6 Generator使,结合实例形式分析了ES6 Generator功能、使与操作注意事项,需要的朋友可以参考下
    java中正则表达式的使:1、【Test01.java】使正则表达式使代码变得非常简洁;2、【TestMatcher01.java】Matcher类的使于字符串的验证。
    下面由golang教程栏目给大家介绍golang gorm操作mysql及gorm,希望对需要的朋友有所帮助!
    篇文章带大家一起了解一下Nodejs内置模块的。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
    ECMAScript描述了javascript的
    python总结:1、Python标识符;2、Python五个标准的数据类型;3、Python数据类型转换;4、Python运算符。
    文是介绍MySQL使的DDL及DML语句。
    使PHP要如何操作Redis?下面篇文章给大家分享一些PHP操作Redis的,例如redis连接、操作Strng、List、Hash、Set等等,希望对大家有所帮助。
    文介绍MySQL使之DCL语句和聚合函数。
    文为大家分享了一些php的相关知识,对于一些初学者非常有参考价值,希望能够帮助到大家。
    python计算统计值的方:1、计算平均值,代码为【s = s + num;return s/len(numbers)】;2、计算方差,代码为【sdev = sdev + (num - mean
    遗传算步骤是:1、初始化;2、个体评价;3、选择运算;4、交叉运算;5、变异运算,将变异算子作于群体;6、终止条件判断。
    MYSQL有哪些常SQL语句,不知道你是否知道,今天小编就带大家一起来复习常的sql语句,有需要的小伙伴可以参考参考。
    raptor允许使连接流程图符号来创建算,然后可以在其环境下直接调试和运行算,包括单步执行或连续执行的模式。
    文介绍通过PDO扩展与MySQL数据库交互实现使
    互联网上使通信协议是“TCP/IP”。“TCP/IP”即传输控制协议/网际协议,是指能够在多个不同网络间实现信息传输的协议簇,它是在网络的使中的最的通信协议。
    文中我们来研究怎样 TensorFlow.js 创建的 AI 模型,并使更复杂的模型实现一些有趣的功能。
    下面由composer教程栏目给大家介绍一张图搞清composer作以及原理,希望对需要的朋友有所帮助!
    ps的功能有:1、图像处理、编辑、通道、图层、路径综合运;2、图像色彩的校正;3、各种特效滤镜的使;4、特效字的制作。
    篇文章向大家介绍php础常代码示例,利 debug_backtrace 自定义个的日志打印函数,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。