Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >接口测试平台代码实现34:请求体

接口测试平台代码实现34:请求体

作者头像
我去热饭
发布于 2022-05-19 00:51:19
发布于 2022-05-19 00:51:19
42300
代码可运行
举报
文章被收录于专栏:测试开发干货测试开发干货
运行总次数:0
代码可运行

接着上节的开发,我们还差一个请求体,等我们把核心功能开发后,会对交互进行优化。输入更加快捷。

打开P_apis.html。接着在div调试弹层 的里面 加上一个ul ,用来放我们请求体的选择按钮组:

按钮一共有5个,其中一个是下拉单。

分别是None ,form-data,x-www-form-urlencoded,raw,返回体

其中raw自己带下拉单,包含:text ,javascript,json,html,xml

这些按钮。按照代码中写好后看看效果噢~ 纯纯的bootstrap3

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <br><br><br>

    <ul id="myTab" class="nav nav-tabs" >
        <li class="active"><a href="#None" data-toggle="tab" >None</a></li>
        <li ><a href="#form-data" data-toggle="tab" >form-data</a></li>
        <li ><a href="#x-www-form-urlencoded" data-toggle="tab" >x-www-form-urlencoded</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">raw <b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                <li><a href="#Text" tabindex="-1" data-toggle="tab">Text</a></li>
                <li><a href="#JavaScript" tabindex="-1" data-toggle="tab">JavaScript</a></li>
                <li><a href="#Json" tabindex="-1" data-toggle="tab">Json</a></li>
                <li><a href="#Html" tabindex="-1" data-toggle="tab">Html</a></li>
                <li><a href="#Xml" tabindex="-1" data-toggle="tab">Xml</a></li>

            </ul>
        </li>
        <li ><a href="#home" data-toggle="tab" >返回体</a></li>
    </ul>

效果如下:

整个调试窗体下半部分的大片空白,就是给这些按钮预备的,也就是一个公共区域,每个按钮都管领着自己的界面一个小div 但是一开始几乎都是隐藏的,你点击哪个按钮,下面就迅速切换到哪个div,同时隐藏其他div。

当然默认是第一个按钮None显示,并且下面空旷区域显示的也是None领导的小div。

那么 要怎么映射好 每个小div对应哪个按钮呢?

其实就是我刚刚写的那些按钮的中的 href属性,利用锚点技术,href=“#None” 那么你新建的小div 的id写成None ,即可让二者联系起来。

至于到底内部是怎么做的呢?其实都在于我们bootstrap3中,已经写好了,我们只需要给他们的class属性写对就可以了,所以大家在抄的时候一定不要写错字,最好复制下来。

这些小div 我们要放在一个大div里,才可以生效:具体代码如下:

在刚写的ul下方,加入这个大div和里面的小div:

还是给出源码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="None">
            进入了None
        </div>
        <div class="tab-pane fade" id="form-data">
            进入了form-data
        </div>
        <div class="tab-pane fade" id="x-www-form-urlencoded">
            进入了x-www-form-urlencoded
        </div>
        <div class="tab-pane fade" id="Text">
            进入了Text
        </div>
        <div class="tab-pane fade" id="JavaScript">
            进入了JavaScript
        </div>
        <div class="tab-pane fade" id="Json">
            进入了Json
        </div>
        <div class="tab-pane fade" id="Html">
            进入了Html
        </div>
        <div class="tab-pane fade" id="Xml">
            进入了Xml
        </div>
    </div>

目前每个小div中只包含一个文案,就是告诉你确实成功进入了哪个小div。

你发现只有第一个 id=None的小div的class 比别人多了 in active。

这就是默认显示

好看看效果:

好我们测试完毕后,没问题,接着就是要开始开发各个小div的内容了,得删掉之前写的小文案。换上其他东西:

首先是最简单的None : (不传任何请求体)

设计:当用户点击这个的时候,我们就给显示一句话:这个请求讲不会携带任何请求体。中英文混合!颜色不要太鲜艳!文案要居中!

效果如下:

好了,差不多了,我们开始设计form-data :

按照postman的交互规则,这里要做成类似表格的样子,左边是key,右边是value,全部按照字符串格式。数量要可随时增加/删除。貌似难度较大。当遇到这种清空时候,我们可以有俩种办法:

  1. 土办法,用超大量的js代码 实现。
  2. bootstrap3找对应的表格,不过不支持增删,需要进行二次开发,难度更高
  3. 直接找支持增删的第三方组件。效果稳定,但是需要花成本试。

我们选择第三种,直接找现成的,作者已经从数个方法中找到了最好的,免去了大家的烦恼。

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

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
接口测试平台代码实现106:登录态接口-2
大部分内容我们仍然可以借鉴普通接口调试层的内容,所以打开P_apis.html,找到那个登陆态的div,开始进行添加内部控件,但是也不能全都照搬过来,有一些就不需要,比如接口名字。而因为这个接口一个项目基本也就设置一次,所以优化便利性这种事的优先级不高,精力还是留给那些使用频率高的功能上吧
我去热饭
2022/05/19
1K0
接口测试平台代码实现106:登录态接口-2
接口测试平台代码实现56:首页重构-4
本节继续开发首页右侧的显示效果,可能有的同学觉得这里节奏太慢了,不怕,咱养肥再看。
我去热饭
2022/05/19
1.5K0
接口测试平台代码实现56:首页重构-4
05_Bootstrap插件02
给链接、导航等元素嵌套 .badge 元素,可以很醒目的展示新的或未读的信息条目。
张哥编程
2024/12/13
1080
Bootstrap实用功能总结
1、定义折叠按钮时除了折叠的属性之外,还必须加上样式: .navbar-toggler
菲宇
2020/08/02
2.8K0
接口测试平台代码实现36:请求体继续
首先复制我们form-data的小div的内容 到 x-www-form-urlencoded 的小div里:
我去热饭
2022/05/19
6720
接口测试平台代码实现36:请求体继续
bootstrap tab 3.4 常用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <title>Title</title> </head> <body> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li> <li><a href="#tab2" data-toggle="tab">Tab2</a></li> <li><a href="#tab3" data-toggle="tab">Tab3</a></li> <li><a href="#tab4" data-toggle="tab">Tab4</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"><img src="images/1.png"></div> <div class="tab-pane" id="tab2"><img src="images/2.png"></div> <div class="tab-pane" id="tab3"><img src="images/3.png"></div> <div class="tab-pane" id="tab4"><img src="images/4.png"></div> </div> </div> <script type="text/javascript">
用户5760343
2019/07/07
6100
bootstrap导航栏(bootstrap页面)
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/126954.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/01
4.2K0
接口测试平台代码实现109:登录态接口-5
打开P_apis.html,给Send按钮加上onclick并且下面新建login_send函数:
我去热饭
2022/05/19
3560
接口测试平台代码实现109:登录态接口-5
Bootstrap学习文档(三)
Bootstrap 中还带有免费的图标供我们使用,这些图标使用起来很简单,就像使用字体一样,改变图标的大小就是改变字体的 font-size,改变图标的颜色就是改变字体的颜色 color。有了这些图标,再也不用切图啦。另外还有第三方的图标我们可以使用,比如说 Font Awesome ,也是这种字体图标。在Bootstrap的下载包中,记得引入fonts文件,这样图标才能显示出来。
Wizey
2018/08/30
6.1K0
Bootstrap学习文档(三)
Bootstrap响应式前端框架笔记十九——标签页的使用
    Bootstrap中通过为导航标签增加data-toggle="tab",配合类或id来进行标签页的关联,示例如下:
珲少
2018/08/15
9600
Bootstrap响应式前端框架笔记十九——标签页的使用
python测试开发django-153.bootstrap导航-标签页切换(nav-tabs)
Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的。标签页.nav-tabs 类依赖 .nav 基类。
上海-悠悠
2021/10/20
1.3K0
Python测试开发-创建模态框及保存数据
模态框是指的在覆盖在父窗体上的子窗体。可用来做交互,我们经常会看到模态框用来登录、确定等等,到底是怎么实现这种弹出效果,bootstrap已经为我们提供了相应的组件。
测试开发社区
2019/09/20
1.4K0
Python测试开发-创建模态框及保存数据
前端|Bootstrap——导航组件
Bootstrap是一个用于快速开发Web 应用程序和网站的前端框架,它提供了一个带有网格系统、链接样式、背景的基本结构。Bootstrap提供了许多的组件,其中就包括导航组件。这在很大程度上简化了操作。通常都是利用列表实现来导航的,常用的是无序列表(<ul>)和有序列表(<ol>)。自定义列表(<dl>)一般不会用来实现导航。
算法与编程之美
2020/03/25
7.2K0
博科趣二维码在线生成网页源码
二维码在线生成网页源码是一种基于特定编码规则,能够将各种数据转化为可被手机扫描识别的图形化代码。这种源码通常包含HTML、CSS和JavaScript等技术,用于在网页上实现二维码的动态生成与显示功能。在当今信息化社会,二维码被广泛应用在广告宣传、链接分享、支付凭证等多个领域 http://www.bokequ.com/api/qrcode/
博客趣
2024/02/15
3190
博科趣二维码在线生成网页源码
bootstrap 导航栏 淡入淡出 常用样式
<ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#home" data-toggle="tab"> 菜鸟教程 </a> </li> <li><a href="#ios" data-toggle="tab">iOS</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li> <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <p>菜鸟教程是一个提供最新的web技术站点,本站免费提供了建站相关的技术文档,帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术,更是梦想。</p> </div> <div class="tab-pane fade" id="ios"> <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X,它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上,iOS 是苹果的移动版本。</p> </div> <div class="tab-pane fade" id="jmeter"> <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。</p> </div> <div class="tab-pane fade" id="ejb"> <p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。 </p> </div> </div>
用户5760343
2019/07/05
2K0
接口测试平台代码实现35:请求体
http://down.htmleaf.com/1801/201801271505.zip
我去热饭
2022/05/19
8080
接口测试平台代码实现35:请求体
Bootstrap实战 - 注册和登录
标签页的使用与导航栏类似,同时都依赖于基础样式 nav,不同的是附加样式变成了 nav-tabs 和 nav-pills(胶囊式),也不用在外面加上一层样式为 navbar navbar-* 的 <div> 元素。
除除
2022/01/13
1.2K0
Bootstrap实战 - 注册和登录
bootstrap 常用导航菜单样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 标签页与胶囊式标签页</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>
用户5760343
2019/07/05
6.6K0
常用的CSS框架
常用的CSS框架 之前在写自己的个人网站的时候,由于自己Web前端不是特别好,于是就去找相关的CSS框架来搭建页面了。 找到以下这么一篇文章(列出了很多常用的CSS框架): http://w3schools.wang/report/top-UI-open-source-framework-summary.html Bootstrap Semantic-ui Foundation Materialize Material-ui Phantomjs Pure Flat-ui Jquery-ui React-bo
Java3y
2018/03/15
3.5K0
常用的CSS框架
BootStrap基础
简单,直观,强悍的前端开发框架,让web开发更迅速,简单。来自Twitter,是目前很受欢迎的前端框架之一。 Bootstrap是基于HTML,CSS,Javascript的。
不愿意做鱼的小鲸鱼
2022/08/24
1.1K0
BootStrap基础
相关推荐
接口测试平台代码实现106:登录态接口-2
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验