Mockjs（1） 2018-09-22

1在vue-cli搭建的项目内通过npm下载mockjs

   npm install mockjs --save-dev

在项目目录下的package.json文件的devDependencies:查看mockjs是否下载并添加进依赖。

"mockjs": "^1.0.1-beta3"

有上面这一项说明下载并添加到了依赖

2、书写mockjs代码

//mock.js
//引入mockjs模块
const Mock = require('mockjs')
//定义几个数组
var type = ["苹果",'华为','三星','小米','索尼','诺基亚']
var neicun = ["16G",'32G','64G','128G','256G','521G']
var wangluo = ["联通4G",'移动4G','电信4G','移动/联通双4G','全网通']
 Mock.mock('/mock/user', {      //'/mock/user'表示当请求路径为该路径时会被拦截
       'one|20':[               //one为数组名称,数组成员为对象，20表示生成20个对象，也就是数组成员
            {
                'type|1':type,      //type为属性名，属性值为type数组中随机的1个
                'neicun|1':neicun,  //neicun为属性名，属性值为neicun数组中随机的1个
                'wangluo|1':wangluo //wangluo为属性名，属性值为wangluo数组中随机的1个
            }

       ]
    });

3、在需要使用mock数据的组件中引入mock.js文件

  require("../mockjs/mock.js")

4、在该组件生命周期函数中发送ajax请求，请求地址与mock.js中拦截路径一致

created:function(){
    this.$http.get('/mock/user')
    .then((data))=>{
      console.log(data)
    })
  }

控制台输出：

image.png

可以看到，我们真正需要的数据在data中，也就是data.data,是一个数组

4、使用mock数据

data () {
    return {
      name:"",
      age:"",
      color:"",
      arr:[]
    }
  },
   created:function(){
    this.$http.get('/mock/user')
    .then(({data})=>{
      this.arr= data.one          //将mock数据中的数组赋值给该组件的arr数据
    })
  }

 

      
品牌-{{item.type}}
      
内存-{{item.neicun}}
      
网络-{{item.wangluo}}
  

浏览器效果：

image.png

5、数据模板DTD

上面的写法时mock语法规范中的一种，叫做数据模板，需要我们自己去定义属性规则和属性值
' name | rule':value
name：属性名
rule： 属性规则
value： 属性值
一共有7种规则：
1、‘name|mix-max’:value
2、'name|count':value
3、'name|mix-max.dmix-dmax':value //整数部分大小范围mix-max，小数部分个数
范围dmix-dmax，大小随机
4、'name|min-max.dcount':value //整数部分大小范围mix-max，小数部分个数位
dcount，大小随机
5、'name|count.dmin-dmax':value //整数部分为count,小数部分个数范围dmin-dmax
6、'name|count.dcount':value //整数部分为count,小数部分个数为dcount,大小随机
7、'name|+step':value //以value为初始值，每次+1

属性值是String

var data = Mock.mock({
    'name1|1-3':'a',       //重复生成1到3个a   1-3表示最少重复1次，最多重复3次
    'name2|2':'b'            //生成bb                      2表示只重复两次
})

属性值是Number

var data = Mock.mock({
    'name1|+1':4,         //初始值为4，如果循环每次加1
    ‘name2|1-7':2,        //生成一个数字，1到7之间，默认初始值为2
    'name3|1-4.5-8':1       //生成一个小数，整数部分1到4，小数部分5到8位
   'name3|1-4.5':1       //生成一个小数，整数部分1到4，小数部分5位随机
    'name3|10.5-8':1        //生成一个小数，整数部分为10，小数部分5到8位
    'name3|3.5':1            //生成一个小数，整数部分为3，小数部分5位随机
  
})

其实属性值为Number时，value没什么用

属性值是Boolean

var data = Mock.mock({
    'name|1':true,          //生成一个布尔值，结果为true和false的概率
    'name1|1-3':true        //生成一个布尔值，1/4概率是true，3/4概率是false
})

属性值是Object

var obj = {
    a:1,
    b:2,
    c:3,
    d:4
}
var data = Mock.mock({
    'name|1-3':obj,      //随机从obj中寻找1到3个属性，组成新对象
    'name|2':obj         //随机从onj中找到两个属性，组成新对象
})

属性值是Array

var arr = [1,2,3];
var data = Mock.mock({
    'name1|1':arr,          //从数组里随机取出1个值
    'name2|2':arr,          //数组重复count次，这里count为2
    'name3|1-3':arr,       //数组重复1到3次
})

属性值是Function

var fun = function(x){
    return x+10;
}
var data = Mock.mock({
    'name':fun(10)         //返回函数的返回值20
})

属性值为RegExp

根据正则表达式反向生成对应的字符串，用于生成自定义格式的字符串

var data = Mock.mock({
    ‘name1':/[a-z][A-Z]/,    //例如aA、cZ、qW
    'name2':/\d{1,3}/          //例如1、23、56
})

6、数据占位符DPD

参考链接：（https://segmentfault.com/a/1190000010211622）