Mockjs，模拟数据生成器

最新推荐文章于 2024-03-29 09:49:14 发布

weixin_33813128

最新推荐文章于 2024-03-29 09:49:14 发布

阅读量166

点赞数

文章标签：后端 json 前端 ViewUI

原文链接：https://yq.aliyun.com/articles/567685

版权

（推荐使用）Mock.js是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。

提供了以下模拟功能：

1. 根据数据模板生成模拟数据。

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

分类: 6.前后端工具

本文转自海角在眼前博客园博客，原文链接： http://www.cnblogs.com/lovesong/p/5956312.html ，如需转载请自行联系原作者

weixin_33813128

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Mockjs，模拟数据生成器

（推荐使用）Mock.js是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：1. 根据数据模板生成模拟数据。2. 模拟Ajax请求，生成并返回模拟数据。3. 基于 HTML 模板生成模拟数据。PS：http://mockjs.com/用处在后端还没完成数据接口，前端只好写静态模拟数据的时候，...
复制链接

扫一扫