接口测试平台-55：首页重构-3
本节继续开发首页右侧的显示效果。打开home.html，继续在右边做那个快速请求的调试版。
1. 添加接口请求
去P_aps.html中复制修改即可。这个调试层是常显而不是之前点击具体接口才显示。显示后不需要显示show函数了，一直保持空内容即可。关于其中项目 接口 名字 id这些都不需要，公共请求头、项目公共变量这些项目纬度的更不要了，也没有什么关闭/保存按钮和对应函数了，整个颜色大小也要重新设置等等。代码如下：
<!-- 竖线右侧 -->
<div style="position: absolute;top: 100px;left: 380px;width: -webkit-calc(100% - 390px);">
{# 调试弹层及函数 #}
<ul class="nav navbar-nav" style="width: 98%">
<li>
<select id="ts_method" style="height: 40px;" class="form-control">
<option value="none"> 请求方式</option>
<option value="post" > POST</option>
<option value="get" > GET</option>
<option value="put" > PUT</option>
<option value="delete"> DELETE</option>
</select>
</li>
<li style="width: -webkit-calc(100% - 225px)">
<input id="ts_url" style="color: black;padding-left: 10px;width: 100%;height: 40px;" type="text" placeholder='url: 如 /abcd/efgh/' value="">
</li>
<li >
<button οnclick="ts_send()" type="button"
style="height: 40px;width: 120px;"
class="btn btn-default"><span style="font-size: large">Send</span></button>
</li>
</ul>
<br><br><br>
<ul class="nav navbar-nav" style="width: 98%">
<li style=" width: -webkit-calc(100% - 63px)">
<input id="ts_host" style="color: black;padding-left: 10px;width: 100%;height: 40px;" type="text" placeholder='host: 如http(s)://xxxx.ccc.com' value="">
</li>
<li >
<button type="button"
style="height: 40px;width: 60px;"
class="btn btn-default"><span>Clear</span></button>
</li>
</ul>
<br><br><br>
<ul class="nav navbar-nav" style="width: 98%">
<li style="width: -webkit-calc(100% - 63px)">
<input id="ts_header" style="color: black;padding-left: 10px;width: 100%;height: 40px;" type="text"
placeholder='header请求头：如{"Content":"application/json"}' value="">
</li>
<li >
<button type="button"
style="height: 40px;width: 60px;"
class="btn btn-default"><span>Clear</span></button>
</li>
</ul>
<br><br><br>
<ul id="myTab" class="nav nav-tabs" >
<li class="active"><a id="click_none" href="#none" data-toggle="tab" >none</a></li>
<li ><a href="#form-data" data-toggle="tab" >form-data</a></li>
<li ><a href="#x-www-form-urlencoded" data-toggle="tab" >x-www-form-urlencoded</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">raw <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#Text" tabindex="-1" data-toggle="tab">Text</a></li>
<li><a href="#JavaScript" tabindex="-1" data-toggle="tab">JavaScript</a></li>
<li><a href="#Json" tabindex="-1" data-toggle="tab">Json</a></li>
<li><a href="#Html" tabindex="-1" data-toggle="tab">Html</a></li>
<li><a href="#Xml" tabindex="-1" data-toggle="tab">Xml</a></li>
</ul>
</li>
<li ><a href="#response" data-toggle="tab" >返回体</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="none" style="text-align: center;color: grey">
<h3>这个请求将不会携带任何请求体</h3>
<h5>This request will not carry any request-body</h5>
</div>
<div class="tab-pane fade" id="form-data">
<div class="table-responsive" style="width: 98%;color: black">
<table class="table table-bordered table-striped" id="mytable" style="background-color:white">
<thead style="color: #337ab7;font-size: x-small">
<tr>
<td style="width: 30%">Key</td>
<td style="width: 50%">Value</td>
</tr>
</thead>
<tbody id="mytbody">
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-default" id="add"><i class="fa fa-plus"></i> 添加新参数</button>
<script>window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')</script>
<script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>
</div>
<div class="tab-pane fade" id="x-www-form-urlencoded">
<div class="table-responsive" style="width: 98%;color: black">
<table class="table table-bordered table-striped" id="mytable2" style="background-color:white">
<thead style="color: #337ab7;font-size: x-small">
<tr>
<td style="width: 30%">Key</td>
<td style="width: 50%">Value</td>
</tr>
</thead>
<tbody id="mytbody2">
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-default" id="add2"><i class="fa fa-plus"></i> 添加新参数</button>
<script>window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')</script>
<script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>
</div>
<div class="tab-pane fade" id="Text">
<textarea name="" id="raw_Text" style="color: black;width: 98%;height: 300px"></textarea>
</div>
<div class="tab-pane fade" id="JavaScript">
<textarea name="" id="raw_JavaScript" style="color: black;width: 98%;height: 300px"></textarea>
</div>
<div class="tab-pane fade" id="Json">
<textarea name="" id="raw_Json" style="color: black;width: 98%;height: 300px"></textarea>
</div>
<div class="tab-pane fade" id="Html">
<textarea name="" id="raw_Html" style="color: black;width: 98%;height: 300px"></textarea>
</div>
<div class="tab-pane fade" id="Xml">
<textarea name="" id="raw_Xml" style="color: black;width: 98%;height: 300px"></textarea>
</div>
<div class="tab-pane fade" id="response">
<textarea name="" id="ts_response_body" disabled="disabled" style="background-color: #e4f3f5;color: black;width: 98%;height: 300px"></textarea>
</div>
</div>
<br>
</div>
看看效果：
前端的html已经复制过来了，至于需不需要再改什么，之后再研究。
当务之急把send函数 和 控制这个form-data / x-www-form-urlencoded的 js函数都给弄过来。
<script>
$('#mytable').SetEditable({
$addButton: $('#add'),
});
$('#mytable2').SetEditable({
$addButton: $('#add2'),
});
function ts_send() {
// 获取接口的所有数据
var ts_method = document.getElementById('ts_method').value;
var ts_url = document.getElementById('ts_url').value;
var ts_host = document.getElementById('ts_host').value;
var ts_header = document.getElementById('ts_header').value;
// 判断顶部的数据是否填充完
if (ts_method === 'none') {
alert('请选择请求方式！');
return
}
if (ts_url === '') {
alert('请输入url！');
return
}
if (ts_host === '') {
alert('请输入host！');
return
}
//判断关键数据是否符合规则
if (ts_host.slice(0,7) !== 'http://' && ts_host.slice(0,8) !== 'https://') {
alert('host必须以http://或https://开头！');return
}
if (ts_header !== '') {
try {
JSON.parse(ts_header)
}catch (e) {
alert('header请求头不符合json规范！');
return
}
}
var ts_body_method = $('ul#myTab li[class="active"]')[0].innerText;
if (ts_body_method === 'none') {
var ts_api_body = ''
}
if (ts_body_method === 'form-data') {
var ts_api_body = []; //新建这个空列表用来存放后续的数据
var tbody_ = $("table#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
ts_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
}
ts_api_body = JSON.stringify(ts_api_body);
}
if (ts_body_method === 'x-www-form-urlencoded'){
var ts_api_body = []; //新建这个空列表用来存放后续的数据
var tbody_ = $("table#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
ts_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
}
ts_api_body = JSON.stringify(ts_api_body);
}
if(ts_body_method === 'Text'){
var ts_api_body = document.getElementById('raw_Text').value;
}
if(ts_body_method === 'JavaScript'){
var ts_api_body = document.getElementById('raw_JavaScript').value;
}
if(ts_body_method === 'Json'){
var ts_api_body = document.getElementById('raw_Json').value;
}
if(ts_body_method === 'Html'){
var ts_api_body = document.getElementById('raw_Html').value;
}
if(ts_body_method === 'Xml'){
var ts_api_body = document.getElementById('raw_Xml').value;
}
// 发送请求给后台
$.get('/api_send_home/',{
'ts_method':ts_method,
'ts_url':ts_url,
'ts_host':ts_host,
'ts_header':ts_header,
'ts_body_method':ts_body_method,
'ts_api_body':ts_api_body
},function (ret) {
$("li a[href=#response]")[0].click(); // 点击一下返回体按钮
document.getElementById('ts_response_body').value = ret; // 把返回值显示到返回值多行文本框中
})
}
</script>
目前整理成这样，不过不保证后续是不是需要修改。
注意，在$.get()的url后面加了个_home，来表示这个请求是首页发出去的，并不是项目管理中接口库发出的。
2. 添加映射：
urls.py：
url(r'^api_send_home/$', api_send_home), # 首页发送请求
views.py：
# 首页发送请求
def Api_send_home(request):
# 提取所有数据
print('qwe')
ts_method = request.GET['ts_method']
ts_url = request.GET['ts_url']
ts_host = request.GET['ts_host']
ts_header = request.GET['ts_header']
ts_body_method = request.GET['ts_body_method']
ts_api_body = request.GET['ts_api_body']
# 发送请求获取返回值
try:
header = json.loads(ts_header) # 处理header
except:
return HttpResponse('请求头不符合json格式！')
# 拼接完整url
if ts_host[-1] == '/' and ts_url[0] =='/': # 都有/
url = ts_host[:-1] + ts_url
elif ts_host[-1] != '/' and ts_url[0] !='/': # 都没有/
url = ts_host + '/' + ts_url
else: # 肯定有一个有/
url = ts_host + ts_url
try:
if ts_body_method == 'none':
response = requests.request(ts_method.upper(), url, headers=header, data={} )
elif ts_body_method == 'form-data':
files = []
payload = {}
for i in eval(ts_api_body):
payload[i[0]] = i[1]
response = requests.request(ts_method.upper(), url, headers=header, data=payload, files=files )
elif ts_body_method == 'x-www-form-urlencoded':
header['Content-Type'] = 'application/x-www-form-urlencoded'
payload = {}
for i in eval(ts_api_body):
payload[i[0]] = i[1]
response = requests.request(ts_method.upper(), url, headers=header, data=payload )
else: # 这时肯定是raw的五个子选项：
if ts_body_method == 'Text':
header['Content-Type'] = 'text/plain'
if ts_body_method == 'JavaScript':
header['Content-Type'] = 'text/plain'
if ts_body_method == 'Json':
header['Content-Type'] = 'text/plain'
if ts_body_method == 'Html':
header['Content-Type'] = 'text/plain'
if ts_body_method == 'Xml':
header['Content-Type'] = 'text/plain'
response = requests.request(ts_method.upper(), url, headers=header, data=ts_api_body.encode('utf-8'))
# 把返回值传递给前端页面
response.encoding = "utf-8"
return HttpResponse(response.text)
except Exception as e:
return HttpResponse(str(e))
删掉了接口idname和最后一次请求体的设计，一来是简化代码，二来是营造一种体验差异化。告诉使用者，要想获得完整体验就去进入项目管理创建接口吧。写完之后，重启服务，刷新页面，填几个数据，试一下：
看来是打通了，没有引起后台/页面 报错即可。
下节课要让左侧的请求记录和右侧的请求模块 联动起来！