本节我们要继续做登录态接口的js函数。
首先我们要修复上节的一个bug,就是展示这个登陆态函数的bug,由于作者的疏忽,导致加错了login_ :
改好之后我们继续开发,先是保存函数吧:
这依然是一个比较大的段落代码,分两步,1-获取,2-发送。
我依然是复制了普通接口的保存函数进行了全部替换成login_并增删了一些字段的方法,道理很容易懂,但是修改这么一大段代码仍然是非常麻烦,稍不留神就会出错,所以大家复制我的成品代码即可(若是之后发现bug请及时反馈):
function login_save(){
// 获取所有接口设置数据
var login_method = document.getElementById('login_method').value ;
var login_url = document.getElementById('login__url').value ;
var login_host = document.getElementById('login__host').value ;
var login_header = document.getElementById('login_header').value ;
var login_response_set = document.getElementById('login_response_set').value;
// 判断顶部的数据是否填充完
if(ts_method == 'none'){alert('请选择请求方式!');return}
if(ts_url == ''){alert('请输入url!');return}
if(ts_host == ''){alert('请输入host!');return}
//判断关键数据是否符合规则
if(login_host.slice(0,7) != 'http://' && login_host.slice(0,8) != 'https://' && login_host.slice(0,4) !='全局域名' ){
alert('host必须以http://或https://开头!');return
}
if(login_header != ''){
try {
JSON.parse(login_header)
}catch (e) {
alert('header请求头不符合json规范!');
return
}
}
var login_body_method = $('ul#login_myTab li[class="active"]')[0].innerText;
if(login_body_method == '返回体'){
alert('请切换到请求体tab再保存!')
return
}
if(login_body_method == 'none'){
var login_api_body = ''
}
if(login_body_method == 'form-data'){
var login_api_body = []; //新建这个空列表用来存放后续的数据
var tbody_ = $("table#login_mytable tbody")[0]; //获取该表格的内容部分
var trlist = tbody_.children ; //获取下面所有tr,每个tr就是一个键值对实际上
for(var i=0;i<trlist.length;i++) {
var tdarr = trlist[i].children; // 获取tr下的俩个td
var key = tdarr[0].innerText; // 获取key
var value = tdarr[1].innerText; // 获取value
login_api_body.push([key, value]);// 作为一个数组,存放到这个大数组里。
}
var login_api_body = JSON.stringify(login_api_body);
}
if(login_body_method == 'x-www-form-urlencoded'){
var login_api_body = []; //新建这个空列表用来存放后续的数据
var tbody_ = $("table#login_mytable2 tbody")[0]; //获取该表格的内容部分
var trlist = tbody_.children ; //获取下面所有tr,每个tr就是一个键值对实际上
for(var i=0;i<trlist.length;i++) {
var tdarr = trlist[i].children; // 获取tr下的俩个td
var key = tdarr[0].innerText; // 获取key
var value = tdarr[1].innerText; // 获取value
login_api_body.push([key, value]);// 作为一个数组,存放到这个大数组里。
}
var login_api_body = JSON.stringify(login_api_body);
}
if(login_body_method == 'Text'){
var login_api_body = document.getElementById('login_raw_Text').value;
}
if(login_body_method == 'JavaScript'){
var login_api_body = document.getElementById('login_raw_JavaScript').value;
}
if(login_body_method == 'Json'){
var login_api_body = document.getElementById('login_raw_Json').value;
}
if(login_body_method == 'Html'){
var login_api_body = document.getElementById('login_raw_Html').value;
}
if(login_body_method == 'Xml'){
var login_api_body = document.getElementById('login_raw_Xml').value;
}
if(login_body_method == 'GraphQL'){
body_plan_G_Q = document.getElementById('login_body_plan_G_Q').value;
body_plan_G_G = document.getElementById('login_body_plan_G_G').value;
var login_api_body = body_plan_G_Q+ '*WQRF*' + body_plan_G_G
}
$.get('/project_login_save/',{
'project_id':'{{ project.id }}',
'login_method':login_method,
'login_url':login_url,
'login_host':login_host,
'login_header':login_header,
'login_body_method':login_body_method,
'login_api_body':login_api_body,
'login_response_set':login_response_set,
},function (ret) {
document.location.reload();
})
}
代码中我设计了一个路由 用来保存这个登陆态接口设置,现在就去urls.py中进行映射书写:
然后去views.py中进行开发这个函数,当然内容很简单:
# 保存登陆态接口
def project_login_save(request):
# 提取所有数据
project_id = request.GET['project_id']
login_method = request.GET['login_method']
login_url = request.GET['login_url']
login_host = request.GET['login_host']
login_header = request.GET['login_header']
login_body_method = request.GET['login_body_method']
login_api_body = request.GET['login_api_body']
login_response_set = request.GET['login_response_set']
# 保存数据
DB_login.objects.filter(project_id=project_id).update(
api_method=login_method,
api_url = login_url,
api_header = login_header,
api_host = login_host,
body_method = login_body_method,
api_body = login_api_body,
set = login_response_set
)
# 返回
return HttpResponse('success')
搞定之后我们测试一下:
嗯保存,重新打开 都正常。所以这里功能就ok了。
本节内容到此结束。
下节课搞定:发送请求的调试功能前后端内容