首先先改正一下 榜一大哥提出的bug,就是当选择完公共请求头后取消选择,然后再请求就会报错的问题:
在views.py中进行改正,在Api_send函数中加了一个if判断:if i !='' :
这里再次感谢
欢迎其他小伙伴踊跃提出bug,这可是出名的好机会呀~
本节我们加快速度和内容,继续讲登陆态接口部分。在我们开发script部分之前,我们需要先去数据层,去构建出这个登陆态的表,然后通过views.py把相关数据带给前端html,然后才能去html中完善script部分。
打开models.py,增加下列类:
这就是我们的项目登陆态接口记录表。
然后执行俩句命令同步给数据库:
然后去admin.py中注册:
然后我们现在回到html中,也就是P_apis.html中:
找到这个login_show 函数:
然后我们去url.py中加入这个获取链接:
最后去views.py中搞定这个函数:
我们重启服务,刷新页面,打开登陆态接口发现没报错,即可。
我们现在可以去后台,记住自己的项目id,在后台新建一个符合的项目登陆态接口记录:
然后我们再试试看:
如上图,打开登陆态设置页面的时候,就可以看到consoloe.log中输出的内容。
然后我们继续写这个打开页面的js函数,给拿到的数据 都展示到设置页面上:
其中全部进行了加login_的设置,因为代码量大且极易出错,所以现在给大家可以复制的代码:
function login_show() { //显示蒙层,并设置好蒙层的层级关系,让其在调试层之下,其他元素之上 document.getElementById('mengceng').style.display='block'; document.getElementById('mengceng').style.zIndex='998'; document.getElementById('login_set_div').style.zIndex='999'; document.getElementById('login_set_div').style.display = 'block'; $.get("/project_get_login/",{ "project_id":"{{ project.id }}" },function (ret) { console.log(ret); // 运行第三方表格插件的函数: $('#login_mytable').SetEditable({ $addButton: $('#login_add'), }); $('#login_mytable2').SetEditable({ $addButton: $('#login_add2'), }); document.getElementById('login_method').value = ret.api_method; document.getElementById('login_url').value = ret.api_url; document.getElementById('login_host').value = ret.api_host; document.getElementById('login_header').value = ret.api_header; document.getElementById('login_response_set').value = ret.set; // 请求体编码格式 var body_method = '#'+ret.body_method; $("li a[href="+body_method+"]").click(); // 请求体显示 if(ret.body_method == 'login_Text'){ document.getElementById('login_raw_Text').value = ret.api_body; } if(ret.body_method == 'login_JavaScript'){ document.getElementById('login_raw_JavaScript').value = ret.api_body; } if(ret.body_method == 'login_Json'){ document.getElementById('login_raw_Json').value = ret.api_body; } if(ret.body_method == 'login_Html'){ document.getElementById('login_raw_Html').value = ret.api_body; } if(ret.body_method == 'login_Xml'){ document.getElementById('login_raw_Xml').value = ret.api_body; } if(ret.body_method == 'login_form-data'){ var tbody = document.getElementById('login_mytbody'); // 定位表格中的tbody部分 body = eval(ret.api_body); //把这个像列表的字符串请求体变成真正的列表 for(var i=0;i<body.length;i++){ // 遍历这个请求体列表 key = body[i][0]; //拿出每一个键值对的key value = body[i][1];//拿出每一个键值对的value var childs_tr = tbody.children ;//获取到这个表格下面所有的tr组成的大列表 // 每个tr下的children得到的是 td列表,只有俩个。 childs_tr[i].children[0].innerText = key; //第一个td放key childs_tr[i].children[1].innerText = value;//第二个td放value //判断是否是最后一次遍历,来决定是否点击新增参数按钮 if(i<body.length-1){ document.getElementById('login_add').click() } } } if(ret.body_method == 'login_x-www-form-urlencoded'){ var tbody = document.getElementById('login_mytbody2'); // 定位表格中的tbody部分 body = eval(ret.api_body); //把这个像列表的字符串请求体变成真正的列表 for(var i=0;i<body.length;i++){ // 遍历这个请求体列表 key = body[i][0]; //拿出每一个键值对的key value = body[i][1];//拿出每一个键值对的value var childs_tr = tbody.children ;//获取到这个表格下面所有的tr组成的大列表 // 每个tr下的children得到的是 td列表,只有俩个。 childs_tr[i].children[0].innerText = key; //第一个td放key childs_tr[i].children[1].innerText = value;//第二个td放value //判断是否是最后一次遍历,来决定是否点击新增参数按钮 if(i<body.length-1){ document.getElementById('login_add2').click() } } } if(ret.body_method == "login_GraphQL"){ body_plan_G_Q = ret.api_body.split('*WQRF*')[0]; body_plan_G_G = ret.api_body.split('*WQRF*')[1]; document.getElementById('login_body_plan_G_Q').value =body_plan_G_Q; document.getElementById('login_body_plan_G_G').value = body_plan_G_G; } }) }
然后刷新页面,再打开登陆态设置看看:
最后我们再加入取消按钮的js函数:
这回就可以用刷新页面的方法关闭这个设置层了。