谈到mockJS的使用方法

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,200评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,526评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,321评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,601评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,446评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,345评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,753评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,405评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,712评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,743评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,529评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,369评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,770评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,026评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,301评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,732评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,927评论 2 336

推荐阅读更多精彩内容