mock.js

http://mockjs.com/

https://github.com/nuysoft/Mock/wiki

为了完成angularjs的karma测试,看到这个好东东,这货能拦截ajax然后返回模拟数据,在后端接口没完成的情况写,这不是很赞么?

转自: http://www.angularjs.cn/A0I4

概述

首先啦,我不认识mock.js的作者,带着需求找到mock.js让我觉得很惊艳。

相对于其他同类的框架的实现,mock.js超出了我的意料。

  1. 基于 数据模板 生成模拟数据。
  2. 基于 HTML模板 生成模拟数据。
  3. 拦截并模拟 ajax 请求。

是的,mock.js只做上述的几件事,但做的足够出色。

解决的问题

开发时,后端还没完成数据输出,前端只好写静态模拟数据。

数据太长了,将数据写在js文件里,完成后挨个改url。

某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。

想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据。

特殊的格式,例如IP,随机数,图片,地址,需要去收集。

超烂的破网速..

...

以上都不再是问题

接下来体验 拦截ajax请求并返回模拟数据。

步骤1 - 安装

安装太简单,跳过

步骤2 - 配置模拟数据

Mock.mock('http://g.cn', {
'name' : '@name()',
'age|1-100': 100,
'color' : '@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 ..

结尾

演示: mock-demo
演示: mock-angular-demo

mock.js的更多相关文章

  1. 使用 mock.js 让前端开发与后端独立

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. 前后端分离开发——模拟数据mock.js

    mock.js 生成模拟数据,拦截ajax请求 <script type="text/javascript" src="http://libs.baidu.com/ ...

  3. Mock.js:前后端分离开发工具

    概述 Mock.js实现的功能 基于 数据模板 生成数据 基于 HTML模板 生成数据 拦截并模拟 Ajax请求 用法 浏览器: <!-- (必选)加载 Mock --> <scri ...

  4. mockjax MOCK.js的拦截ajax请求

    今天看了下 mock.js的拦截请求 .https://github.com/nuysoft/Mock/blob/master/src/mockjax.js //覆盖(拦截) Ajax 请求,目前内置 ...

  5. Mock.js 与 fiddler 前端模拟数据与拦截请求

    最近 工作需要  接触了Mock.js. Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试.提供了以下模拟功能: 根据数据模板生成模拟数据 模拟 Ajax ...

  6. mock.js 使用教程

    mock.js 数据模板 #查看模板生成的数据 var data = Mock.mock({ //list|1-10 数组元素个数随机范围, id|+2 属性值递增, age|20-30数值随机范围 ...

  7. MOCK.JS 生成随机数据,拦截 Ajax 请求

    mock.js 的用处 前后端分离 :让前端攻城师独立于后端进行开发. 增加单元测试的真实性 :通过随机数据,模拟各种场景. 开发无侵入 :不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响 ...

  8. dva框架使用mock.js模拟数据 + fetch请求数据

    what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...

  9. 【mock.js】后端不来过夜半,闲敲mock落灯花 ——南宋·赵师秀

      mock的由来[假]   赵师秀:南宋时期的一位前端工程师 诗词背景:在一个梅雨纷纷的夜晚,正值产品上线的紧张时期,书童却带来消息:写后端的李秀才在几个时辰前就赶往临安度假去了,  赵师秀非常生气 ...

随机推荐

  1. 如何解决插入Oracle数据中文为乱码问题

    1.首先,Oracle查询编码:select * from v$nls_parameters;//看看是否GBK 2.如果是用Servlet或者别的,插入数据之前输出一下,看看是否乱码.比如: doP ...

  2. url中的特殊字符问题

    在 使用url进行参数传递时,经常会传递一些中文名(或含有特殊字符)的参数或URL地址,在后台处理时会发生转换错误.在有些传递页面使用GB2312, 而在接收页面使用UTF8,这样接收到的参数就可能会 ...

  3. Objective-C 源码初探 __attribute__

    #import <Foundation/Foundation.h> //延迟执行,delayFunc函数即为延迟执行的函数 #define onExit\ __strong void (^ ...

  4. [Noip2016]蚯蚓 D2 T2 队列

    [Noip2016]蚯蚓 D2 T2 Description 本题中,我们将用符号[c]表示对c向下取整,例如:[3.0」= [3.1」=[3.9」=3.蛐蛐国最近蚯蚓成灾了!隔壁跳 蚤国的跳蚤也拿蚯 ...

  5. 【第三课】WEBIX 入门自学-Hello World

    在看官网教程时,入门的例子就是dataTable这个空间.So,遵循官网,一起来看一下入门的DataTable组件: WEB使用时固然是先引入相应的库文件: 代码如下 <html> < ...

  6. 使用js_md5加密密码

    为什么在传输过程中要用md5对密码进行加密? 众所周知,我们在表单中的输入框输入了密码后,如果采用ajax的post或者get方式提交数据,在浏览器的newwork中就可以看到我们向后台传输的内容,其 ...

  7. 怎么将java web 项目导入idea 中

    1.将 java web 项目导 入idea 中, 显示 然后进行 Configure 配置. 2. 点击 open module settings. 3. 4. 选择jar包. 5. 6. 配置to ...

  8. h5 audio标签在手机上不能自动播放????

    最近在做一个微信端的项目,快到接近尾声的时候,发现还没放入音频,于是乎,放入音频,在电脑端测试一切正常,无阻碍. 后来在手机上测试,发现背景音乐不能播放,于是开始找错,刚开始以为是IIS服务器出错,结 ...

  9. slf4j的简单介绍

    SLF4J,Simple Logging Facade for JAVA,是一个十分简单的的日志facade,对于不同的日志框架做了一个封装. 对比common logging,Common logg ...

  10. [LintCode] Trailing Zeroes 末尾零的个数

    Write an algorithm which computes the number of trailing zeros in n factorial. Have you met this que ...