2018-12-04 复盘 前后端分离 调试（掌医）

今天修改矩阵管理-群组顺序移动功能，改完后一直觉得后台接口需要修改却被瑶瑶告知后台没有问题。后来我自己打开后台进行调试，我们才发现有一段代码她修改了但没有提交，她本地测的都是对的，难怪HIS觉得前后台还是不要分离，掌医这个项目是前后台分离的，代码确实更清晰了，但却需要更多的人力物力成本，还有沟通上的一些问题，如果前后台都能看懂就不会存在这种小问题，要知道这可耽误了我一下午时间呢～
前端调试：
打开F12，通过debugger,console,和在js上打断点 三种方式，查看入参、出参等信息；
一般传参是一个接口，获取刷新为另一个接口，所以通过F12中Header-Request Payload可以查看传入接口的参数，这里接口返回的一般是标志符，表示接口调用是否成功；而获取刷新看页面展现所得数据时就要看获取刷新的Preview|Response，判断从接口返回的数据是否正确，这里入参一般很简单。
例如：

image.png

对这个群组进行排序，其中Group,group2, group3, group4分别对应不同的Sort值（Sort值由鼠标拖动后产生变化-这里是循环强行赋值的），前端传给接口的是升序，后台也按照升序进行排列，即能达到想要的效果

$scope.replaceGroups = function(newList) {
                var aryTemp = $.extend(true, [], newList);
                for (var index = 0; index < aryTemp.length; index++) {
                    delete aryTemp[index].Sort;
                    aryTemp[index].Sort = index;
                };
                var queryData = JSON.stringify({
                    'method': 'ChangeGroupSort', //更新群组排序
                    'params': [aryTemp]
                })
                microSiteManageService.ChangeGroupSort(queryData).then(function(res) {
                    toastr.success("交换成功");
                    $scope.getGroups();
                }, function(err) {
                    toastr.error("交换失败");
                    $scope.getGroups();
                });
            }

ps:只看前端不能跟踪数字，不能判断问题出在哪里，所以会前后端不分离确实是比较便利的。
后台调试
调试后台时把对应的信息填入Postman（充当前端面板，选择post方法，接口地址，入参，运行即可得到出参）。
后台调试步骤：

1. 打开VS2015 后台代码，打断点，运行；运行成功浏览器会加载新地址（如localhost:51519）

2. 在Postman中，选择post方法，输入后台运行时的接口地址（如：localhost:51519/api/portal/matrix?AppId=600001&requestTimestamp=1543932220578），入参，按send键，即可得到运行结果；若打断点，即可进入后台代码进行跟踪调试；

   
   
   

   Postman.png