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. SQl 2005 For XMl 简单查询(Raw,Auto,Path模式)(1)

    很多人对Xpath可能比较熟悉,但不知道有没有直接操作过数据库,我们都知道 在Sql2005里公支持的几种查询有Raw,Auto模式,页并没有Path和Elements用法等,如果在2000里使用过 ...

  2. .net 开发---windows服务

    因为想把quartz.net自动run的程式挂到windows服务中去,遇到问题记录 1.创建windows服务后,利用C:\Windows\Microsoft.NET\Framework\v4.0. ...

  3. 编译原理-词法分析05-正则表达式到DFA-01

    编译原理-词法分析05-正则表达式到DFA 要经历 正则表达式 --> NFA --> DFA 的过程. 0. 术语 Thompson构造Thompson Construction 利用ε ...

  4. BZOJ1129 : [POI2008]Per

    枚举LCP,假设前$i-1$个都相同.那么后面$n-i$个数可以随意排列,第$i$个位置可以填的方案数为后面小于$a_i$的数字个数,树状数组维护. 同时为了保证本质不同,方案数需要除以每个数字的个数 ...

  5. Codeforces 721E Road to Home

    题意 输入第一行有4个数,分别为\(L,n,p,t\),分别表示总长度为\(L\)的路,中间有\(n\)个互不相交的区间,现在要用长度为\(p\)的小木棒从左往右铺路(木棒不能被折断,也不能有重叠,且 ...

  6. [Leetcode] Contains Duplicate III

    Given an array of integers, find out whether there are two distinct indices i and j in the array suc ...

  7. PHP多级联动的学习(一)

    我尝试在ThinkCMF中实现多级联动,首先我开始看了dede的联动类别管理前后台的代码以及他的数据库,经过非常多次的尝试,我渐渐有了一点想法,并给予实施. 首先写出前台的界面.如图. 然后在数据库中 ...

  8. React-Native需要css和布局-20160902

    import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, } from 'reac ...

  9. <input>和<textarea>

    作为一个刚刚涉足PHP开发的菜鸟,第一次使用博客.在这里分享一些经验给和需要的朋友,互相探讨.共同学习,希望对你有所帮助. 废话不多说,下面进入正题. 应该有朋友和我一样,需要用到文本框,要求它会自动 ...

  10. FastDateFormat

    1 public static final FastDateFormat ISO_DATE_FORMAT = FastDateFormat.getInstance("yyyy-MM-dd&q ...