接口测试平台-53：首页重构-1

本文选择首页做成接口快速调试功能

首先打开首页：home.html，这次改版相当于完全重构了，所以删除掉body 的css属性和一切子内容

现在主页已经是一片空白了。我们要重新设计了。

首先依从postman的风格，整个首页大概分为左右俩部分，左边是请求历史记录，右边是接口调试的具体模版。

当点击左侧的任意请求记录时，右侧则迅速把各个输入框的值变为这次记录存储的数据即可。当然每次请求无论是否成功，左侧的请求记录都会储存好本次请求的请求数据。

另一个功能是当右侧的调试功能启动，获取了接口的返回值后，使用者可以看到已有的项目列表和新建项目功能，点击即可把本次请求保存到对应项目中。

 

1. 用div来做一条完全可控的竖线，来分割开左右。

<div id="shu" style="width: 2px; background-color: #c7e9e9; position: absolute; top: 70px; left: 340px">
    &nbsp;
</div>

这个div内部必须有个空格  ，否则是没有高度的，注意空格用 表示，后面必须写分号。

竖线并不高，那是因没有设置高度，当然为了设置成一个动态高度，只能在写一个js来自动控制高度，高度受浏览器高度决定。

<script>
    var h = document.documentElement.clientHeight;
    document.getElementById('shu').style.height = (h-85).toString() + 'px'
</script>

看看效果：

当然颜色的话，可以改成深灰色显眼一点,262c2c：

 

好，目前左侧应该是一个div，div下面应该是当前登陆用户的请求记录的列表，每行其实就是一个超链接。代码如下：

<!--  竖线左侧  -->
<h3>&nbsp;您的请求记录：</h3>
<div id="home_log_plan" style="padding-left: 20px; overflow-y: scroll; width: 320px">

</div>

左侧div代码位置必须在竖线上，高度也要用最下面那段js来控制住，并且要设置竖滚动条-overfloow-y：scrooll

document.getElementById('home_log_plan').style.height = (h-85).toString() + 'px'

当前这个高度设置并不一定是最好的，所以之后真的有数据显示后，再调试这个动态高度。然后这个div内部应是一个循环，循环主体是超链接。具体数据由用户进入首页时由后端带进来。

{% for i in home_log %}
    <a href="javascript:home_log_show('{{ i.id }}')" class="log">
        <span>{{ i.api_method }}</span> {{ i.api_url }}
    </a> <br>
{% endfor %}

如上图代码所示：这个超链接，点击的话定义了一个js函数，用来把请求数据显示到右侧。并且a标签的text文本简单显示为这个请求的请求方式和url。不过目前并没有数据，所以暂时告一段落。

 

接下来继续完善这个左面部分，考虑到需要存储用户的请求记录，所以少不了要做一个新的数据库表了。

这个表存放的基本和接口仓库的接口表一样，但是不需要项目id,因为首页调试的接口不属于任何项目，但是额外需要用户id，因为这些接口属于用户，平台也是靠用户id来区分开。而诸如上次请求体/格式,名字描述，项目纬度全局公共变量等字段均不要了。

具体class代码复制接口的然后稍加改动即可：

# 首页调试接口log
class DB_apis_log(models.Model):
    user_id = models.CharField(max_length=10,null=True)  # 所属用户id

    api_method = models.CharField(max_length=10,null=True)  # 请求方式
    api_url = models.CharField(max_length=1000,null=True)  # url
    api_header = models.CharField(max_length=1000,null=True)  # 请求头
    api_login = models.CharField(max_length=10,null=True)  # 是否带登陆态
    api_host = models.CharField(max_length=100,null=True)  # 域名

    body_method = models.CharField(max_length=20,null=True)  # 请求体编码格式
    api_body = models.CharField(max_length=1000,null=True)  # 请求体
    sign = models.CharField(max_length=10,null=True)  # 是否验签
    file_key = models.CharField(max_length=50,null=True)  # 文件key
    file_name = models.CharField(max_length=50,null=True)  # 文件名

    def __str__(self):
        return self.api_url

虽然里面很多还没用上，但是作为预留也要写上。同步并生效

然后去admin.py中注册：

admin.site.register(DB_apis_log)

重启服务后进入后台，找到这个表：

随便增加两条请求记录，作为后续调试设计前端的demo。注意userid写自己的哦！查看自己userid方法很多，

比如进入后台用户表，进入自己的用户记录中，看看url里的这个数字，就是了。

添加了俩条内容不相同的接口请求记录

创建完成后，接下来就是负责前端的左侧的请求记录开发了。