接口测试平台代码实现54:首页重构-2

好，虽然绝大多数同学还未追上最新进度进行投票，但是已投情况来看，大部分还是支持首页做成接口快速调试功能。

那么本节课就开始吧，首先我们打开我们的首页：home.html。观察一下目前结构：

我们这次改版相当于完全重构了，所以删除掉body 的css属性和一切子内容

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

首先我们依从postman的风格，整个首页大概分为左右俩部分，左边是请求历史记录，右边是接口调试的具体模版。当我们点击左侧的任意请求记录的时候，右侧则迅速把各个输入框的值变为这次记录存储的数据即可。当然每次请求无论是否成功，左侧的请求记录都会储存好本次请求的请求数据。

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

那么我们可以用div来做一条完全可控的竖线，来分割开左右。

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

看看效果：

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

我们用h来表示浏览器的高度，然后把这个竖线shu 的高度设置成h-85的样子。

看看效果：

当然颜色的话，我们改成深灰色显眼一点：

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

我们创建了这个循环左侧div，注意代码位置必须在这个竖线上面。这个div的高度我们也要用最下面那段js来控制住，并且要设置竖滚动条-overfloow-y：scrooll

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

如上图代码所示：这个超链接，点击的话我们定义了一个js函数，用来把请求数据显示到右侧。并且a标签的text文本我们简单显示为这个请求的请求方式和url

不过目前并没有数据，所以暂时告一段落。

接下来我们继续完善这个左面部分，考虑到需要存储用户的请求记录，所以少不了要做一个新的数据库表了。这个表存放的基本和接口仓库的接口表一样，但是不需要项目id,因为首页调试的接口不属于任何项目，但是额外需要用户id，因为这些接口属于用户，我们也是靠用户id 来区分开。而诸如上次请求体/格式,名字描述，项目纬度全局公共变量等字段均不要了。具体class代码我们复制接口的然后稍加改动即可：

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中注册：

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

(有些同学后台打开后，对表进行增删操作后会报错，这种情况是因为你的django和sqlite版本不对应导致。最好pip卸载装好配套的。我这里给大家看下我的各个组件的版本，并不是最新，但确很稳,具体放在了次条文章中)

让我们随便增加俩条请求记录，作为我们后续调试设计前端的demo。

注意userid写自己的哦！查看自己userid方法很多，

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

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

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