标签:name min max js 简单 array mock 属性
在开发过程中,有很多的ajax请求,前后端分离开发你肯定遇到这样的问题,后台给你的接口文档,你需要在本地模拟数据返回,可能你也用到过我之前用的蠢方法,就是新建一个test.json文件,放入接口文档中写的返回示例,这么做有个很大的问题是不够灵活,而且还需要切换url,现在学会使用mock.js拦截ajax请求,更加方便的构造你需要的假数据。
一.简单示例
在这里我举的例子是在vue项目中如何使用mock.js。
- 安装mockjs
npm install mockjs --save-dev
- 在项目中创建mock.js,并写一个简单的返回示例,后面拦截其他url的ajax请求直接参考这个示例。
2. 属性值是数字 Number
4. 属性值是对象 Object
5. 属性值是数组 Array
6. 属性值是函数 Function
7. 属性值是正则表达式 RegExp
-
main.js里面引入该文档
import './assets/js/mock'//此部分引入的是我们所编写的mockjs文档
-
xxx.vue文件中调用mock.js中模拟的数据接口,这时返回的response就是mock.js中用Mock.mock(‘url’,data)中设置的data了
-
二.拦截数据的方法Mock.mock()
这里我举例最常用的格式
Mock.mock(url,data);
url用正则写,这样get请求传参时,也能拦截数据了。 -
三.设置延时请求到数据
不设置延时很有可能遇到坑,这里需要留意,因为真实的请求是需要时间的,mock不设置延时则是马上拿到数据返回,这两个情况不同可能导致在接口联调时出现问题。所以最好要先设置延时请求到数据。
四.Mock.mock()方法中定义data返回的格式
生成规则和示例:
1. 属性值是字符串 String
-
'name|min-max': string
通过重复
string
生成一个字符串,重复次数大于等于min
,小于等于max
。 -
'name|count': string
通过重复
string
生成一个字符串,重复次数等于count
。 -
'name|+1': number
属性值自动加 1,初始值为
number
-
'name|min-max': number
生成一个大于等于
min
、小于等于max
的整数,属性值number
只是用来确定类型。 -
'name|min-max.dmin-dmax': number
生成一个浮点数,整数部分大于等于
min
、小于等于max
,小数部分保留dmin
到dmax
位。 -
3. 属性值是布尔型 Boolean
-
'name|1': boolean
随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。
-
'name|min-max': value
随机生成一个布尔值,值为
value
的概率是min / (min + max)
,值为!value
的概率是max / (min + max)
。
-
-
'name|count': object
从属性值
object
中随机选取count
个属性。 -
'name|min-max': object
从属性值
object
中随机选取min
到max
个属性。 -
'name|1': array
从属性值
array
中随机选取 1 个元素,作为最终值。 -
'name|+1': array
从属性值
array
中顺序选取 1 个元素,作为最终值。 -
'name|min-max': array
通过重复属性值
array
生成一个新数组,重复次数大于等于min
,小于等于max
。 -
'name|count': array
通过重复属性值
array
生成一个新数组,重复次数为count
。 -
'name': function
执行函数
function
,取其返回值作为最终的属性值,函数的上下文为属性'name'
所在的对象。 -
'name': regexp
根据正则表达式
regexp
反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
五.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 |
标签:name,min,max,js,简单,array,mock,属性 来源: https://blog.csdn.net/rdl111/article/details/123644300
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。