当前位置: 首页 > 工具软件 > Easy Mock > 使用案例 >

如何使用EasyMock?

孔志强
2023-12-01

如何使用EasyMock?

在前后端分离的概念中,前端脱离与后端工作,在对好接口之后,以及后端没有假数据的情况下,可以先采用折衷的办法来请求假数据,这就有了Mock.js,可以随机生成数据,拦截ajax请求。Easy Mock 是一个可视化,并且能快速生成 模拟数据 的持久化服务。 忘掉下面这些实用但麻烦的 Mock 方式吧。在你用了 Easy Mock 之后,你肯定会爱不释手的。

话不多说,先来看一下Mock.js的语法,

1. 属性值是字符串 String

'name|min-max': string
通过重复 string 生成一个字符串,重复次数大于等于 min,小于等于 max。

'name|count': string
通过重复 string 生成一个字符串,重复次数等于 count。

2. 属性值是数字 Number

'name|+1': number
属性值自动加 1,初始值为 number。

'name|min-max': number
生成一个大于等于 min、小于等于 max 的整数,属性值 number 只是用来确定类型。

'name|min-max.dmin-dmax': number
生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留 dmin 到 dmax位。

Mock.mock({

    'number1|1-100.1-10': 1,

    'number2|123.1-10': 1,

    'number3|123.3': 1,

    'number4|123.10': 1.123

})

// =>

{

    "number1": 12.92,

    "number2": 123.51,

    "number3": 123.777,

    "number4": 123.1231091814

}

3. 属性值是布尔型 Boolean

'name|1': boolean
随机生成一个布尔值,值为 true 的概率是 1/2,值为false 的概率同样是 1/2。

'name|min-max': value
随机生成一个布尔值,值为 value 的概率是 min/ (min + max),值为 !value 的概率是 max / (min + max)。

4. 属性值是对象 Object

'name|count': object
从属性值 object 中随机选取 count 个属性。

'name|min-max': object
从属性值 object 中随机选取 min 到 max 个属性。

5. 属性值是数组 Array

'name|1': array
从属性值 array 中随机选取 1 个元素,作为最终值。

'name|+1': array
从属性值 array 中顺序选取 1 个元素,作为最终值。

'name|min-max': array
通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max。

'name|count': array
通过重复属性值 array 生成一个新数组,重复次数为 count。

6. 属性值是函数 Function

'name': function
执行函数 function,取其返回值作为最终的属性值,函数的上下文为属性 'name' 所在的对象。

7. 属性值是正则表达式 RegExp

'name': regexp

根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

Mock.mock({

   'regexp1': /[a-z][A-Z][0-9]/,

   'regexp2': /\w\W\s\S\d\D/,

   'regexp3': /\d{5,10}/

})

// =>

{

   "regexp1": "pJ7",

   "regexp2": "F)\fp1G",

   "regexp3": "561659409"

}

语法看起来比较枯燥,来看一个例子你就懂了。

如图,预览出来的话,数据就是

而在我们的实际项目中,可以对照接口,实现基本上所有数据。首先创建接口

然后编辑

如图,可以随机生成用户数据,方便,快捷

现在数据有了,如何请求这个接口呢?

复制这个地址

作为请求的url即可,如果你使用的是vue-cli构建项目的话,你可以在index.js文件中配置,

然后axios.get(‘/reading/a/u/user’).then()即可,

注意这里reading后面的地址是你自己定的

然后你就可以用渲染数据,实现自己相应的业务逻辑啦

更多讨论:

1:如果我想要获得的数据是手机号吗呢?

可以用正则,比如"phone": /^1[385][1-9]\d{8}/,就可以随机生成手机号码。灵活运用正则,可以让你的数据更真实。

2.    如何实现数据的增删改查?

可以借助响应式数据,玩出很多花样,我们可以在 数据编辑器 中,为某个属性指定一个 Function。在 Function 中,EasyMock提供了 _req 对象,这使得我们可以通过请求对象编写逻辑,实现响应式数据,如图所示。

当我们请求这个接口时,数据返回如下。如果我们传入的 name 为 nk,那么 name 将会随机变化。

删除数据

var arr=[

    {name:'fei',age:20,id:1},

    {name:'liang',age:30,id:2},

    {name:'jun',age:40,id:3},

    {name:'ming',age:50,id:4}

]

Mock.mock('http://www.bai.com','delete',function(options){

    var id =parseInt(options.body.split("=")[1])//获取删除的id

    var index;

    for(var i in arr){

        if(arr[i].id===id){//在数组arr里找到这个id

            index=i

            break;

        }

    }

    arr.splice(index,1)//把这个id对应的对象从数组里删除

    return arr;//返回这个数组,也就是返回处理后的假数据

})

这样就能实现数据的删除了,其他的也同理。更多的关于_req的内容,可以去官网的文档去看一下

3.手写数据也挺麻烦啊?

Easymock有一些语法提示,可以辅助编辑,如下

·       em.base

·       em.date

·       em.image

·       em.color

·       em.text

·       em.name

·       em.web

·       em.address

·       em.helper

·       em.miscellaneous

·       em.demo.all

大家感兴趣的可以自己去试一试

参考文献:

Easy Mock官方文档

Mock.js文档
————————————————
版权声明:本文为CSDN博主「bradmatt」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/bradmatt/article/details/80811072

 类似资料: