前端

谈到mockJS的使用方法

2017-12-25  本文已影响26人  Bboy_2016

1,大概为什么用,是为了与后端大哥进行美好的分离;

2,具体如下;

    惯例:先放api出来,https://github.com/nuysoft/Mock/wiki/Syntax-Specification

    mockJS语法规范包括两部分。

1,数据模板定义规范DTD

1,mockJS定义的一些模板的方式。

大概规定由三部分构成。即('name|rule': value

    属性名

    生成规则

    属性值

let data = Mock.mock({

'list|1-10': [{

'id|+1': 1 (这个1是初始值)

}]

})

会随机生成什么???

list: [{id: 1}, {id: 2}, {id: 3}, {id: 4}]

我生成了一个 list的元素在1-10的范围内,每个元素都是一个对象,对象里面有一个属性id,值从初始值1开始,对应开始累加。

对于这些我有几点是要注意的。

1,属性名和规则是要用中竖线隔开,并且要用单引号包起来,

2,生成规则由7中,但是不同的数据类型是不同的

'name|min-max': value

'name|count': value

'name|min-max.dmin-dmax': value

'name|min-max.dcount': value

'name|count.dmin-dmax': value

'name|count.dcount': value

'name|+step': value

3,属性值中由占位符

4,属性值中可以指定(某些情况下的)初始值,譬如

'id|+1': 1

2,数据占位符定义规范DPD

1,自身关于一些常用名有定义,

即,我们可以拿到,一个人的名字的数据,他是一个随机的姓氏和名字,拼和而成。

2,有一些方法可以使用,

在Mock的对象中我们可以使用一些定义好的方法,这些方法,有些事基于不同的变量类型的,比如下面的natural,他是拿到一个最大值和最小值(做参数)去生成一个在范围内的数值,这也代表着,他是一个基于数值类型的方法。

3,支持自身的扩展的方式。

Mock.Random.extend()的方式。

Mock.Random.extend({

    constellation: function (date) {

        var constellations=['白羊座','金牛座','双子座','巨蟹座','狮子座','处女座','天秤座','天蝎座','射手座','摩羯座','水瓶座','双鱼座']

        console.log(this.pick(constellations))

        return this.pick(constellations)

    }

})

let data = Mock.mock({

    'list|1-10': [{

        'id|+1': 1

    }]

})

// 属性名 name

// 生成规则 rule

// 属性值 value

'name|rule': value

自己总结。

从功能上分,我个人是把他分为两种的

    1,是做模拟数据

    2,一些系统自定义的数据方式

例如:

中英文名字

铭牌

地址

数字

通过正则去匹配实现的各种数字字母字串等,各种。

2,自身进行扩展的方式

例如:黄道12宫,月份,乱七八糟的,可以自身去随意定义的一些列数据组

2,对后端接口拿到的数据进行修改,是完全按照自己 即Mock自身定义的规则来,下面展示一个例子

api是一个我们登录后首页拿到的数据的接口,在正常来说,我们拿到的data是一个用户未登录的情况,还有一个要说明的是,我通过'/api/'接口拿到的数据时在axios中过滤了一下,包括errcode都是我在axios这个这里设置的。axios是vue作者推荐在vue中使用的,简单方便。

我们对比下面了两个的图片,其中都具备一下结构,具体是这个结构,我就不太了解了,可能还牵扯到http的协议等,以后再议。

config

data

headers

request

status

statusText

但是在右边的图上我们清晰的看到,request的类型是MockXMLHttpRequest,能定为mock的方式。在右边的data中便是我定义的mock值,拿到的是一个列表,ok,接下来展示我的代码。

letdata=Mock.mock('/api/', {

'list|1-10': [

'@natural(1111,2222)'

]

})

代码截图1

this.$http.get('/api/').then((response) => {

  console.log(response)

}).catch()

代码截图2 正常返回值 mock截取返回值

总的来说,还是很好上手的,上面只是大概总结一些,mock的一些小秘密小彩蛋可以自己去源码里面发掘,这是一个优良的传统!!!

最后祝大家圣诞快乐。

                                                                                                                                                                                                                                                          12.25 圣诞夜                                                                                                                                          Eric

上一篇下一篇

猜你喜欢

热点阅读