全新 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);
        }

大家复制到页面中之后，运行之后的操作如下：

大家把代码复制到自己的项目中，运行之后按照上图的操作来即可，非常的方便。。。

不足之处还请大家多多请教，大家共同进步，争取把项目做得更完善，让更多人受益。