我们本节来制作登陆态接口的请求js函数,
为什么要制作这个调试请求功能?
这个功能在正常使用中是不会用到的,这里只用来给调试用,也就是测试。
确保这个登陆态接口是能够正常请求返回并成功提取 需要用到的参数的。
之后普通接口自动添加登陆态的时候,走的其实是另一套类似的新函数。
打开P_apis.html,给Send按钮加上onclick并且下面新建login_send函数:
具体的代码呢,和普通接口调试层类似,复制过来改改即可,当然我仍然会先改好,再贴可复制的代码:
function login_send() {
// 获取接口的所有数据
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(login_method == 'none'){alert('请选择请求方式!');return}
if(login_url == ''){alert('请输入url!');return}
if(login_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]);// 作为一个数组,存放到这个大数组里。
}
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]);// 作为一个数组,存放到这个大数组里。
}
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_send/',{
'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) {
$("li a[href=#login_response]").click(); //点击一下返回体按钮
document.getElementById('login_response_body').value = ret ;//把返回值显示到返回值多行文本框中
})
}
代码中注意,增加了返回值提取设置字段:login_response_set
然后我们去urls.py中进行设置:
然后去views.py中进行写好这个比较复杂的方法吧~
我们现在来思考下,这个方法要做什么事?
好现在开始写,由于代码量太大,并且大部分是复制首页发送请求的代码改改,所以大家依然可以复制:
# 调试登陆态接口
def project_login_send(request):
# 第一步,获取前端数据
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']
# 第二步,发送请求
try:
header = json.loads(login_header) #处理header
except:
return HttpResponse('请求头不符合json格式!')
# 拼接完整url
if login_host[-1] == '/' and login_url[0] =='/': #都有/
url = login_host[:-1] + login_url
elif login_host[-1] != '/' and login_url[0] !='/': #都没有/
url = login_host+ '/' + login_url
else: #肯定有一个有/
url = login_host + login_url
try:
if login_body_method == 'none':
response = requests.request(login_method.upper(), url, headers=header, data={} )
elif login_body_method == 'form-data':
files = []
payload = {}
for i in eval(login_api_body):
payload[i[0]] = i[1]
response = requests.request(login_method.upper(), url, headers=header, data=payload, files=files )
elif login_body_method == 'x-www-form-urlencoded':
header['Content-Type'] = 'application/x-www-form-urlencoded'
payload = {}
for i in eval(login_api_body):
payload[i[0]] = i[1]
response = requests.request(login_method.upper(), url, headers=header, data=payload )
elif login_body_method == 'GraphQL':
header['Content-Type'] = 'application/json'
query = login_api_body.split('*WQRF*')[0]
graphql = login_api_body.split('*WQRF*')[1]
try:
eval(graphql)
except:
graphql = '{}'
payload = '{"query":"%s","variables":%s}' % (query, graphql)
response = requests.request(login_method.upper(), url, headers=header, data=payload )
else: #这时肯定是raw的五个子选项:
if login_body_method == 'Text':
header['Content-Type'] = 'text/plain'
if login_body_method == 'JavaScript':
header['Content-Type'] = 'text/plain'
if login_body_method == 'Json':
header['Content-Type'] = 'text/plain'
if login_body_method == 'Html':
header['Content-Type'] = 'text/plain'
if login_body_method == 'Xml':
header['Content-Type'] = 'text/plain'
response = requests.request(login_method.upper(), url, headers=header, data=login_api_body.encode('utf-8'))
# 把返回值传递给前端页面
response.encoding = "utf-8"
DB_host.objects.update_or_create(host=login_host)
res = response.json()
# 第三步,对返回值进行提取
get_res = '' #声明提取结果存放
for i in login_response_set.split('\n'):
if i == "":
continue
else:
i = i.replace(' ','')
key = i.split('=')[0] #拿出key
path = i.split('=')[1] #拿出路径
value = res
for j in path.split('/')[1:]:
value = value[j]
get_res += key + '="' + value +'"\n'
# 第四步,返回前端
end_res = {"response":response.text,"get_res":get_res}
return HttpResponse(json.dumps(end_res),content_type='application/json')
except Exception as e:
end_res = {"response":str(e),"get_res":''}
return HttpResponse(json.dumps(end_res),content_type='application/json')
注意,上面的最后 我用了一个字典装好数据返回给前端了。前端要进行对应解析。所以回到P_apis.html中,这个js函数的返回处理部分 改成了如下红线格式即可。
好了。到这里我们先告一段落。