mock.js-无需等待,让前端独立于后端进行开发
2016-02-17 18:41
821 查看
https://cnodejs.org/topic/53f718218f44dfa3511af923
相对于其他同类的框架的实现,mock.js超出了我的意料。
基于 数据模板 生成模拟数据。
基于 HTML模板 生成模拟数据。
拦截并模拟 ajax 请求。
是的,mock.js只做上述的几件事,但做的足够出色。
数据太长了,将数据写在js文件里,完成后挨个改url。
某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。
想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据。
特殊的格式,例如IP,随机数,图片,地址,需要去收集。
超烂的破网速…
…
概述
首先啦,我不认识mock.js的作者,带着需求找到mock.js让我觉得很惊艳。相对于其他同类的框架的实现,mock.js超出了我的意料。
基于 数据模板 生成模拟数据。
基于 HTML模板 生成模拟数据。
拦截并模拟 ajax 请求。
是的,mock.js只做上述的几件事,但做的足够出色。
解决的问题
开发时,后端还没完成数据输出,前端只好写静态模拟数据。数据太长了,将数据写在js文件里,完成后挨个改url。
某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。
想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据。
特殊的格式,例如IP,随机数,图片,地址,需要去收集。
超烂的破网速…
…
以上都不再是问题
接下来体验拦截ajax请求并返回模拟数据。
步骤1 - 安装
安装太简单,跳过步骤2 - 配置模拟数据
Mock.mock('http://g.cn', { 'name' : '[@name](/user/name)()', 'age|1-100': 100, 'color' : '[@color](/user/color)' });
步骤3 - 发送ajax请求(jquery版)
$.ajax({ url: 'http://g.cn', }).done(function(data, status, xhr){ console.log( JSON.stringify(data, null, 4) ) })
步骤4 - 查看响应的结果
// 结果1 { "name": "Elizabeth Hall", "age": 91, "color": "#0e64ea" } // 结果2 { "name": "Michael Taylor", "age": 61, "color": "#081086" } // 结果N ..
相关文章推荐
- 详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus
- 关于jquery跨域请求方法
- jquery取不到cookie中的值(本地有cookie但就是无法取到对应的值)
- JavaScript优化基本篇
- React Native学习小结
- javascrip jquery 学习随笔
- javascript正则表达式---1
- leetcode 237. Delete Node in a Linked List
- jQuery.on() 函数详解
- nodejs模块发布及命令行程序开发
- 使用JavaScript实现下拉菜单的效果
- Sublime Text3 破解版下载 以及开发React native 插件安装
- jQuery 获取不到 kindeditor 内容 的解决方法
- JSP属性范围
- JavaScript多物体运动三
- JavaScript多物体运动二
- 第 4 章 导航条菜单的制作
- 第 3 章 网页简单布局之结构与表现原则
- 第 2 章 网页布局基础
- 第 1 章 如何用 CSS 进行网页布局