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都填好:
下节课要处理的就是最后的,展示请求方式/请求体类型/请求体了~