前端模拟数据生成器

简介: 前端模拟数据生成器

简介:


  

Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能


  • 根据数据模板生成模拟数据
  • 模拟 Ajax 请求,生成并返回模拟数据
  • 基于 HTML 模板生成模拟数据


例子:


mock.js


1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html">
 5     </head>
 6     <body>
 7         <script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
 8         <script src="http://mockjs.com/dist/mock.js"></script>
 9         <script>
10             Mock.mock(/\.json/, 'get', function(options) {
11                 var url = options.url;
12                 var data = url.substring(url.indexOf('?')+1);
13                 return data;
14             });
15 
16 
17             Mock.mock(/\.json/, 'post', function(options) {
18                 return options.data;
19             });
20 
21 
22             $.ajax({
23                 url: 'mock.json',
24                 dataType: 'json',
25                 type: 'get',
26                 data: {
27                     test: 'test'
28                 }
29             })
30             .done(function (data, status, jqXHR) {
31                 $('<pre>').text(data)
32                     .appendTo('body');
33             });            
34         </script>
35     </body>
36 </html>


apitizer.js


1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html">
 5     </head>
 6     <body>
 7         <script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
 8         <script src="./apitizer-master/apitizer.min.js"></script>
 9         <script>
10         var schema = {
11             type : "object",
12             properties : {
13                 id : {
14                     type : "integer"
15                 },
16                 username : {
17                     type : "string"
18                 },
19                 password : {
20                     type : "string"
21                 }
22             }
23         }, userStore;
24 
25         apitizer.addSchema('user', schema);
26         userStore = apitizer.schemaStore('user', 0, {
27             id : apitizer.types.autoincrement()
28         })
29 
30         userStore.add({
31             username : 'retro',
32             password : {
33                 a: 'a',
34                 b: 'b'
35             }
36         });
37 
38         apitizer.fixture('POST /login', function(params){
39             var users = userStore.db(params) // Search the data in the store's database
40             if(users.count() === 0){
41                 throw {errors: ['Wrong credentials'], status: 401}
42             } else {
43                 return users.first();
44             }
45         });
46 
47         $.post('/login', {
48             username : 'asf',
49             password : 1338
50         }).then(function(data){
51             $('<pre>').text(JSON.stringify(data, null, 4))
52             .appendTo('body');
53         }, function(error){
54 
55         });
56 
57         
58         </script>
59     </body>
60 </html>



相关文章
|
27天前
|
存储 监控 安全
前端框架的数据驱动方式如何保证数据的安全性?
总之,前端框架的数据驱动方式需要综合运用多种手段来保证数据的安全性。从传输、存储、访问控制到防范攻击等各个方面进行全面考虑和实施,以确保用户数据的安全可靠。同时,不断加强安全管理和技术创新,以应对不断变化的安全挑战。
105 60
|
2月前
|
JSON 前端开发 Java
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端,包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
161 1
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
|
2月前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
2月前
|
JSON 分布式计算 前端开发
前端的全栈之路Meteor篇(七):轻量的NoSql分布式数据协议同步协议DDP深度剖析
本文深入探讨了DDP(Distributed Data Protocol)协议,这是一种在Meteor框架中广泛使用的发布/订阅协议,支持实时数据同步。文章详细介绍了DDP的主要特点、消息类型、协议流程及其在Meteor中的应用,包括实时数据同步、用户界面响应、分布式计算、多客户端协作和离线支持等。通过学习DDP,开发者可以构建响应迅速、适应性强的现代Web应用。
|
2月前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
62 4
|
2月前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
|
2月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
115 0
|
2月前
|
前端开发 Java 数据库
springBoot:template engine&自定义一个mvc&后端给前端传数据&增删改查 (三)
本文介绍了如何自定义一个 MVC 框架,包括后端向前端传递数据、前后端代理配置、实现增删改查功能以及分页查询。详细展示了代码示例,从配置文件到控制器、服务层和数据访问层的实现,帮助开发者快速理解和应用。
|
4月前
|
开发者 Java
JSF EL 表达式:乘技术潮流之风,筑简洁开发之梦,触动开发者心弦的强大语言
【8月更文挑战第31天】JavaServer Faces (JSF) 的表达式语言 (EL) 是一种强大的工具,允许开发者在 JSF 页面和后台 bean 间进行简洁高效的数据绑定。本文介绍了 JSF EL 的基本概念及使用技巧,包括访问 bean 属性和方法、数据绑定、内置对象使用、条件判断和循环等,并分享了最佳实践建议,帮助提升开发效率和代码质量。
56 0
|
4月前
|
前端开发 API 开发者
JSF与RESTful服务的完美邂逅:如何打造符合现代Web潮流的数据交互新体验
【8月更文挑战第31天】随着互联网技术的发展,RESTful架构风格因其实现简便与无状态特性而在Web服务构建中日益流行。本文探讨如何结合JavaServer Faces (JSF) 和 JAX-RS 构建RESTful API,展示从前端到后端分离的完整解决方案。通过定义资源类、配置 `web.xml` 文件以及使用依赖注入等步骤,演示了在JSF项目中实现RESTful服务的具体过程,为Java开发者提供了实用指南。
43 0
下一篇
DataWorks