一、WebApiTestClient介绍
1、WebApiTestClient组件作用主要有以下几个:
(1)、将WebApi的接口放到了浏览器里面,以可视化的方式展现出来,比如我们通过http://localhost:8080/Help这个地址就能在浏览器里面看到这个服务里面所有的API接口以及接口的详细说明,省去了我们手写接口文档的麻烦。
(2)、能够详细查看API的类说明、方法说明、参数说明、返回值说明。只需要我们在定义方法时候加上 /// 这种详细注释即可,组件自动读取注释里面的内容展现在界面上面。
(3)、可以修改http请求头文件Head和请求体Body里面的参数,指定发送http请求的特性,比如指定我们最常见的contentType指示参数的类型。
(4)、组件拥有测试接口的功能,用过Soup UI的朋友应该知道,通过Soup UI能够方便测试WebService参数以及返回值。我们的WebApiTestClient也可以实现类似的功能,直接通过页面上的测试按钮,就能测试接口。
2、WebApiTestClient是一个开源组件。开源地址:https://github.com/yaohuang/WebApiTestClient
二、WebApiTestClient展示
第一印象:接口列表。
![669260a18aea4b520f5901b8c3b1947b.png](https://i-blog.csdnimg.cn/blog_migrate/c0d14eaef3169127bfce35642dd41af3.jpeg)
点击某一个接口查看接口详细。例如本文查看Get请求的无参方法,右下角有按钮可以测试接口。
![c3a9dc5dea7708d860fbad4e868af1cb.png](https://i-blog.csdnimg.cn/blog_migrate/59a4cb80ebb16594f8c45f10ae89e823.jpeg)
点击“Test API”按钮
![d75c658944fea199ba52b93b706e2818.png](https://i-blog.csdnimg.cn/blog_migrate/f894ba416ffae9b3e7227a66d91869ec.jpeg)
点击Send发送请求
![2032cecfea9f6904411e65426316274a.png](https://i-blog.csdnimg.cn/blog_migrate/e289f8523ddd3c2850b1cf8764e219bc.jpeg)
第二个有参数的接口
![adc6dd340b78b9ddf4ccae32a138c1b5.png](https://i-blog.csdnimg.cn/blog_migrate/641852dac9bb0a677f0e5aa0315d8702.jpeg)
手动输入参数,得到返回结果
![4346e16def8dfba6919fe71e23fe218d.png](https://i-blog.csdnimg.cn/blog_migrate/977b784f9122c8ef9cf7c93038341543.jpeg)
如果参数的类型是对象,可以直接解析class定义上面的 /// 标注,显示如下
![b7b3527b875224a5918a920eefb2e35a.png](https://i-blog.csdnimg.cn/blog_migrate/807bd38f957e9f93eadabd2b05fa8c47.jpeg)
由于是post请求,如果需要执行参数长度和类型,可以通过content-length和content-type来指定。并且具体的参数可以指定不同格式显示,比如下图的application/json和application/xml
![e4308a98ba654a40d5c55787742b366c.png](https://i-blog.csdnimg.cn/blog_migrate/d427ea14ef1aa5a801871d66b39b81fd.jpeg)
![b87d8e39b0358953d541a54a4c2ac02f.png](https://i-blog.csdnimg.cn/blog_migrate/80ec2540c389f6dade93232411091dd0.jpeg)
得到返回值
![98f6f0af7ba0fe6b6907d4549fe43995.png](https://i-blog.csdnimg.cn/blog_migrate/555abd2e4da3450b3a0aa5f51ed071a7.jpeg)
三、WebApiTestClient使用
1.如何引入组件
首先,我们需要定义一个API项目
![0093333b8945acf6017c384e2fd988ca.png](https://i-blog.csdnimg.cn/blog_migrate/d6e1968531f65070f14200086d99a230.jpeg)
然后通过Nuget引入组件,如下图。记住选下图中的第三个。
![e69907c62e78b31ffbf39a0ac46ea22c.png](https://i-blog.csdnimg.cn/blog_migrate/0bb06f26d35f4374bc41533cda160a1d.jpeg)
引入成功后,将向项目里面添加一些主要文件:
- ScriptsWebApiTestClient.js
- AreasHelpPageTestClient.css
- AreasHelpPageViewsHelpDisplayTemplatesTestClientDialogs.cshtml
- AreasHelpPageViewsHelpDisplayTemplatesTestClientReferences.cshtml
2.如何使用组件
1、修改Api.cshtml文件
通过上述步骤,就能将组件WebAPITestClient引入进来。下面我们只需要做一件事:打开文件 (根据 AreasHelpPageViewsHelp) Api.cshtml 并添加以下内容:
- @Html.DisplayForModel("TestClientDialogs")
- @Html.DisplayForModel("TestClientReferences")
添加后Api.cshtml文件的代码如下
![c16b51df0b07f2c0845df1437a2dfa75.png](https://i-blog.csdnimg.cn/blog_migrate/afeaeb4ce1f7e9bef427db33d9e7e342.jpeg)
2、配置读取注释的xml路径
其实,通过上面的步骤,我们的项目已经可以跑起来了,也可以调用接口测试。但是,还不能读取 /// 注释里面的东西。需要做如下配置才行。
(1)配置生成xml的路径。我们在项目上面点右键→属性→生成标签页配置xml的路径
![c43f6eeb24c05713dce966ad101b45f3.png](https://i-blog.csdnimg.cn/blog_migrate/f3913c5f638178aa7a433dfc6ed2851b.jpeg)
(2)在xml的读取路径:在下图的HelpPageConfig.cs里面配置一句话,指定xml的读取路径。
![a3bc7d7a2b0262ec991b76fcdd19b836.png](https://i-blog.csdnimg.cn/blog_migrate/d003052f796bcd0a8f6f1ba6813e151a.jpeg)
这句代码如下:
![56fce107ed3fe85d2d0ba9b09e79cb45.png](https://i-blog.csdnimg.cn/blog_migrate/c1a7316968fe0f72640211f8c32b6886.jpeg)
3、测试接口
![38168df685d18e625c19eb3e3d5ab58d.png](https://i-blog.csdnimg.cn/blog_migrate/156b4c98d520ab513d37b9019710cad3.jpeg)
至此,组件就搭完了,剩下的就是运行了。我们在url里面敲地址http://localhost:8080/Help/Index或者http://localhost:8080/Help就能得到上述效果。还不赶紧试试~~
四、总结
上面简单总结了下WebApiTestClient的使用,如果你的WebApi也是一个单独的服务,可以整起来当帮助文档用,省得你自己写。哈哈,不要谢我,请叫我红领巾。欢迎推荐。