接口测试平台代码实现58-首页重构6

在本节开始之前，让我们来处理上节课小伙伴反馈的一个现象级问题：

就是进入首页后，这个接口测试平台的欢迎语能不能别删，不然都不知道这是干啥的平台，

这里却是我之前疏忽了，所以本节我们先加上。

打开home.html：

在body内的最顶部 写个h2标题即可，大家可以自己多设计设计，美观美观

好，我们开始今天主要内容

点击左侧记录，右侧自动变！

打开我们之前写的home.html中，左侧记录

我们记得，我们都是用a标签超链接 来显示一个一个的请求记录。那么他们点击的href属性，我们指定的是触发一个叫home_log_show()的js函数，传入这个记录的id，当然这个函数还没有写。

再找到我们动态刷新生成肌瘤的js函数log_refersh中，看到我们动态生成的a超链接标签，也写了href='...'来调用这个home_log_show函数，但是忘记加上id作为参数了，这里补上(全程注意单引号双引号的运用！)

补完后，我们找个风水宝地，新建这个home_log_show函数。

之后我们要考虑，这个函数我们要做些什么呢？

我们首先要接收 记录id，然后根据id去后台拿到完整的请求数据，然后把这些数据展示到右侧请求模块的一大堆输入框等。

所以代码写成这样：

然后我们先去写urls.py：

再去写views.py：

我们现在来考虑这个函数要做什么，它要做的很简单，根据id从数据库记录表拿出整条数据，然后返回即可。

我加了个print，输出一下看看返回的是什么？

是一个标准的json字典。所以前端js可以用eval直接解析。

好我们回到前端home.html，开始写这个复杂的让右侧变化代码：

我们解析拿到了 这个目标接口的全部数据后，就是往右边请求模块塞了。不过我们依然可以复制我们之前项目管理-接口库中 打开接口后，接口调试弹层自动填充好该接口数据的 那个函数。然后修改即可省掉很多精力。别忘了还要复制过来那个清空函数，以免之前的内容遗留。

我会把这段复杂繁复的代码修改好后，直接给大家，大家直接复制即可，有余力的可以自己再看一遍。

大家先不要着急看代码

作者先自己试着测试了一下：

现在看着 点击左侧记录，右侧就会自动变更了！

但是出乎作者意外的是，这个操作同时也带来了严重的bug。

记得这个第三方表格的bug，在之前我们就遇到过，但是当时没有深入的彻底解决，我们采用了刷新的方式，巧妙的绕过了这个bug。那现在怎么办呢？

我们其实依然可以绕过，也就是巧用刷新初始化。连clear清空上一个记录都不需要了。直接刷新后再显示即可。但是这样要怎么设计呢？答案就是动整个链路。

我们前面写的超链接函数

home_log_show

代码不用删除，一会还有用！

我们现在想的是 点击左侧记录后，不再直接调用home_log_show了。而是改成先去请求一个url，带上这个记录id，然后这个url调用一个类似我们进入home首页的函数，只是要多了一个记录id，这个函数根据记录id从数据库拿到完整请求数据再给用户返回这个welcome.html ，内部嵌套home.html，带上这个记录的完整id，然后我们右侧的请求模块各个输入框直接填入这些数据。从用户的感官来说，感觉不到什么。

首先我们先去改掉 俩处的请求记录a标签的href：

我们在的url设计为：/home_log/具体记录id/

好，我们去打开urls.py：

这里需要注意，我们要开始一个全新的概念设计。

就是 我们这个url依然调用的是home函数。

我们最早的/home/也调用的是这个home函数。

区别在于，这次的url带log_id了,但是我们预留的oid 已经用来装用户id了，那怎么办呢？这里我们再添加一个新参数就好了。。。

改成：

这样，我们正常进入首页时候，log_id是空的。当我们点击某记录方式进入首页的时候，log_id就有了。

因为我们新加了一个参数ooid，所以我们需要把这条链路的其他函数都加上型参ooid，以便正常流通。

urls.py中：

welcome.html中：

views.py中：

添加好了后，我们就有俩个传输用的参数了，以后其他功能也方便了许多。

现在应该没大问题了，我们继续去写child_json函数：

我们增加了对ooid 是否为空的分支判断，来决定返回的res中带不带这个log记录完整数据。

现在我们views.py的基本完活了，打开home.html，开始做前端了。

我们的前端现在已经不需要home_log_show函数了。所以删掉即可。

我们直接找到右侧的请求体html位置：

开始在里面逐个填入需要添加的东西。不过这里有些需要用到js来判断，因为不是所有的都是input让你直接填好就行，还有很多请求体，请求方式的特殊处理。

这也是给大家展示一个新的知识点，就是用小的js判断来决定html展示什么。

我们先把简单的几个input都填好：

看看效果：

看来是成功了，本节的内容已经很多了，下节课我们要处理的就是最后的，展示请求方式/请求体类型/请求体了～

当前进度代码：

链接: https://pan.baidu.com/s/17HkycbvbZSJ5yq9eRbzMRw 密码: jdwt