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

  • 相关阅读:
    Hadoop面试
    Node.js面试题
    Node.js面试题
    [转载]最好的关系,是我懂你的不容易
    据说练就了一指禅神功的觅闻实时手机新闻网,正以每天2000+IP的用户量递增。有智能手机的可以当场进行体验,没有的就算了哈
    刚6瓶啤酒4两56度白酒下肚,居然20分钟做了一手机版网站 !
    Android:刚6瓶啤酒4两56度白酒下肚,居然20分钟做了一手机版网站 !
    IT人生的价值和意义 感觉真的有了
    (Android+IOS)正在做一个新闻App,做的差不多了,听听大家的建议 (图)
    (Android 即时通讯) [悬赏],无论是谁发现一个漏洞奖励人民币1000元!
  • 原文地址:https://www.cnblogs.com/xiyangbaixue/p/4064504.html
Copyright © 2011-2022 走看看