WebUI实践之使用AngularJS 进行独立开发(模拟后台)

条件与目标：

1. 前端使用AngularJS，接口服务均使用$http访问。
2. 与后台协商好接口，完全独立并行开发，不用等待后台开发完接口才能进行页面测试。
3. 需要gulp打包系统参与，即打包之前可以模拟后台接口测试，而打包之后则为Release版本，需要真实后台服务参与。
4. 虽不能包括所有情况，但大部分基于数据的场景都可实用。

 

实践方法:

1. 在index.html中创建gulp打包区块，以<!--build:js js/app.min.js-->开始，以<!--/build-->结束。
2. 在index.html中引用angular-mocks.js(模拟http数据返回插件)。
3. 创建testapi/mockinit.js(用于初始化数据模拟框架),代码如下:

   angular.module('mocktest',['ngMockE2E']).run(function($httpBackend){    
       var http=$httpBackend;
       //pass    
   
       http.whenGET(/ *.html/).passThrough();
       http.whenGET(/ *.js/).passThrough();
       http.whenGET(/ *.css/).passThrough();
       http.whenGET(/ *.jpg/).passThrough();
   
   
       //testlogin
       http.whenPOST(APPURL+'/service/user/login').respond(function(m,url,data){
   
           var param = angular.fromJson(data);
   
           var ret = {"result":-1,"message":"测试密码错误"};    
           }
           return [200,ret];
       });
   
   
   });

   View Code