1在vue-cli搭建的項(xiàng)目?jī)?nèi)通過(guò)npm下載mockjs

   npm install mockjs --save-dev

在項(xiàng)目目錄下的package.json文件的devDependencies:查看mockjs是否下載并添加進(jìn)依賴(lài)。

"mockjs": "^1.0.1-beta3"

有上面這一項(xiàng)說(shuō)明下載并添加到了依賴(lài)

2、書(shū)寫(xiě)mockjs代碼

//mock.js
//引入mockjs模塊
const Mock = require('mockjs')
//定義幾個(gè)數(shù)組
var type = ["蘋(píng)果",'華為','三星','小米','索尼','諾基亞']
var neicun = ["16G",'32G','64G','128G','256G','521G']
var wangluo = ["聯(lián)通4G",'移動(dòng)4G','電信4G','移動(dòng)/聯(lián)通雙4G','全網(wǎng)通']
 Mock.mock('/mock/user', {      //'/mock/user'表示當(dāng)請(qǐng)求路徑為該路徑時(shí)會(huì)被攔截
       'one|20':[               //one為數(shù)組名稱(chēng),數(shù)組成員為對(duì)象，20表示生成20個(gè)對(duì)象，也就是數(shù)組成員
            {
                'type|1':type,      //type為屬性名，屬性值為type數(shù)組中隨機(jī)的1個(gè)
                'neicun|1':neicun,  //neicun為屬性名，屬性值為neicun數(shù)組中隨機(jī)的1個(gè)
                'wangluo|1':wangluo //wangluo為屬性名，屬性值為wangluo數(shù)組中隨機(jī)的1個(gè)
            }

       ]
    });

3、在需要使用mock數(shù)據(jù)的組件中引入mock.js文件

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

4、在該組件生命周期函數(shù)中發(fā)送ajax請(qǐng)求，請(qǐng)求地址與mock.js中攔截路徑一致

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

控制臺(tái)輸出：

image.png

可以看到，我們真正需要的數(shù)據(jù)在data中，也就是data.data,是一個(gè)數(shù)組

4、使用mock數(shù)據(jù)

data () {
    return {
      name:"",
      age:"",
      color:"",
      arr:[]
    }
  },
   created:function(){
    this.$http.get('/mock/user')
    .then(({data})=>{
      this.arr= data.one          //將mock數(shù)據(jù)中的數(shù)組賦值給該組件的arr數(shù)據(jù)
    })
  }

 <div v-for='(item,index) in arr' :key=index>
      <p>品牌-{{item.type}}</p>
      <p>內(nèi)存-{{item.neicun}}</p>
      <p>網(wǎng)絡(luò)-{{item.wangluo}}</p>  
</div>

瀏覽器效果：

image.png

5、數(shù)據(jù)模板DTD

上面的寫(xiě)法時(shí)mock語(yǔ)法規(guī)范中的一種，叫做數(shù)據(jù)模板，需要我們自己去定義屬性規(guī)則和屬性值
' name | rule':value
name：屬性名
rule： 屬性規(guī)則
value： 屬性值
一共有7種規(guī)則：
1、‘name|mix-max’:value
2、'name|count':value
3、'name|mix-max.dmix-dmax':value //整數(shù)部分大小范圍mix-max，小數(shù)部分個(gè)數(shù)
范圍dmix-dmax，大小隨機(jī)
4、'name|min-max.dcount':value //整數(shù)部分大小范圍mix-max，小數(shù)部分個(gè)數(shù)位
dcount，大小隨機(jī)
5、'name|count.dmin-dmax':value //整數(shù)部分為count,小數(shù)部分個(gè)數(shù)范圍dmin-dmax
6、'name|count.dcount':value //整數(shù)部分為count,小數(shù)部分個(gè)數(shù)為dcount,大小隨機(jī)
7、'name|+step':value //以value為初始值，每次+1

屬性值是String

var data = Mock.mock({
    'name1|1-3':'a',       //重復(fù)生成1到3個(gè)a   1-3表示最少重復(fù)1次，最多重復(fù)3次
    'name2|2':'b'            //生成bb                      2表示只重復(fù)兩次
})

屬性值是Number

var data = Mock.mock({
    'name1|+1':4,         //初始值為4，如果循環(huán)每次加1
    ‘name2|1-7':2,        //生成一個(gè)數(shù)字，1到7之間，默認(rèn)初始值為2
    'name3|1-4.5-8':1       //生成一個(gè)小數(shù)，整數(shù)部分1到4，小數(shù)部分5到8位
   'name3|1-4.5':1       //生成一個(gè)小數(shù)，整數(shù)部分1到4，小數(shù)部分5位隨機(jī)
    'name3|10.5-8':1        //生成一個(gè)小數(shù)，整數(shù)部分為10，小數(shù)部分5到8位
    'name3|3.5':1            //生成一個(gè)小數(shù)，整數(shù)部分為3，小數(shù)部分5位隨機(jī)
  
})

其實(shí)屬性值為Number時(shí)，value沒(méi)什么用

屬性值是Boolean

var data = Mock.mock({
    'name|1':true,          //生成一個(gè)布爾值，結(jié)果為true和false的概率
    'name1|1-3':true        //生成一個(gè)布爾值，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,      //隨機(jī)從obj中尋找1到3個(gè)屬性，組成新對(duì)象
    'name|2':obj         //隨機(jī)從onj中找到兩個(gè)屬性，組成新對(duì)象
})

屬性值是Array

var arr = [1,2,3];
var data = Mock.mock({
    'name1|1':arr,          //從數(shù)組里隨機(jī)取出1個(gè)值
    'name2|2':arr,          //數(shù)組重復(fù)count次，這里count為2
    'name3|1-3':arr,       //數(shù)組重復(fù)1到3次
})

屬性值是Function

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

屬性值為RegExp

根據(jù)正則表達(dá)式反向生成對(duì)應(yīng)的字符串，用于生成自定義格式的字符串

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

6、數(shù)據(jù)占位符DPD

參考鏈接：（https://segmentfault.com/a/1190000010211622）