前端模拟数据生成器

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

简介:


  

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>



相关文章
|
14天前
|
JSON 前端开发 JavaScript
前端上传文件前校验文件数据
该文介绍了如何在Vue项目中实现批量导入Excel数据的校验。使用Element UI的`el-upload`组件上传文件,通过FileReader读取内容,结合XLSX库解析Excel为JSON。解析过程包括将二进制数据转换为workbook对象,提取worksheet并转化为JSON。之后,遍历JSON数据进行字段校验,若发现空值则记录错误。提供的Demo展示了选择Excel文件后控制台显示校验结果。技术栈包括vue 2.6.14、element ui 2.15.14和xlsx 0.17.0。建议将此类功能封装为通用组件以复用。
21 2
前端上传文件前校验文件数据
|
2天前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点,通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互,全面解析从数据请求到响应的全过程。
|
1天前
|
JSON 前端开发 JavaScript
SSMP整合案例第五步 在前端页面上拿到service层调数据库里的数据后列表
SSMP整合案例第五步 在前端页面上拿到service层调数据库里的数据后列表
6 2
|
18天前
|
监控 前端开发 JavaScript
|
1月前
|
前端开发 关系型数据库 MySQL
SpringBoot-----从前端更新数据到MySql数据库
SpringBoot-----从前端更新数据到MySql数据库
32 1
|
1月前
|
前端开发 API 数据库
Django(五):如何在Django中通过API提供数据库数据给前端
Django(五):如何在Django中通过API提供数据库数据给前端
|
1月前
|
存储 缓存 前端开发
前端如何利用indexDB进行数据优化
使用IndexedDB作为浏览器内置的客户端数据库,用于存储大量数据和实现离线支持。它能缓存常用数据,减少服务器请求,提高用户体验。IndexedDB支持数据索引、复杂查询及版本管理,允许离线操作并同步到服务器。但需熟悉其异步API,可借助Dexie.js、localForage等库简化使用。
|
1月前
|
JSON JavaScript Java
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
85 0
|
1月前
|
前端开发 Java API
WebSocket vs SSE: 实时数据推送到前端的选择与实现(详细)
WebSocket vs SSE: 实时数据推送到前端的选择与实现(详细)
654 0
|
1月前
|
JavaScript 前端开发 开发者
深入理解前端框架Vue.js的数据响应式原理
本文将深入探讨Vue.js前端框架中的数据响应式原理,包括双向绑定、依赖追踪和虚拟DOM等核心概念。通过详细解析Vue.js内部实现机制,读者能够更好地理解其工作原理,并在实际开发中更灵活地运用。