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

Posted Coder_fang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

     

  4. 根据功能创建其它测试模块,如testapi/moudlexxxmock.js:
    angular.module(\'mocktest\').run(function($httpBackend){
    
        var http=$httpBackend;
    
        //test
        http.whenPOST(new RegExp(APPURL+\'/service/user/add\')).respond(function(m,url,data){
    
            var ret = {"result":0,"message":""};
            return [200,ret];
        });
    });
    View Code

     

  5. 在index.html 打包区块中,引用所有的testapi目录下的js文件:
        <script src="testapi/mockinit.js"></script>
        <script src="testapi/moduleusermock.js"></script>
        <script src="testapi/modulexxxmock.js"></script>
    View Code

     

  6. 将此工程放入web容器中,运行未打包的程序,测试所有页面与返回数据的处理逻辑,此时已不需要后台web服务参与。
  7. 创建一个空的Mockjs,如gulpmock.js,代码如下:
    angular.module(\'mocktest\',[]);

     

  8. gulpfile中,在打包js时,不打包testapi中的js,而打包gulpmock.js,生成的app.min.js中已没有模拟的后台接口,直接使用后台服务接口。

结论:

  虽然不知此方法是否为违背mock的初衷,但确实在独立开发与独立测试中取得较好的效果,非AngularJS工程可参考 Mockjax

以上是关于WebUI实践之使用AngularJS 进行独立开发(模拟后台)的主要内容,如果未能解决你的问题,请参考以下文章

基础入门_Python-模块和包.深入Celery之应用配置/独立模块配置实践?

Django开发微信之接入

基于AngularJS的前端云组件最佳实践

SuperHakce 算法实践之快速排序

在 Angularjs 中通过 WebSocket STOMP

AngularJS之Route