使用angularjs1.x构建前台开发框架（四）——模拟后台响应（打桩模块）

为什么要模拟后台响应（打桩模块）：在web应用开发中，往往会有前台需要调用后台接口获取数据进行页面调试但后台接口未开发完成的情况，因为架构师在分解需求的时候前后台需求是一起给出的，开发也是并行的，那么在后台没有ready的时候，前台只能干等吗？当然不是。架构师在完成需求分解的时候通常需要交付一个非常重要的文档——接口文档，而本章介绍的模拟后台响应（打桩模块）正是基于后台未开发完成但已经有完备接口文档的情况下帮助前台开发人员完成独立调试的一个功能模块（当然，这个功能模块也属于开发框架的一部分）。

在介绍模拟后台响应（打桩模块）之前，先来看一下如何在开发框架中发起http请求（通常请求在业务模块中会比较多，所以这个请求笔者放在c2这个自路由对应的业务模块中）。

首先在c2.html中构造发起请求的按钮（第3行）：

request
 

/*** Created by 李庆 on 2016/10/6.*/
 define(["jquery"],function($){var c2Controller = function($scope){$scope.test = function(){console.log("enter controller");};$scope.getData = function(){$.ajax({"type":"GET","contentType":"application/json;charset=UTF-8","url":"mock/test.json","success":function(data){console.log(JSON.stringify(data));},"error":function(data){console.log("error");}});}};return c2Controller;
 });

然后我们来看一下这个test.json包含的信息：

{"name":"liqing"
 }

最后我们来看一下运行效果：

可以看到当我们点击request按钮时，控制台打印了我们请求的资源，也就是对应test.json的内容。至此，一个完整的http请求过程就完成了。

下面先简单介绍一下打桩模块的功能：打桩通常用于写测试用例的时候，依赖的接口或资源无法直接直接调用获取（比如在规模较大的应用中，为了验证一个函数，就得把整个应用都跑起来，不仅资源浪费严重，效率也非常低），在不影响测试的基础上，测试人员会模拟依赖的外部接口或资源，当调用依赖的接口或资源时，不会真的调用依赖的接口或资源，而是获取之前模拟的数据，这个模拟数据的行为称为打桩，而在笔者的开发框架中，打桩模块的功能也是类似的，也是由于后台接口未开发完成导致无法联调，因此发起http请求时不直接向后台接口请求，而是由打桩模块代答，当然，我们必须在打桩模块中事前构造号好代答数据。

在框架中的打桩过程：所有需要打桩的请求url都需要由过滤模块过滤，过滤模块决定请求是否需要打桩，如需要，则返回桩数据url，如不需要，则反正真实的后台接口url。

下面来看一下代码，首先是新增的http请求过滤模块httpService.js，这个模块定义了所有桩数据的路径以及决定请求是向后台请求还是桩数据请求：

/*** Created by 李庆 on 2016/10/23.*/
 define([],function(){var mock = true;//打桩标识，false表示不打桩，true表示打桩var httpService = new Object();/***** httpService.data包含所有需要打桩的请求*/httpService.data = [{"type":"GET",//请求类型"url":"/nova/test.json",//请求url"mockUrl":"mock/test.json"//打桩url}];httpService.getUrl = function(type,url){if(mock){for(var i=0;i

/*** Created by 李庆 on 2016/10/6.*/
 define(["jquery","../../../framework/service/httpService"],function($,httpService){var c2Controller = function($scope){$scope.test = function(){console.log("enter controller");};$scope.getData = function(){$.ajax({"type":"GET","contentType":"application/json;charset=UTF-8",//修改前为"url":"mock/test.json","url":httpService.getUrl("GET","/nova/test.json"),"success":function(data){console.log(JSON.stringify(data));},"error":function(data){console.log("error");}});}};return c2Controller;
 });