前后端分离开发，有时候前端页面很快就写出来了，需要接口数据来测试页面交互功能是否正常，但是后端接口还迟迟未出来，此时就可以使用mock模拟数据了。又或者有时候自己写个前端demo缺乏接口，这时也可以使用Mock来模拟接口数据。

1.npm安装mock插件

cd项目目录，执行：

npm install mockjs --save-dev

2.在项目的src目录下新建mock.js文件，并引入mockjs

import Mock from 'mockjs'

function getData(){
  let datalist= [];
  for (let i = 0; i < 100; i++) {
    datalist.push(i)
    }
  }
  return {
    data: datalist
  }
}
const data = Mock.mock('/testApi',getData)
export default {data};

Mock.mock()函数的第一个参数是被请求的url，第二个参数是后端要返回给前端的数据

模拟好假数据接口之后，我们还要在main.js中将接口导入

import mockdata from './mock'

3.测试使用

<button @click="getData">fasong</button>
methods:{
    getData(){
       this.axios.get('/testApi').then(function (res) {
        console.log(res)
      })
    }
  }

更多mock玩法详见mock官方文档，点击进入mock官网

mock数据模板玩法：

var arr=['aa','bb','cc'];
var obj={
   'name':'MountainC44',
   'old':'23',
   'sex':'man'
};
  
//数据模版简单举例
{
   'firstName|3':'xue',//重复fei这个字符串 3 次。
   'lastName|2-5':'yangbo',//重复yangbo这个字符串 2-5 次。
   'index|+1':0, //属性值自动加 1，初始值为 0
   'age|20-30':25,//生成一个大于等于 20、小于等于 30 的整数，属性值 25 只是用来确定类型
   'weight|100-120.2-5':110.24,//生成一个浮点数,整数部分大于等于 100、小于等于 120，小数部分保留 2 到 5 位。
   'likeMovie|1':Boolean,//随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
   'friend1|1':arr,//从数组 arr 中随机选取 1 个元素，作为最终值。
   'friend2|+1':arr,//从属性值 arr 中顺序选取 1 个元素，作为最终值
   'friend3|2-3':arr,//通过重复属性值 arr 生成一个新数组，重复次数大于等于 2，小于等于 3。
   'obj1|2':obj,//从属性值 obj 中随机选取 2 个属性
   'obj2|1-2':obj,//从属性值 obj 中随机选取 1 到 2 个属性。
   'regexp1':/^[a-z][A-Z][0-9]$/,//生成的符合正则表达式的字符串
}
  
//返回示例
{
   'firstName':'xuexuexue',
   'lastName':'yangboyangbo',
   'index':0, 
   'age':28,
   'weight':115.223,
   'likeMovie':Boolean,
   'friend1':'bb',
   'friend2':'aa',
   'friend3|2-3':['aa','bb','cc','aa','bb','cc'],
   'obj1':{'name':'MountainC44','old':'23',},
   'obj2':{'name':'MountainC44',},
   'regexp1':'sC2',
}

mock数据占位符玩法：

//数据占位符使用
{
  "string|1-2": "@string",     //随机生成字符串
  "integer": "@integer(10, 30)",  //随机生成一个10～30之间的正整数
  "float": "@float(60, 100, 2, 2)",  //随机生成浮点数，参数分别为整数部分最小值和最大值、小数部分保留最小位数和最大位数
  "boolean": "@boolean",       //随机生成boolean
  "date": "@date(yyyy-MM-dd)", //按照格式随机生成时间
  "datetime": "@datetime",     //随机生成时间
  "now": "@now",               //当前时间
  "url": "@url",               //随机生成url字符串
  "email": "@email",           //随机生成邮箱
  "region": "@region",         //随机生成地区
  "city": "@city",             //随机生成城市
  "province": "@province",     //随机生成省会
  "county": "@county",         //随机生成一个（中国）县
  "upper": "@upper(@title)",   //把生随机成的标题全部转为大写
  "guid": "@guid",             //随机生成一个 GUID
  "id": "@id",                 //随机生成一个 18 位身份证
  "image": "@image(200x200)",  //随机生成一个大小为200x200的图片链接
  "title": "@title",           //随机生成一句标题，其中每个单词的首字母大写
  "cparagraph": "@cparagraph", //随机生成一段中文文本
  "csentence": "@csentence",   //随机生成一段中文文本
  "range": "@range(2, 10)"     //返回一个内容从2开始到9的整型数组
}

//返回示例
{
  "string": "A0L^Z",
  "integer": 16,
  "float": 82.23,
  "boolean": true,
  "date": "1994-09-16",
  "datetime": "1994-10-22 02:30:32",
  "now": "2018-10-21 10:31:00",
  "url": "mailto://tfoyemmcy.as/ppm",
  "email": "f.lqdfggdy@wulqhmm.com",
  "region": "华南",
  "city": "茂名市",
  "province": "澳门特别行政区",
  "county": "和平区",
  "upper": "LGHV FJV FDHNA ZJQO MKQEPMY BYVPYMU JRUPL",
  "guid": "EdAD386E-eCB3-e054-fBd3-D4BCd58bF2Dd",
  "id": "630000201810081550",
  "image": "http://dummyimage.com/200x200",
  "title": "Powol Qhycsib Nvwf Bmiuvcek Ioisiu Sxdmrpdip",
  "cparagraph": "又平你大万被然红义她之影此属且。定圆光半条社已上实参规持备特战划。打第一在感革会属利小年往。认七单边济火国风风速次支比容争连劳。目叫织新百却又处思只名发这实。什济安这自空东认十需打现军应。",
  "csentence": "火事必该验导回声市然第别程确条状。",
  "range": [2,3,4,5,6,7,8,9]
}