接口测试平台-57：首页重构-5

1. 优化

进入首页后，这个接口测试平台的欢迎语能不能别删，不然都不知道这是干啥的平台，这里疏忽了，所以本节先加上。

打开home.html：在body内的最顶部 写个h2标题即可

 

2. 点击左侧记录，右侧自动变

打开之前写的home.html中，左侧记录都是用a标签超链接来显示请求记录。那么href属性，指定的是home_log_show()的js函数，传入这个记录的id，这个函数还没有写。

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

 

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

之后这个函数要做些什么呢？首先接收记录id，根据id去后台拿到完整的请求数据，把数据展示到右侧请求模块等。

所以代码写成这样：

// 左侧记录点击后
function home_log_show(id) {
    $.get('/get_api_log_home/', {
        "log_id": id
    }, function (ret) {
        console.log(ret)
        // 改变右侧的请求模块
    })
}

 

3. 添加映射

urls.py：

url(r'^get_api_log_home/$', get_api_log_home),  # 获取完整的单一的请求记录数据

views.py：

# 获取完整的单一的请求记录数据
def get_api_log_home(request):
    log_id = request.GET['log_id']

    return HttpResponse()

 

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

# 获取完整的单一的请求记录数据
def get_api_log_home(request):
    log_id = request.GET['log_id']
    log = DB_apis_log.objects.filter(id=log_id)
    ret = {"log": list(log.values())[0]}
    print(ret)
    return HttpResponse(json.dumps(ret), content_type='application/json')

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

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

 

4. 前端home.html补充

开始写这个复杂的让右侧变化代码：

// 左侧记录点击后
function home_log_show(id) {
    $.get('/get_api_log_home/', {
        "log_id": id
    }, function (ret) {
        // 改变右侧的请求模块
        res = eval(ret);  // 此时res成了一个字典
        log = res.log;  // 此时log获取了这个字典中的log，也就是目标记录的完整请求数据

        // 解析来开始往右侧塞
    })
}

 

拿到目标接口的全部数据后，就是往右边请求模块塞了。

不过依然可以复制之前项目管理-接口库中打开接口后，接口调试弹层自动填充好该接口数据的那个函数，然后修改。

别忘了还要复制过来那个清空函数，以免之前的内容遗留。（此处先不发代码）

 

我先自己试着测试了一下（仅记录）：

 

5. 优化回填右侧数据

之前就遇到过的第三方表格bug，当时采用了刷新的方式。那现在怎么办呢？其实依然巧用刷新初始化，连clear清空上一个记录都不需要。直接刷新后再显示即可。但是这样要怎么设计呢？答案就是动整个链路。

前面写的超链接函数：home_log_show() 代码不用删除，一会还有用！

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

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

 

添加映射：

urls.py：

url(r'^home_log/(?P<log_id>.*)/$', home),  # 再次进入首页，这次要带着请求记录

这个url依然调用的是home函数，最早的/home/也调用的是这个home函数。

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

# 首页
@login_required
def home(request, log_id=''):
    return render(request, 'welcome.html', {"whichHTML": "home.html", "oid": request.user.id, "ooid": log_id})

这样正常进入首页时，log_id是空的。当点击某记录方式进入首页时，log_id就有了。因为新加了参数ooid，所以需要把这条链路的其他函数都加上型参ooid，以便正常流通。

urls.py：

welcome.html：

views.py：

红框部分代码：

if ooid == '':
    res = {"hrefs": data, "home_log": home_log}
else:
    log = DB_apis_log.objects.filter(id=ooid)[0]
    res = {"hrefs": data, "home_log": home_log, "log": log}

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

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

 

6. 回填右侧内容

打开home.html，前端现在已经不需要home_log_show函数了。所以删掉即可。找到右侧的请求体html位置：

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

 

 

下节课要处理的就是最后的，展示请求方式/请求体类型/请求体了～