vue mock小记

关于mockjs

mockjs真的是一款数据生成神器，可以帮助我们生成一堆我们想要的数据。在前后端分离的工作模式下，前端的苦逼们再也无需等待后台大哥们的接口了。想要数据？自己mock一下就搞定。

用法

官网对于mockjs，只是简单介绍了一下它的安装方式，以及引入方式。对于实际在项目中的使用，则直接抛了几个demo，感觉让人很扫兴。
最近在一个vue项目中需要用到mock，在网上找了很多文章，感觉都非常专业的样子，然而看完还是一脸懵逼。。不能换个写个简单的，让人看得懂的说话么。。好吧，没办法，只能自己摸索，居然还成功了。。 这边做一个小记，防止自己忘记。。

安装

关于安装，mock这个已经写得很详细了。直接cd到你的项目中，运行npm install mockjs --save-dev 回车，然后balabla安装。。如果下载很慢，可以换成淘宝镜像源cnpm install mockjs --save-dev 这个来安装。

使用

1. 首先，在项目中新建一个文件，暂且称为mock.js,我这边是在src/plugins/新建的。你们可以随便新建在哪，建完之后确保你能找得到它。。
   
   • 然后，把一些配置写进刚刚新建的mock.js,它的api用法我这边就不写，想偷懒？那可不行，自己慢慢看文档去！我这边贴一下我的简单的配置。我这边生成的是一堆外卖数据

//引入mockjsimport Mock from 'mockjs';const data = Mock.mock({  // 属性 list 的值是一个数组，其中含有 1 到 10 个元素  'foods|10-50': [{    'name': "@ctitle(2,10)",    "img": "@image('600x600',#b7ef7c)",    "brief": "@csentence(1,50)",    "price|0-20.0-2": 1,    "num": 0,    "minusFlag": true,    "time": "@time",    "peisongfei|0-100.0-2": 1,    "limit|0-50": 1  }],  "sales|10-50": [{    // 属性 id 是一个自增数，起始值为 1，每次增 1    'name': "@ctitle(2,10)",    "img": "@image('600x600',#b7ef7c)",    "brief": "@csentence(1,50)",    "price|0-100.0-2": 1,    "num": 0,    "minusFlag": true,    "time": "@time",    "peisongfei|0-100.0-2": 1,    "limit|0-100": 1  }]});export default {  data}

1. 接下来，在你需要用到的mock数据的组件页面中，这样写

import mockdata from "@/plugins/mock";

这个路径是你刚刚新建mock.js这个文件的路径，文件后面的.js可以省去。
3. 引用数据，在你methods里面 直接引用刚刚的mockdata即可。例如:

new Promise((resolve, reject) => {    that.foods =mockdata.data.foods;  //直接点出你生成的假数据对象即可    that.foodsListLen = that.foods.length;     }).catch(err=>{      console.log(err)     })

1. 搞定，收工！

最后

本人菜鸟一枚，以上完全是自己摸索的结果，如果各位看官觉得写得不好，还请不吝赐教，感谢各位。。。