vb.net form 最大化按钮 代码_接口测试平台代码实现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" > POSToption>                    <option value="get" > GEToption>                    <option value="put" > PUToption>                    <option value="delete"> DELETEoption>                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">Sendspan>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>Clearspan>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>Clearspan>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" >nonea>li>            <li ><a href="#form-data" data-toggle="tab" >form-dataa>li>            <li ><a href="#x-www-form-urlencoded" data-toggle="tab" >x-www-form-urlencodeda>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">Texta>li>                    <li><a href="#JavaScript" tabindex="-1" data-toggle="tab">JavaScripta>li>                    <li><a href="#Json" tabindex="-1" data-toggle="tab">Jsona>li>                    <li><a href="#Html" tabindex="-1" data-toggle="tab">Htmla>li>                    <li><a href="#Xml" tabindex="-1" data-toggle="tab">Xmla>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-bodyh5>            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%">Keytd>                            <td style="width: 50%">Valuetd>                          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%">Keytd>                            <td style="width: 50%">Valuetd>                          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[]')[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                    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                    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))

好了，写完之后，我们重启服务，刷新页面，填几个数据，试一下：

看来是打通了，没有引起后台/页面 报错即可。

本节课到这就为止了，下节课我们要让左侧的请求记录和右侧的请求模块 联动起来！

还能坚持到现在的小伙伴点个赞吧。