Django接口新增页面编写_2（十五）

做一个好看的页面真的是一件困难的事情，所以还是遵循复制后修改的原则，首先是借鉴httpbin页面的方式进行块状展开。

块状

从模版中找到类似的html代码：

块状

我们可以看到一下它的动态效果，可以自主的展开和合拢。蛮符合我们的要求的

但是里面只有一行内容，我们需要在里面放一个类似表格的输入框，所以继续找到如下表格

表格形式

通过组合之后就符合我们的要求了。
大概展示的效果如下：

最终效果

感觉符合整体的画风了。
下面来看看这一段让人头大的代码

从最前面部分开始好了，首先是接口名称和它的输入框

<label for="api-title">接口名称</label>
<input type="text" class="form-control" id="api-title" name="news-title" placeholder="请输入接口名称" >
<br>

虽然丢人的使用了br来进行换行，但是从一个实用主义的角度来看，先这样吧，不会CSS的我还能咋办。

然后是URL部分：

<div class="box box-default">
  <div class="box-header with-border">
    <h3 class="box-title">URL</h3>
    <div class="box-tools pull-right">
      <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
      </button>
    </div>
  </div>
  <div class="box-body">
    <div class="box-body">
      <table class="table table-bordered">
        <tbody>
        <label>请求方式：</label>
        <select class="select2 col-5"  tabindex="-1" aria-hidden="true">
          <option selected="selected">GET</option>
          <option>POST</option>
          <option>PUT</option>
          <option>DELETE</option>
        </select>
        <span class="select2 select2-container select2-container--default select2-container--below"
              dir="ltr" >
                    <span class="selection">
                        <span class="select2-selection__arrow" role="presentation">
                          <b role="presentation">
                        </b>
                        </span>
                      </span>
                    </span>
        <span class="dropdown-wrapper"
              aria-hidden="true"></span>
        <label>传输协议：</label>
        <select class="select2 col-5"  tabindex="-1" aria-hidden="true">
          <option selected="selected">http</option>
          <option>https</option>
        </select>
        <span class="select2 select2-container select2-container--default select2-container--below"
              dir="ltr" >
                    <span class="selection">
                        <span class="select2-selection__arrow" role="presentation">
                          <b role="presentation">
                        </b>
                        </span>
                      </span>
                    </span>
        <span class="dropdown-wrapper"
              aria-hidden="true"></span>
        <input type="text" class="form-control" id="add-url" name="news-title" placeholder="请输入URL"
               >
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="box-header with-border">
  <h3 class="box-title">URL</h3>
  <div class="box-tools pull-right">
    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
    </button>
  </div>
</div>

这一部分实现了

感兴趣可以通过查看监听点击操作查看JS干了什么事情

JS代码查看方式

进到URL的内部可以看到一个，相当于自成一个小世界。
label标签放展示的内容，input标签放输入框，select标签放下拉框
经过多次的测试之后就会发现摆放好了。

请求头部

请求头部部分增加了+和-的操作，可以按照需要进行新增键值对，不过JS部分代码还没写，所以这两个只是个简单的图标而已

图标

通过需改字体的大小就可以调整图标的大小了：
其他部分自行查看github上的代码吧～～
https://github.com/zx490336534/Zxapitest
欢迎关注我的公众号：zx94_11

公众号