静态页面调试方法介绍

很多时候前后端开发人员针对同一需求的开发进度不同，此时，前端人员就需要脱离后端接口依赖，各种调试技能就需要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);
  };

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