神刀安全网

前端虚拟接口mockjs的使用

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

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

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


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

以我的项目为例:

打开我的项目目录,

前端虚拟接口mockjs的使用

项目目录

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

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

前端虚拟接口mockjs的使用

这样似儿的

敲入代码:

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的文档:mockjs文档,里面有详细的配置选项的数据的书写规范等等,有兴趣的可以进一步学习。

没有了~~

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 前端虚拟接口mockjs的使用

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址