接口测试平台-29：接口库-接口列表-继续开发

最新推荐文章于 2023-12-12 21:09:17 发布

向往的美好生活

最新推荐文章于 2023-12-12 21:09:17 发布

阅读量208

点赞数

原文链接：https://blog.csdn.net/qq_22795513/category_10122661.html

版权

接口测试平台专栏收录该内容

112 篇文章 15 订阅

订阅专栏

1. 增加按钮：备注/复制/异常值测试，按钮顺序尽量按照使用习惯和频率来设计。

<button>备注</button>
<button>复制</button>
<button>异常值测试</button>

刷新页面，看看效果：

美化，不让按钮串行

<thead>
    <tr>
        <th>id</th>
        <th style="width: 20%">接口名称</th>
        <th style="width: 40%">url</th>
        <th style="width: 350px">操作</th>
    </tr>
</thead>

去head中新建一个样式，随便起名为 wqrf_button

<head>
    <meta charset="UTF-8">
    <title>接口库</title>
    <style>
        .wqrf_input{
            background-color: #0fd1ab;
        }
    </style>
</head>

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

颜色变了，证明生效了，接下来让好好设计这个wqrf_button的样式：

<style>
    .wqrf_input{
        background: linear-gradient(to top, #daffff, white);
        border-radius: 5px;
        border: 1px solid #353C48;
        box-shadow: 4px 4px 4px grey;
    }
</style>

2. 接下来想想，还有什么按钮？

新增接口按钮，全局请求头设置按钮，全局域名设置按钮，
接口文档解析导入按钮，抓包导入按钮，自定义加密算法按钮，登陆态接口设置按钮等等，很可能后续还会增加。

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

这里有几种设计：

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

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

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

<div style="position: fixed; bottom: 0px; width: 100%; background-color: #f8f8f8; text-align: center; border: 1px solid #e7e7e7">
    <div class="btn-group">
        <button type="button" class="btn btn-default">按钮1</button>
        <button type="button" class="btn btn-default">按钮2</button>
        <button type="button" class="btn btn-default">按钮3</button>
    </div>
</div>

效果如下：

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

<div style="position: fixed; bottom: 0px; width: 100%; background-color: #f8f8f8; text-align: center; border: 1px solid #e7e7e7">
    <div class="btn-group">
        <button type="button" class="btn btn-primary">新增接口</button>
        <button type="button" class="btn btn-default">全局请求头</button>
        <button type="button" class="btn btn-default">全局域名</button>
        <button type="button" class="btn btn-default">接口文档导入</button>
        <button type="button" class="btn btn-default">抓包导入</button>
        <button type="button" class="btn btn-default">加密算法</button>
        <button type="button" class="btn btn-default">登录态接口</button>
    </div>
</div>

效果如下：

下节课开始依次实现增删功能。

向往的美好生活

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
接口测试平台-29：接口库-接口列表-继续开发

1. 增加按钮：备注/复制/异常值测试，按钮顺序尽量按照使用习惯和频率来设计。<button>备注</button><button>复制</button><button>异常值测试</button>刷新页面，看看效果：美化，不让按钮串行<thead> <tr> <th>id</th> <th sty..
复制链接

扫一扫