前端虚拟接口mockjs的使用

最近在学习VueJS，也进一步学习了ES6，看了一遍之后，难免手痒，所以想仿写点什么，但是数据是个问题，你总不能写个分页，写个轮播吧，但是在公司做自己的东西找后台要接口也不那么像回事，怎么办呢？

无意间看到了mockjs，一个模仿接口的小东西。

于是把mockjs 和 VueJS结合了一下，先几个笔记，以备后用。

---

首先是准备工作，你需要会VueJS，Vue-resource，vue-cli，然后就是下载mockjs

以我的项目为例：

打开我的项目目录，

项目目录

在项目目录下按住shift并点击鼠标右键，找到在此打开命令行工具，然后输入指令：npm i mockjs --save-dev，如果你有cnpm就用cnpm安装，没啥区别。

之后再src文件夹里，新建一个util作为工具文件夹（就是你平常复用用的一些东西），然后新建一个文件mock.js如下图：

这样似儿的

敲入代码：

import Mock from 'mockjs';

export default Mock.mock('http://g.cn', {

'name'    : '@name',

'age|1-100': 100,

'color'    : '@color'

});

import 和 export 是ES6的模块化，自己去看，不做解释。

Mock.mock 是 Mock的方法，第一个参数是你自定义的url（也就是接口），后面的对象是你自定义配置的数据，就这样每一个最简单的例子写好了，配置选项的数据该怎么写，请看：mockjs文档

接下来在vue文件中随便一个文件，引入util文件夹下的mock.js即可，如下：

import data from './util/mock';

然后就可以利用vue-resource来读取这个借口啦，如下：

Vue.http.get("http://g.cn").then(

(successData) => {console.log(successData.body);},

(fileData) => {console.log(fileData);}

);

然后打开控制台的console，就可以看到咱们自定义的数据啦，如下：

获取的数据

最简单的流程就是这样的，当然，这只是我的写法，你也可以有自己的想法。只要达到咱们的目的就可以啦。

最后，在附上mockjs的文档：mockjs文档，里面有详细的配置选项的数据的书写规范等等，有兴趣的可以进一步学习。

作者：大西瓜叔叔链接：http://www.jianshu.com/p/27b2767b4193來源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。