Mockjs,模拟数据生成器

简介:

(推荐使用)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   ,如需转载请自行联系原作者

相关文章
|
缓存 算法 安全
终极算法入门:Go语言实现经典链表操作
终极算法入门:Go语言实现经典链表操作
487 0
|
人工智能 开发者
解决HuggingFace模型下载难题:AI快站的高效加速服务
在AI研发领域,获取优质模型资源是关键。国内开发者常因海外服务器导致的下载困难而苦恼,尤其是大型模型下载更是耗时且充满挑战。AI快站(aifasthub.com)作为huggingface镜像网站,提供了高效的加速下载服务。它不仅解决了huggingface大模型下载的速度问题,还支持断点续传,保证下载连续性。此外,AI快站还提供全面及时更新的模型资源,是国内AI开发者的理想选择。
2034 0
|
安全 算法 Oracle
「隐语小课」Blazing Fast PSI 协议解读
「隐语小课」Blazing Fast PSI 协议解读
1445 0
|
测试技术 开发工具 git
利用Git Hooks自动化你的开发流程
Git Hooks 是 Git 的强大功能,允许在特定事件(如提交、推送、合并请求)发生时自动执行脚本。通过合理设置和使用 Git Hooks,可以自动化测试、代码风格检查等任务,提高代码质量和开发效率。本文介绍了如何设置和使用常用的 Git Hooks,包括 `pre-commit`、`pre-push` 和 `post-merge`,并提供了最佳实践建议。
|
11月前
|
存储 缓存 监控
ClickHouse 架构原理及核心特性详解
ClickHouse 是由 Yandex 开发的开源列式数据库,专为 OLAP 场景设计,支持高效的大数据分析。其核心特性包括列式存储、字段压缩、丰富的数据类型、向量化执行和分布式查询。ClickHouse 通过多种表引擎(如 MergeTree、ReplacingMergeTree、SummingMergeTree)优化了数据写入和查询性能,适用于电商数据分析、日志分析等场景。然而,它在事务处理、单条数据更新删除及内存占用方面存在不足。
3448 21
|
Kubernetes 应用服务中间件 nginx
基于容器化的Web服务器管理
【8月更文第28天】随着云原生技术的发展,容器化已经成为部署和管理应用程序的标准方式之一。Docker 和 Kubernetes 等工具提供了强大的容器管理和编排能力,使得开发者能够轻松地部署、扩展和维护 Web 服务器。本文将详细介绍如何使用 Docker 和 Kubernetes 实现 Web 服务器的容器化部署,并提供详细的步骤和代码示例。
512 1
|
12月前
|
网络架构
一文带你了解 Next Route 使用
一文带你了解 Next Route 使用
223 1
|
开发框架 Dart 开发者
Serverpod 适合全栈 Dart 开发吗?
Serverpod 是一款适用于全栈Dart开发的框架,尤其适合熟悉Dart的开发者。它提供了Docker部署、代码自动生成、数据库连接等功能,简化了前后端开发流程。通过Serverpod,可以创建单体服务架构,但处理复杂业务时可能需要借助其他语言的丰富生态。框架包括对postgres和redis的支持,以及可视化工具Insights。开发步骤涉及安装、创建项目、启动服务和配置文件。Serverpod还允许动态生成接口和数据库代码,简化CURD操作。虽然适合简单到中等复杂度的应用,对于更复杂需求,可能需要结合其他语言或服务。
225 1
Serverpod 适合全栈 Dart 开发吗?
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
513 0
基于kalman滤波的UAV三维轨迹跟踪算法matlab仿真
本文介绍了一种使用卡尔曼滤波(Kalman Filter)对无人飞行器(UAV)在三维空间中的运动轨迹进行预测和估计的方法。该方法通过状态预测和观测更新两个关键步骤,实时估计UAV的位置和速度,进而生成三维轨迹。在MATLAB 2022a环境下验证了算法的有效性(参见附图)。核心程序实现了状态估计和误差协方差矩阵的更新,并通过调整参数优化滤波效果。该算法有助于提高轨迹跟踪精度和稳定性,适用于多种应用场景,例如航拍和物流运输等领域。
973 12