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

2022-05-19 08:49:00 浏览数 (1)

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

首先打开P_apis.html :

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

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

看看效果:

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

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

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

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

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

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

看看效果:

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

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

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

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

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

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

这里有几种设计:

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

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

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

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

看看效果:

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

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

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

0 人点赞