Mockjs,模拟数据生成器

(推荐应用)Mock.js是一款仿照数据生成器,目的在于救助前端攻城师独立于后端举办开发,帮助编写单元测试。

提供了以下模拟功效:

  1. Ajax,基于数据模板生成模拟数据。

  2. 依傍Ajax请求,生成并回到模拟数据。

  3. 基于 HTML 模板生成模拟数据。

PS:http://mockjs.com/

用处

在后端还没到位数据接口,前端只能写静态模拟数据的时候,Mockjs的用途:

  1. 避免手动编写静态模拟数据,由代码生成,添加和删除数据都更简短、安全。

2.
可以转移尽可能真实的数额,提供了IP、随机数、图片、地址、邮箱、名字等占位符,也支撑扩充自定义占位符。

3. 不需要修改既有代码,就能够阻止 Ajax 请求,再次来到模拟的响应数据。

在Node模块使用

// 安装
npm install mockjs

// 使用
var Mock = require('mockjs');
var data = Mock.mock({
    'list|1-10': [{
        'id|+1': 1
    }]
});
console.log(JSON.stringify(data, null, 4))

可以在Node模块里面。

在浏览器页面使用

相比常用的应该是在浏览器页面,用法也很粗略,如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MockJS-demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="mock.js"></script>
</head>
<body>
<script>
     //demo1
    var data = Mock.mock({
         'list|1-10': [{
             'id|+1': 1
         }]
     });
     console.log(JSON.stringify(data, null, 4))

     //demo2
     Mock.mock('http://g.cn', {
          'name'     : '@name',
          'age|1-100': 100,
          'color'    : '@color'
     });

     $.ajax({
          url: 'http://g.cn',
          dataType:'json'
     }).done(function(data, status, xhr){
          document.writeln(JSON.stringify(data, null, 4));
     });
</script>
</body>
</html>

 

总结

Mockjs最大职能是防止大家自己手写一大段模拟数据,可生成自由数据,裁减维护的工作量。

用法倒比较简单,看文档就领悟,文档地址:http://mockjs.com/0.1/

 

本文为原创小说,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

正文地址 :http://www.cnblogs.com/lovesong/p/5956312.html

相关文章