其实原因是，因为这是完全重新开发的一套平台，虽然简易，但是作者完全没有对着以前的成熟平台代码，所以难度还是有的。
先打开我们的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))
好了，写完之后，我们重启服务，刷新页面，填几个数据，试一下：
看来是打通了，没有引起后台/页面 报错即可。
本节课到这就为止了，下节课我们要让左侧的请求记录和右侧的请求模块 联动起来！
