接口测试平台代码实现31:接口列表继续开发

简介: 接口测试平台代码实现31:接口列表继续开发

本节我们继续开发接口列表 的前端,把需要展示的按钮都弄出来。

首先打开P_apis.html  :


在调试和删除 俩个按钮中间 加入 备注/复制/异常值测试 三个按钮 ,按钮顺序尽量按照使用习惯 和频率 来设计。

新的三个按钮 样式上可以 和 调试/删除 不同 ,创建一个我们自己的小样式也可以。

微信图片_20220618131413.png看看效果:

微信图片_20220618131442.png

我们看到,按钮都挤串行了。所以我们要给 这列的宽度加大!

就固定350px吧。然后给接口名称/url的宽度缩小一点,大家可以根据自己的浏览器分辨率自由调试到满意。%号的是动态的会随着浏览器变,px是固定。

设置的位置是 thead中的 具体 th的 属性

微信图片_20220618131458.png

好的,现在起码都变成一行了:

微信图片_20220618131504.png

然后我们去head中新建一个样式,随便起名为 wqrf_button

微信图片_20220618131513.png

我先随便写了个背景颜色属性,以便我们调试,然后给三个按钮的class都写成wqrf_button

微信图片_20220618131520.png

看看效果:

微信图片_20220618131529.png

颜色变了,证明生效了,接下来让我们好好设计这个wqrf_button的样式吧:

微信图片_20220618131549.png

效果如下:(大家尽量发挥美术气息,自行设计)

微信图片_20220618133424.png

接下来让我们想想,我们还有什么按钮?

新增接口按钮 , 全局请求头设置 按钮,全局域名设置按钮,

接口文档解析导入按钮,抓包导入按钮,自定义加密算法按钮,登陆态接口设置按钮等等,很可能后续还会增加。

面对这么多按钮 我们要设计的 就最好是类似一个工作台一样的东西,可以任意添加,统一风格,位置整合 等等。

这里有几种设计:

  1. 在最上面/ 最底下 做一个横向的 工具栏 ,排列好这些按钮
  2. 在最右侧放一个工具栏,排列好这些按钮
  3. 做一个酷炫的导航类圆形按钮


考虑到这个问题并不是很核心的,我们没必要浪费大量时间去做一堆按钮的排列,所以我们采用底部放一个工具栏。这样不会经常挡到接口列表,让用户一进来第一眼看到的是 接口列表。


在body的内部最底层,新建一个div,属性为永远保持浏览器的最底部:

微信图片_20220618133618.png

然后在这里放好我们设计的一堆按钮,因为按钮很多,所以我们采用bootstrap的按钮组会更好,这样的好处是按钮直接没间距:

微信图片_20220618133846.png

看看效果:

微信图片_20220618131618.png

看着凑合,开始把所有设计的按钮放进来吧,其中新增接口按钮因为较常用,所以可以单独增加其他属性以便醒目:


微信图片_20220618131626.png

这样我们之后再添加什么新功能按钮,也有位置放。整体看效果风格都不错

今天的功能就到这了。下节课开始依次实现 增删功能。

相关文章
|
13天前
|
IDE 测试技术 开发工具
10个必备Python调试技巧:从pdb到单元测试的开发效率提升指南
在Python开发中,调试是提升效率的关键技能。本文总结了10个实用的调试方法,涵盖内置调试器pdb、breakpoint()函数、断言机制、logging模块、列表推导式优化、IPython调试、警告机制、IDE调试工具、inspect模块和单元测试框架的应用。通过这些技巧,开发者可以更高效地定位和解决问题,提高代码质量。
108 8
10个必备Python调试技巧:从pdb到单元测试的开发效率提升指南
|
8天前
|
算法 Java 测试技术
使用 BenchmarkDotNet 对 .NET 代码进行性能基准测试
使用 BenchmarkDotNet 对 .NET 代码进行性能基准测试
40 13
|
18天前
|
监控 JavaScript 测试技术
postman接口测试工具详解
Postman是一个功能强大且易于使用的API测试工具。通过详细的介绍和实际示例,本文展示了Postman在API测试中的各种应用。无论是简单的请求发送,还是复杂的自动化测试和持续集成,Postman都提供了丰富的功能来满足用户的需求。希望本文能帮助您更好地理解和使用Postman,提高API测试的效率和质量。
70 11
|
2月前
|
并行计算 算法 测试技术
C语言因高效灵活被广泛应用于软件开发。本文探讨了优化C语言程序性能的策略,涵盖算法优化、代码结构优化、内存管理优化、编译器优化、数据结构优化、并行计算优化及性能测试与分析七个方面
C语言因高效灵活被广泛应用于软件开发。本文探讨了优化C语言程序性能的策略,涵盖算法优化、代码结构优化、内存管理优化、编译器优化、数据结构优化、并行计算优化及性能测试与分析七个方面,旨在通过综合策略提升程序性能,满足实际需求。
65 1
|
2月前
|
存储 算法 C语言
用C语言开发游戏的实践过程,包括选择游戏类型、设计游戏框架、实现图形界面、游戏逻辑、调整游戏难度、添加音效音乐、性能优化、测试调试等内容
本文探讨了用C语言开发游戏的实践过程,包括选择游戏类型、设计游戏框架、实现图形界面、游戏逻辑、调整游戏难度、添加音效音乐、性能优化、测试调试等内容,旨在为开发者提供全面的指导和灵感。
53 2
|
2月前
|
安全 测试技术 持续交付
云计算时代的软件开发与测试:高效、灵活、可扩展
云计算时代的软件开发与测试:高效、灵活、可扩展
|
2月前
|
JSON Java 测试技术
SpringCloud2023实战之接口服务测试工具SpringBootTest
SpringBootTest同时集成了JUnit Jupiter、AssertJ、Hamcrest测试辅助库,使得更容易编写但愿测试代码。
70 3
|
3月前
|
JSON 算法 数据可视化
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
这篇文章是关于如何通过算法接口返回的目标检测结果来计算性能指标的笔记。它涵盖了任务描述、指标分析(包括TP、FP、FN、TN、精准率和召回率),接口处理,数据集处理,以及如何使用实用工具进行文件操作和数据可视化。文章还提供了一些Python代码示例,用于处理图像文件、转换数据格式以及计算目标检测的性能指标。
83 0
测试专项笔记(一): 通过算法能力接口返回的检测结果完成相关指标的计算(目标检测)
|
4月前
|
移动开发 JSON Java
Jmeter实现WebSocket协议的接口测试方法
WebSocket协议是HTML5的一种新协议,实现了浏览器与服务器之间的全双工通信。通过简单的握手动作,双方可直接传输数据。其优势包括极小的头部开销和服务器推送功能。使用JMeter进行WebSocket接口和性能测试时,需安装特定插件并配置相关参数,如服务器地址、端口号等,还可通过CSV文件实现参数化,以满足不同测试需求。
280 7
Jmeter实现WebSocket协议的接口测试方法
|
4月前
|
JSON 移动开发 监控
快速上手|HTTP 接口功能自动化测试
HTTP接口功能测试对于确保Web应用和H5应用的数据正确性至关重要。这类测试主要针对后台HTTP接口,通过构造不同参数输入值并获取JSON格式的输出结果来进行验证。HTTP协议基于TCP连接,包括请求与响应模式。请求由请求行、消息报头和请求正文组成,响应则包含状态行、消息报头及响应正文。常用的请求方法有GET、POST等,而响应状态码如2xx代表成功。测试过程使用Python语言和pycurl模块调用接口,并通过断言机制比对实际与预期结果,确保功能正确性。
289 3
快速上手|HTTP 接口功能自动化测试