接口测试平台代码实现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

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

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

相关文章
|
7月前
|
测试技术 开发者 Python
Python单元测试入门:3个核心断言方法,帮你快速定位代码bug
本文介绍Python单元测试基础,详解`unittest`框架中的三大核心断言方法:`assertEqual`验证值相等,`assertTrue`和`assertFalse`判断条件真假。通过实例演示其用法,帮助开发者自动化检测代码逻辑,提升测试效率与可靠性。
530 1
|
7月前
|
人工智能 数据可视化 测试技术
AI测试平台自动遍历:低代码也能玩转全链路测试
AI测试平台的自动遍历功能,通过低代码配置实现Web和App的自动化测试。用户只需提供入口链接或安装包及简单配置,即可自动完成页面结构识别、操作验证,并生成可视化报告,大幅提升测试效率,特别适用于高频迭代项目。
|
6月前
|
安全 Java 测试技术
《深入理解Spring》单元测试——高质量代码的守护神
Spring测试框架提供全面的单元与集成测试支持,通过`@SpringBootTest`、`@WebMvcTest`等注解实现分层测试,结合Mockito、Testcontainers和Jacoco,保障代码质量,提升开发效率与系统稳定性。
|
7月前
|
人工智能 边缘计算 搜索推荐
AI产品测试学习路径全解析:从业务场景到代码实践
本文深入解析AI测试的核心技能与学习路径,涵盖业务理解、模型指标计算与性能测试三大阶段,助力掌握分类、推荐系统、计算机视觉等多场景测试方法,提升AI产品质量保障能力。
|
7月前
|
人工智能 自然语言处理 测试技术
AI测试平台的用例管理实践:写得清晰,管得高效,执行更智能
在测试过程中,用例分散、步骤模糊、回归测试效率低等问题常困扰团队。霍格沃兹测试开发学社推出的AI测试平台,打通“用例编写—集中管理—智能执行”全流程,提升测试效率与覆盖率。平台支持标准化用例编写、统一管理操作及智能执行,助力测试团队高效协作,释放更多精力优化测试策略。目前平台已开放内测,欢迎试用体验!
|
数据可视化 前端开发 测试技术
接口测试新选择:Postman替代方案全解析
在软件开发中,接口测试工具至关重要。Postman长期占据主导地位,但随着国产工具的崛起,越来越多开发者转向更适合中国市场的替代方案——Apifox。它不仅支持中英文切换、完全免费不限人数,还具备强大的可视化操作、自动生成文档和API调试功能,极大简化了开发流程。
|
10月前
|
Java 测试技术 容器
Jmeter工具使用:HTTP接口性能测试实战
希望这篇文章能够帮助你初步理解如何使用JMeter进行HTTP接口性能测试,有兴趣的话,你可以研究更多关于JMeter的内容。记住,只有理解并掌握了这些工具,你才能充分利用它们发挥其应有的价值。+
1414 23
|
12月前
|
SQL 安全 测试技术
2025接口测试全攻略:高并发、安全防护与六大工具实战指南
本文探讨高并发稳定性验证、安全防护实战及六大工具(Postman、RunnerGo、Apipost、JMeter、SoapUI、Fiddler)选型指南,助力构建未来接口测试体系。接口测试旨在验证数据传输、参数合法性、错误处理能力及性能安全性,其重要性体现在早期发现问题、保障系统稳定和支撑持续集成。常用方法包括功能、性能、安全性及兼容性测试,典型场景涵盖前后端分离开发、第三方服务集成与数据一致性检查。选择合适的工具需综合考虑需求与团队协作等因素。
1868 24
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
1052 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
903 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
下一篇
开通oss服务