zoukankan      html  css  js  c++  java
  • 前端模拟数据生成器

    摘要:

      ​随着用户体验的重要性越来越高,目前前端和后台的解耦已经越来越明显了,这也加大了前后端的配合工作。在前端开发过程中可能我们需要一些后台返回的数据来完成交互效果,但是后台开发人员并没有完成后台功能,此时我们只能等,但是这样必然影响了开发进度,浪费了时间。有很多种解决方法,如果后端解决的话,那就是先定义接口,然后将假数据直接返回。如果在前端解决的话,前端搭建自己的服务,不依赖后端。作为前端工程师,今天我分享下另一种前端解决方案,mock服务。

    简介:

      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>

    PS:

        mock.js:http://mockjs.com/

        apitizer.js:https://github.com/retro/apitizer

  • 相关阅读:
    读取json中的中文乱码
    Qt新建一个对话框
    Qt窗口全屏
    Qt设置QWidget背景图片
    Qt加载本地图片
    junit5|软断言
    Classpath resource [/data/department/createDepartment.csv] does not exist
    有个用户反馈上传头像失败,分析原因?
    手机扫描二维码的测试用例(转载)
    一次完整的HTTP请求过程是怎么样的呢?【图文详解】(转载)
  • 原文地址:https://www.cnblogs.com/xiyangbaixue/p/4064504.html
Copyright © 2011-2022 走看看