静态页面调试方法介绍

很多时候前后端开发人员针对同一需求的开发进度不同,此时,前端人员就需要脱离后端接口依赖,各种调试技能就需要get了。

方法一:ajax请求改为静态数据赋值

  1. 情况分析:后端接口无,接口文档无,需求所针对的页面有老接口已存在;
    解决方法:去测试环境,找到该页面,找到老接口的请求数据,复制下来,在本地ajax中对data赋值,并对ajax请求暂时注释掉进行调试;
    $.ajax({                                 /*注释掉*/
         "type" : "POST",                    /*注释掉*/
         "url" : PATH + "/order/addressURL", /*注释掉*/
         "data" : params,                    /*注释掉*/    
         "dataType":"json",                  /*注释掉*/
         "success" : function (data) {  /*以上代码均需注释掉*/
            var data =   {"code":10000,"obj":{"a":"温仪"}};/*调试数据*/
            if(data.code == 10000){
               var test = function(){}
            }
        } /*以下两行也需注释掉方可调试*/ 
   });
  1. 情况分析:项目已上线,线上Bug,且与接口请求有关;
    解决方法:找到发请求的页面,获取该请求数据,复制数据到本地,同样进行上述操作。即可调试。
  2. 情况分析:有接口文档,但是接口仍未开发或者正在开发未完成阶段;
    解决方法:根据文档接口数据结构,自己造数据,但此过程效率是比较低的,不建议自己造数据,后期需要返工的工作量较多;

方法二:项目中配置测试文件,同一目录下调试接口

以feixia-f2e项目为例(用fis3构建工具)
步骤一、在fis-config.js中配置一下

fis.media('dev')
    //mock data
    .match('/test/(**)', {//调试数据的文件在test目录下
        release: '/test/$1',
        useCompile: false
    })
    //mock config file release dir
    .match('/test/server.conf', {//调试配置文件名:server.conf
        release: '/config/server.conf'
    })

步骤二、server.conf文件配置
rewrite ^\/payInfo$ /test/pay-confirmation.json
解释:payInfo为接口地址,pay-confirmation.json调试数据存储文件名
步骤三、ajax请求的地址需要临时改为上述地址。例如

$.ajax({
     "type" : "POST",               
     "url" : PATH + "/order/addressURL",/*注释掉,替换为下面行*/
     "url" : 本机IP地址和端口号 + "/payInfo",/*步骤二的接口地址*/
     "data" : params,                    
     "dataType":"json",                   
     "success" : function (data) {
        if(data.code == 10000){
           var test = function(){}
        }
    } 
    });

步骤四、pay-confirmation.json写入调试数据
{"code":10000,"obj":{"a":"温仪"}}
另外,当有复杂状态时,也能在文件中定义好各种状态下的data值,动态得到数据;只列出示例动态展示的基础代码(假设上段ajax中的params={a:mya;b:myb}的对象)

  module.exports = function (req, res, next) {
     var a = req.query.a; //读取params参数中对应的字段
     var b = req.query.b; //读取params参数中对应的字段
       var data = {
         "code": 10000,
         "msg": "success",
         "data": {}
        };
     if(a==1){//a的第一种取值
        mydata = {};//第一种情况
     }else if(a==2){//a的第二种取值
        if(b==1){
          mydata = {};//第二种情况
        }
     }
      data.data = mydata;
      res.json(data);
  };

这是我目前用到的静态调试方法,如果大家有好的方法,欢迎继续补充拓展下去