前端虚拟接口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來源:简书著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
前端虚拟接口mockjs的使用的更多相关文章
- 循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>介绍了一个系统最初接触到的前端登录处理的实现,但往往对整个系统来说,一般会有很多业务对 ...
- Mock.js 虚拟接口 数据模拟
Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. 大概记录下使用过程, 详细使用可以参 ...
- Ajax请求接口加密研究(针对网页前端的接口安全加密机制研究)
通常我们在h5前端调用后台接口时,一般是ajax,那么接口的安全成了一个问题. 这里可以肯定的说,前端调用的接口一定要验证! 然后剖析了微信网页版.京东网页版这些,也都是通过接口的形势绑定数据,所以在 ...
- 前端调用接口得到的数据跟postman跑出来的数据里数字部份不相等
昨天碰到这样一个场景,调用后端接口返回的数据发现所有数据都是正常的,只有一个商品ID的最后两位是错的,每一个商品都是,导致无法进行商品的上下架和删除, 经过查资料发现: 浏览器解析数字的坑,一旦超出一 ...
- 前端调用接口报错看不到报错响应时 console.dir
console.dir() 可以看到很多.log看不到的属性和方法
- java解析前端请求接口的全部入参
第一种: public static String getRequestInput(HttpServletRequest request) { StringBuilder sb = new Strin ...
- 前端借助接口获取ip地址
<script language="javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js&q ...
- 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...
- 循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合
循序渐进VUE+Element 前端应用开发的系列文章中,前面介绍了系统各个功能的处理实现,本篇随笔从一个主线上介绍前后端开发的整合,让我们从ABP框架后端的查询接口的处理,前端API接口调用的封装, ...
随机推荐
- iOS开发之-- textview 光标起始位置偏移
使用textview的时候,会发生光标偏移的情况,其实是因为iOS7里导航栏,状态栏等有个边缘延伸的效果在. 把边缘延伸关掉就好了.代码如下 //取消iOS7的边缘延伸效果(例如导航栏,状态栏等等) ...
- 修改tomcat配置通过域名直接访问项目首页
1.在自己项目的web.xml中配置欢迎页面 <welcome-file-list> <welcome-file>index.html</welcome-file> ...
- Zabbix-3.0.3实现微信(WeChat)告警
导读 Zabbix可以通过多种方式把告警信息发送到指定人,常用的有邮件,短信报警方式,但是越来越多的企业开始使用zabbix结合微信作为主要的告警方式,这样可以及时有效的把告警信息推送到接收人,方便告 ...
- Mysql 知识点总结
1.创建数据库 mysqladmin 下面是一个简单的例子,创建名为 yiibai_tutorials1 的数据库. D:\software\mysql--winx64\bin> mysq ...
- chkcofnig-minimal-script
author :headsen chen date: 2018-06-04 12:02:27 #!/bin/bash for i in `chkconfig --list |awk '{print ...
- Android - ViewPager实现Gallery效果
RelativeLayout viewPagerContainer = (RelativeLayout) headerView.findViewById(R.id.content_pager_layo ...
- 160601、Websocet服务端实现
今天是六一儿童节,祝愿小朋友们节日快乐!大朋友们事事顺心! Websocet服务端实现 WebSocketConfig.Java ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...
- hibernate缓存,四种状态
FlushMode.AUTO:Hibernate判断对象属性有没有改变,是默认的清理模式 FlushMode.COMMIT:在事务结束之前清理Session的缓存,其他任何时候都不清理缓存 Flush ...
- Client IP Address Client Identification
HTTP The Definitive Guide Early web pioneers tried using the IP address of the client as a form of i ...
- container,algorith,iterate
\ http://morningspace.51.net/resource/stlintro/stlintro.html 标准容器 C++标准容器分为序列容器和关联容器,对于序列容器,C++提供的基本 ...