接口测试平台代码实现56:首页重构-4
本节继续开发首页右侧的显示效果，可能有的同学觉得这里节奏太慢了，不怕，咱养肥再看。
其实原因是，因为这是完全重新开发的一套平台，虽然简易，但是作者完全没有对着以前的成熟平台代码，所以难度还是有的。
先打开我们的home.html,继续在右边做那个快速请求的调试版， 大家想，这个功能需要一大堆的输入框按钮，而且因为是在屏幕右侧，我们直接写的话，肯定会被安排到左侧请求记录的下方。所以我们一开始就要弄一个大div，把它的位置写死，飘起来，脱离文档流，固定在右侧。然后这一大堆输入框按钮 就放在这个div中就好了，最简单好理解的布局。
我们先写出这个巨大的div
它距离左边是固定的380px，宽度是浏览器总长度-390px。
然后我们在里面添加那一套接口请求的东东，我们直接去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 onclick="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函数都给弄过来。
现在我们复制过来后，就要对这个ts_send()函数进行修改了。我们需要去掉比如获取接口名字id这些代码，而且请求的接口我们也不能沿用旧的了，需要重新创造一条链路。修改后的ts_send()如下：
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]").click(); //点击一下返回体按钮
document.getElementById('ts_response_body').value = ret ;//把返回值显示到返回值多行文本框中
})
}目前整理成这样，不过不保证后续是不是需要修改。注意我把$.get()的url后面加了个_home,来表示这个请求是首页发出去的，并不是项目管理中接口库发出的。
我们现在要去urls.py中写好映射：
然后去views.py中 写好这个Api_send_home函数，内容大部分都是复制Api_send，我们删掉了接口idname,和最后一次请求体的设计，一来是简化代码，二来是营造一种体验差异化。告诉使用者，要想获得完整体验就去进入项目管理创建接口吧。
代码如下，直接复制即可：
# 首页发送请求
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))
好了，写完之后，我们重启服务，刷新页面，填几个数据，试一下：
看来是打通了，没有引起后台/页面 报错即可。
本节课到这就为止了，下节课我们要让左侧的请求记录和右侧的请求模块 联动起来！
还能坚持到现在的小伙伴点个赞吧。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-10-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
TAPD 敏捷项目管理
TAPD（Tencent Agile Product Development）是源自于腾讯的敏捷研发协作平台，提供贯穿敏捷研发生命周期的一站式服务。覆盖从产品概念形成、产品规划、需求分析、项目规划和跟踪、质量测试到构建发布、用户反馈跟踪的产品研发全生命周期，提供了灵活的可定制化应用和强大的集成能力，帮助研发团队有效地管理需求、资源、进度和质量，规范和改进产品研发过程，提高研发效率和产品质量。
腾讯云开发者
