前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >接口测试平台代码实现33:接口调试

接口测试平台代码实现33:接口调试

作者头像
我去热饭
发布2022-05-19 08:50:42
1K0
发布2022-05-19 08:50:42
举报
文章被收录于专栏:测试开发干货

终于开始了接口调试模块,废话不多说了,直接开始:

首先我们要做一个简单的弹层,和上节课的备注弹层一样的做法,这里就给大家快速贴源码了用到的技术都是之前学过的。注意一点,打开弹层后,一定要在弹层的某个地方放入接口id,以便我们之后调试保存时,发出的请求中可以知道当前用户打开的是哪个接口。

首先打开P_apis.html,加入这个弹层:id=ts

注意长款等具体属性.隐藏属性仍然之后才添加。

然后我们给它设计俩个按钮:保存/取消

在我们的设计中,首先完成的应该是这个接口的各种属性的展示/保存 功能,之后才是调试。

在这个div中添加一个按钮组,具体代码如下:

按钮组的好处是可以让俩个按钮紧贴着风格很简约。

效果如下,放在了右上角,float:right可以让俩个按钮并不会占用一整行位置。但是之后所有的控件必须都要放在这对按钮之下才可以。

我们先要做的是所有属性的展示,无论是什么输入框,按钮,静态文案,我们暂时都不加入id,等到最后需要定位的时候,再加。

接下来我们放一个标题,一来是让用户知道是哪个接口的调试界面,二来是偷偷存上我们的接口id 以便后续请求使用。

注意,我们因为div的背景色太黑了,所以文案都看不见,所以我们要给div补充上属性color=white白色,而且为了美观,我们不要顶格,就加入了格内左边距padding-left = 10px

h3这个大标题中,我写了俩对 small标签,small标签内可以放字号较小的文案,俩个标签,第一个里面放接口id,第二个放接口名字。中间用个横线链接会美观。目前这里是空的,具体填入什么,要靠我们之后写的打开调试面板的函数 来自动填充,所以最后我们也要给这俩个small标签添加不同的id。

紧接着我们写好接口的:请求方式和url,域名我们一会再单独一行写,因为大多数情况下,我们调试接口的url不会变动,而域名则会常变,不同的测试环境都不同。

请求方式和url 包括后面的发送请求按钮send ,这一套都在一行写比较好

继续添加:

代码中是一个大的ul,里面是3个小li 。style属性也是简单进行优化了一下。

源码如下可复制:

代码语言:javascript
复制
    <ul class="nav navbar-nav" style="width: 98%">

        <li>
            <select style="height: 40px;" class="form-control">
                <option value="none"> 请求方式</option>
                <option value="post" > POST</option>
                <option value="get" > GET</option>
                <option value="put" > PUT</option>
                <option value="delete"> DELETE</option>
            </select>
        </li>

        <li style="width: -webkit-calc(100% - 225px)">
            <input  style=";padding-left: 10px;width: 100%;height: 40px;" type="text"
                   placeholder='url: 如 /abcd/efgh/' value="">
        </li>

        <li >
            <button type="button"
                    style="height: 40px;width: 120px;"
                    class="btn btn-default"><span style="font-size: large">Send</span></button>
        </li>
    </ul>

效果如下:

接下来我们开发host输入框:

上图中,我们要加3个换行符来完美效果,基本格式和上面那行一样,还是一个大ul 下面包着小li标签,只不过这次只有一个li。设置好宽度和默认提示文案,看看效果:

接下来我们放入请求头。大家知道,请求头虽然我们在网页f12里,postman里看到都是 一行一对的表格样,但是实际发送请求时候,可是一个大json。所以我们这里简化一下,就放一个大输入框,里面写请求头的json即可。当然下节课我们会立即对其交互优化,全局公共请求头和全局公共域名是我们之后要学习的内容,这里暂时不加了,等到时候再改。

按照之前的格式,继续再来一行header请求头输入框:

注意默认文案。

我们这里可以简单加上俩个小按钮,重置输入,也就是用户输入错了,想清空输入框的按钮。大小对应上面的Send按钮,这样看起来比较协调:

给host和header俩个输入框,都加入一个新的li标签,里面放入类似Send的按钮但是字体和宽度都变小,注意各个li的宽度要对应变化,具体如下:

大家尽量按照我的宽度设置,已经调试的很好了:

效果如下:

功能等我们之后再实现即可。

本节就到这里结束了,内容较多,但是没有难点。大家细心一点,别写错了。

ps:最近追的小伙伴变少了。那么看到此节的你可真的是太给力了。这样不算测开,什么算测开。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-08-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 测试开发干货 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档