zoukankan      html  css  js  c++  java
  • Mock拦截请求URL返回模板数据

    背景 :
    前后端开发依赖后端数据, 当前端页面开发完成 ,后端在没有提供前端数据的情况下 ,前端无法测试,
    导致开发效率低 ,速度慢 ,为了解决这一问题 ,通过Mock模拟生成数据在不改变原有代码前提下拦截url返回数据。

    开始实验

    1、随机生成长度1~3的数组

    // array数组
    	var data = Mock.mock({
        	'list|1-3': [{// 属性 list 的值是一个数组,其中含有 1 到 10 个元素
            	'id|+1': 1, // 属性 id 是一个自增数,起始值为 1,每次增 1
            	'name|1':"吴小明",  //字符串
            	"city": {
    			    'number|1':"03443",
    			    'cityname|1':"北京"
    			  }
    	    }]
    	})
    

    2、拦截url 返回生成数据
    Mock.mock( rurl, template )
    记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。

    	Mock.mock( '/user_list', data )
    

    3、创建一个ajax请求

    	$.get('/user_list',function(response){
    	        console.log("result->"+response);
    	})
    

    4、输出结果

    result->{
        "list": [
            {
                "id": 1,
                "name": "吴小明",
                "city": {
                    "number": "03443",
                    "cityname": "北京"
                }
            },
            {
                "id": 2,
                "name": "吴小明",
                "city": {
                    "number": "03443",
                    "cityname": "北京"
                }
            }
        ]
    }
    

    其他格式

    // object对象
    	var data = Mock.mock({
      "city|2": {
        "310000": "上海市",
        "320000": "江苏省",
        "330000": "浙江省",
        "340000": "安徽省"
      }
    })
    

    结果 :

    result->{
        "city": {
            "310000": "上海市",
            "320000": "江苏省"
        }
    }
    
    // 生成多数组
    	var data = Mock.mock({
    		'code':0,
    		'result':{
    			'monthAmount|1-5': [{
    	        	'date': '2016-08',
    	        	'income|1000-100000':2289, 
    	        	'expend|1000-100000':2000
    		    }],
    		    'billList|1-10': [{
    	        	'id|+1': 1,
    	        	'amount|1000-500000':500000,  
    	        	'balance|1000-500000':500000,  
    	        	'type|1-2':1,
    	        	'sourceId|1-5':2,
    	        	'orderNumber':'45678900443432',
    	        	'mchName':'大王杂货店',
    	        	'date':"2017-09-14 16:58:52"
    		    }]
    		}
    	})
    

    结果 :

    result->{
        "code": 0,
        "result": {
            "monthAmount": [
                {
                    "date": "2016-08",
                    "income": 12645,
                    "expend": 56038
                },
                {
                    "date": "2016-08",
                    "income": 30689,
                    "expend": 46730
                }
            ],
            "billList": [
                {
                    "id": 1,
                    "amount": 191426,
                    "balance": 197800,
                    "type": 2,
                    "sourceId": 2,
                    "orderNumber": "45678900443432",
                    "mchName": "大王杂货店",
                    "date": "2017-09-14 16:58:52"
                },
                {
                    "id": 2,
                    "amount": 340886,
                    "balance": 432764,
                    "type": 1,
                    "sourceId": 2,
                    "orderNumber": "45678900443432",
                    "mchName": "大王杂货店",
                    "date": "2017-09-14 16:58:52"
                },
                {
                    "id": 3,
                    "amount": 361772,
                    "balance": 306595,
                    "type": 1,
                    "sourceId": 3,
                    "orderNumber": "45678900443432",
                    "mchName": "大王杂货店",
                    "date": "2017-09-14 16:58:52"
                },
                {
                    "id": 4,
                    "amount": 360725,
                    "balance": 35917,
                    "type": 1,
                    "sourceId": 3,
                    "orderNumber": "45678900443432",
                    "mchName": "大王杂货店",
                    "date": "2017-09-14 16:58:52"
                },
                {
                    "id": 5,
                    "amount": 182107,
                    "balance": 413671,
                    "type": 1,
                    "sourceId": 2,
                    "orderNumber": "45678900443432",
                    "mchName": "大王杂货店",
                    "date": "2017-09-14 16:58:52"
                },
                {
                    "id": 6,
                    "amount": 351296,
                    "balance": 42905,
                    "type": 1,
                    "sourceId": 4,
                    "orderNumber": "45678900443432",
                    "mchName": "大王杂货店",
                    "date": "2017-09-14 16:58:52"
                },
                {
                    "id": 7,
                    "amount": 457212,
                    "balance": 43885,
                    "type": 1,
                    "sourceId": 3,
                    "orderNumber": "45678900443432",
                    "mchName": "大王杂货店",
                    "date": "2017-09-14 16:58:52"
                }
            ]
        }
    }
    

    完整代码已提交到github ,使用的话可以直接从github上面下载运行
    https://github.com/fozero/front-awesome/tree/master/mockjs

    mock官方地址: http://mockjs.com/

    总结 :
    在前端开发中,学会使用一些工具,能极大的提高开发效率 , 减少重复劳动 ,意义重大。

    作者:fozero
    声明:原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/8083331.html
    标签:mock

  • 相关阅读:
    排序——选择排序和插入排序
    排序——排序的基本概念
    字符串类——KMP算法的应用
    字符串类——KMP子串查找算法
    字符串类——字符串类的创建(下)
    字符串类——字符串类的创建(上)
    数据结构库——链式队列的实现
    P4180 【模板】严格次小生成树[BJWC2010]
    P2511 [HAOI2008]木棍分割
    P2613 【模板】有理数取余
  • 原文地址:https://www.cnblogs.com/fozero/p/8083331.html
Copyright © 2011-2022 走看看