全新 WebApi 接口測試方法

1、在.NET中，測試API會是我們比較頭疼的一個問題，因爲在測試的過程中會遇到各種粘貼複製，有時候還會把傳值的參數給弄錯了，有時候請求也會遇到問題，比如會出現請求的URL地址出現錯誤，但是錯誤了之後有時候某些值不需要變，但是請求錯了也許會把以前的值一起請求，接下來給大家介紹一種本人寫的測試接口API的方法：個人覺得比較好用，本文用的技術是asp.net mvc。

//首先引用jQuery文件
<script src="~/Content/js/jquery-1.9.1.min.js"></script>

//對應的html文件
<div>
        <label>請輸入XML地址</label>
        <textarea rows="5" cols="15" style="width: 300px; height: 200px;" οnkeyup="BindKeyUp(this.value)"></textarea>

        <p>
            <label>根據搜索記錄查詢：</label>
            <input type="text" id="blend" οnkeyup="MothedSel(this.value)" placeholder="請輸入要搜索的方法" />
            <label class="ts"></label>
        </p>
        <div class="allValue">
            <div id="Title"></div>
            <p>
                <label>URL地址：</label>
                <input type="text" id="Geturl" placeholder="請輸入請求地址" />
            </p>
            @*存放鍵值對標籤*@
            <div id="AddDiv">
            </div>
            @*存放返回值標籤*@
            <div id="RetDiv">
            </div>

        </div>
        <div class="dj">
            <p>
                <input type="button" value="提交" id="btn" />
                <input type="button" value="清除所有緩存" id="save" />
            </p>
        </div>
    </div>

-------JS代碼塊部分---------

 <script>

        $(function () {
            //提交按鈕點擊事件
            $("#btn").click(function () {
                //alert($("#Geturl").val())
                //存儲參數值
                var name = "";

                if ($("#Geturl").val().trim() == null)
                    return;

                $.each($("#AddDiv p"), function (i, item) {
                    if (i == $("#AddDiv p").length - 1) {
                        name += $(item).children("input.keys").val().trim() + "|" + $(item).children("input.Kval").val().trim();
                    } else
                        name += $(item).children("input.keys").val().trim() + "|" + $(item).children("input.Kval").val().trim() + ",";

                })

                //請求URL
                $.post("/Home/GetApi", { data: name, url: $("#Geturl").val().trim() }, function (data) {
                    $("#RetDiv").html(data);
                })

                //存儲URL地址最後一個斜槓的值
                var Fmothed = $("#Geturl").val().substring($("#Geturl").val().lastIndexOf("/") + 1, $("#Geturl").val().length);

                //給URL賦值
                $("#Geturl").attr("value", $("#Geturl").val().trim());

                $.each($("#AddDiv p"), function (i, item) {
                    $(item).children("input.keys").attr("value", $(item).children("input.keys").val().trim());
                    $(item).children("input.Kval").attr("value", $(item).children("input.Kval").val().trim());
                })

                localStorage[Fmothed] = $(".allValue").html();


            })

            //根據指定URL保存指定字段
            $("#save").click(function () {

                localStorage.clear();

            })

        })


        //模糊查詢匹配
        function MothedSel(value) {
            if (localStorage.getItem(value) != null && localStorage.getItem(value) != 'undefined') {
                $(".allValue").html(localStorage.getItem(value));
                $(".ts").text("");
            }
            else {
                $(".ts").text("未找到匹配項！");
            }
        }


        //匹配xml文件
        function BindKeyUp(txt) {


            //進入方法清空盒子，避免疊加
            $("#AddDiv").html("");
            $("#Title").html("");


            //1.去掉所有的換行符 ， 三個斜槓 ， 空格 ，
            var reg = /\n|\r|\ |[/]/g;
            var name = txt.replace(reg, "");

            //把xml數據分隔成對 （即一對開始和結束標籤爲一條）
            reg = /<(\S*?)>(\S*?)<(\S*?)>/g;
            var AllStrip = name.match(reg);

            //獲得參數鍵   key
            reg = /\"(.*?)\"/g;
            //獲取參數值
            var regValue = /<\S*>(\S*?)<\S*>/;

            //儲存鍵
            var strfors = "";
            //儲存值
            var StrValue = "";

            //存儲summary的值
            var Valsummary = "";
            //存儲returns的值
            var rets = "";
            //正則判斷summary是否爲空
            var zzSumReg = new RegExp(/<summary>\S*(?=<summary>)/g);
            //正則判斷returns是否爲空
            var zzRetsReg = new RegExp(/<returns>\S*(?=<returns>)/g);

            //遍歷每條xml數據
            for (var i = 0; i < AllStrip.length; i++) {
                //因爲我只需要參數的鍵和值，所以此處啓用過濾 , 把唯一的頭尾過濾保存到值裏面
                if (zzSumReg.test(AllStrip[i])) {
                    Valsummary = AllStrip[i].match(regValue)[1];
                    continue;
                }
                if (zzRetsReg.test(AllStrip[i])) {
                    rets = AllStrip[i].match(regValue)[1];
                    continue;
                }

                strfors = strfors + AllStrip[i].match(reg) + ","
                StrValue = StrValue + AllStrip[i].match(regValue)[1] + ","
            }


            //分隔之後的鍵
            var j = strfors.replace(/\"/g, "").substring(0, strfors.replace(/\"/g, "").length - 1).split(',');
            //分隔之後的值
            var v = StrValue.replace(/\"/g, "").substring(0, StrValue.replace(/\"/g, "").length - 1).split(',');

            $("#Title").append('<p>' + Valsummary + '</p>');
            //根據存儲的鍵和值來自動生成標籤
            for (var i = 0; i < j.length; i++) {
                //存儲要追加的p標籤
                var pDiv = '<p><label>key:</label><input class="keys" autofocus="autofocus" required="required" type="text" value="' + j[i] + '" placeholder="' + j[i] + '" class="txt" /><label>value:</label><input class="Kval" required="required" autofocus="autofocus" type="text" placeholder="' + v[i] + '" class="txt" /><label style="color:red;">' + v[i] + '</label></p>';
                $("#AddDiv").append(pDiv);
            }

        }

    </script>

大家只需要把上面的部分代碼複製到頁面中運行即可調用，運行效果如下：

後臺對應ajax請求的代碼：

public ActionResult GetApi(string data, string url)
        {
            //獲取鍵值對數據
            string[] AllParams = data.Split(',');
            using (var client = new HttpClient())
            {
                var values = new List<KeyValuePair<string, string>>();
                for (int i = 0; i < AllParams.Length; i++)
                {
                    //分隔獲取鍵值對數據
                    string[] ParamKeysValues = AllParams[i].Split('|');
                    values.Add(new KeyValuePair<string, string>(ParamKeysValues[0], ParamKeysValues[1]));
                }


                var content = new FormUrlEncodedContent(values);

                var response = client.PostAsync(url, content);

                var responseString = response.Result.Content.ReadAsStringAsync();
                return Content(responseString.Result);
            }


        }

2、相信大家看過這個之後一定會有個疑問，如果我通過這種方式固然是好，但是還有個難題，就是在方法上是實體參數的話，我去一個一個寫具體的參數就會非常麻煩，所以本人對此又重新寫了一個方法，下面直接貼出代碼。

<div>
        <div id="TransCls">
            <label>請輸入需要轉換的類：</label>
            <textarea rows="5" cols="15" style="width: 300px; height: 200px;" οnkeyup="TransFromClass(this.value)"></textarea>
        </div>

        <div id="TransXml">
            <label>轉換後的XML：</label>
            <textarea rows="5" cols="15" style="width: 300px; height: 200px;" id="GetVal"></textarea>
        </div>

    </div>

//類轉換xml
        function TransFromClass(txt)
        {
            var reg = /\n|\r|\ |[/]/g;
            var name = txt.replace(reg, "");
            var zzSumReg = /<summary>\S*?(?=\})/g;
            var sumReg = /<summary>(\S*?)(?=<summary>)/;
            var RegName = /public(string|int|DateTime|object)*(\S*?)(?={)/;

            //獲得數組
            var AllName = name.match(zzSumReg);


            //存註釋信息
            var zsXml = "";

            for (var i = 0; i < AllName.length; i++) {
                //console.info(AllName[i].match(RegName)[2]);

                zsXml += '<param name="' + AllName[i].match(RegName)[2] + '">' + AllName[i].match(sumReg)[1] + '</param>';
            }

            $("#GetVal").val(zsXml);
        }

大家複製到頁面中之後，運行之後的操作如下：

大家把代碼複製到自己的項目中，運行之後按照上圖的操作來即可，非常的方便。。。

不足之處還請大家多多請教，大家共同進步，爭取把項目做得更完善，讓更多人受益。