mock.js

mock.js的使用

mock.js能拦截ajax请求,按照一定的规则生成随机数据,在不改变正常ajax请求代码和逻辑的情况下,返回一些数据用作渲染,在前后端分离的项目中尤其适用,

2018-06-21侠课岛    基础入门       

前端/前端必修/mock.js/easy-mock的使用 20     0     7029

相信有过前后端分离开发项目经验的童鞋,应该都有这种困扰,写好页面之后,需要用后端接口返回的数据来渲染页面,以及后续相关的js操作数据。而前后端往往是同时开发,接口还没开发好的时候,我们只能自己写静态数据,如果想要数据更接近真实数据,就要一个个手动去改,非常反人类~这时候我们就可以用上mock.js啦~
mock.js能拦截ajax请求,按照一定的规则生成随机数据,在不改变正常ajax请求代码和逻辑的情况下,返回一些数据用作渲染,在前后端分离的项目中尤其适用,因为我们只需要正常写好和接口相关的代码,不用等待后端真的返回数据,加快开发流程。另外等后端开发好接口之后,如果按照之前规定的数据结构返回,我们只需要去掉mock.js有关的代码,也不需要再做过多的修改,节省很多开发时间。

安装mock.js

如果大家是做的前后端分离的项目,那肯定已经有编译环境了,这里就不多介绍编译环境啦,所以这里我们默认你已经安装了node、npm、webpack哦,如果没有安装的可以新建一个目录,安装好以上三个。安装完成之后,打开命令行工具,进入项目文件夹,执行npm i mockjs,然后就安装好啦!如果安装比较慢,也可以尝试使用淘宝镜像cnpm

1.png

安装好之后,在页面里面进行引入let Mock = require('mockjs')。之后我们就可以按照moack.js的语法来生成数据啦~

mockjs语法介绍

mockjs的语法主要包括两个部分,数据模板语法和数据占位符。数据模板语法用来规定生成随机数据的类型和生成规则。数据占位符只是在属性值字符串中占个位置,并不出现在最终的属性值中。下面来分别介绍一下:

数据模板语法

数据模板语法总共由三个部分组成,属性名、生成规则、属性值。其中属性名和生成规则放在冒号前的字符串,以|号隔开。冒号后面是属性值,属性值可以是占位符,它也规定了生成值的数据类型。在mock.js里面一共有有七种生成规则:

  • 'name|min-max': value,如果value是字符串或者数组,会生成大于min小于max次数重复的字符串或数组;如果是数字,生成一个大于等于min、小于等于max的整数,value写入的数字只是用来确定类型;如果是布尔值,值为value的概率是min/(min + max),值为!value的概率是max/(min + max);如果属性值是对象,会从这个对象中随机抽取min到max个属性。文字表述可能比较绕口,直接看小例子吧:

// 使用 name|min-max': value
let data1 = Mock.mock({
    "num|0-100": 1,
    "str|2-5": 'happy',
    "arr|3-6": [1, 2, 3],
    "bool|30-70": true,
    "obj|1-2": {
        name: '大侠',
        age: 12,
        sex: 'male'
    }
})

2.png

  • 'name|count': value,这个规则和上面的差不多,只不过上面的是在一个范围里面选择一个数字。如果value是对象,就从对象里面随机抽取count个属性;如果是字符串,生成count次重复的字符串;如果是数组,就生成重复count次的数组,当count等于1的时候,则表示从数组中随机抽取一个值来返回;如果是布尔值,值只能为1,表示正负概率为各50%。

let data2 = Mock.mock({
    "str|6": 'hah',
    "arr|1": [1, 2, 3, 4],
    "arr|3": [1, 2, 3, 4],
    "bool|1": true,
    "obj|2": {
        name: '大侠',
        age: 12,
        sex: 'male'
    }
})

3.png

  • 'name|min-max.dmin-dmax': value 和 'name|count.dmin-dmax': value,这两个规则只适用于数字类型的数据,表示生成浮点数,小数点后面数字表示生成min到max位的浮点数。

let data3 = Mock.mock({
    'num1|1-100.5-10': 1.1,
    'num2|2.1-10': 1.1
})

4.png

  • 'name|min-max.dcount': value和'name|count.dcount': value,这两个规则也是适用于数字类型的数据,生成浮点数,具体看例子。需要注意的是,对于数字类型的规则来说,后面的Value值只是用于声明数据的类型,跟实际生成的数值没有关系的噢。另外,在声明规则的时候,小数点后面的规则不论是范围还是固定的数字,都表示小数点后的数字个数噢!

let data4 = Mock.mock({
    'num1|1-100.5': 1.1,
    'num2|3.5': 1.1
})

5.png

  • 'name|+step': value,如果value是数字,表示生成一个逐步递增的数字;如果是数组,按照索引值依次获取值。

let data5 = Mock.mock({
    'num1|+1': 5,
    'num2|+1': 1,
    'arr3|+1': [1,2,3,4],
    'arr4|+1': [1,2,3,4]
})

6.png

  • 'name': function,后面的value传的是函数,取其返回值作为最终的属性值,函数的上下文为属性'name'所在的对象。

let data6 = Mock.mock({
    'func': function(){
        return 'hahahahhaha';
    }
})

7.png

  • 用正则表达式设置属性值

'regexp1': /[a-z][A-Z][0-9]/,
'regexp2': /\w\W\s\S\d\D/,

8.png

数据占位符 - Mock.Random

Mock.Random方法是一个工具类,用于生成各种随机数据,比如说常见的邮箱、图片、颜色、网址等等。比起我们写静态数据一个个去找方便多了,非常实用的方法!他的写法是@占位符,下面是一些它自带的随机数据方法。

let data8 = Mock.mock({
    'email':'@email',
    'name':'@first @last',
    'cname':'@cfirst@clast',
    'color':'@color',
    'photograph':'@paragraph(20,30)',
    'cphotograph':'@cparagraph(50)',
    'address':'@province @city @county',
    'address2':'@county(true)'
})

9.png除了上面的那种方式的,也可以用Mock.Random.email()这种方式来调用。

数据占位符扩展 - Mock.extend创建自己的数据

除了Mock自带的数据格式之外,你也可以根据自己的需要创建自己的数据格式进行扩展。比如我们传统的十二生肖啦、星座啦等等~用法也很简单:

Mock.Random.extend({
    zodiac: function() {
        var zodiac = ['鼠','牛','虎','兔','龙','蛇','马','羊','猴','鸡','狗','猪']
        return this.pick(zodiac)
    }
});
let myZodiac = Mock.Random.zodiac();
// 牛

mockjs拦截ajax请求获取数据

上面说的都是如何生成数据,而mockjs真正发挥功能的地方其实是在于拦截ajax请求,这样才能保证我们不影响我们正常的前后端ajax交互逻辑的前提下,实现随机数据的获取。它的写法也是比较简单,定义好需要拦截的接口地址,获取接口的方法,以及我们生成的随机数据就好啦!

let mockData = {...}
Mock.mock('api/home', 'get', mockData);

mock.js实战-用随机数据渲染一个页面

介绍完了mockjs的一些基本语法,下面我们来实际操作一下,这里我用一个简单的页面做演示,用vuejs来渲染数据,有关于页面的结构和样式就不列出来了。
首先我们来看下项目结构,因为只有一个页面,所以结构比较简单,js和css样式就不单独用文件夹放了,此外在这个项目里面我们使用webpack编译环境。下面我们来看下项目结构。

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

20

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?