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

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

块状

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

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

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

表格形式
通过组合之后就符合我们的要求了。
大概展示的效果如下：
最终效果
感觉符合整体的画风了。
下面来看看这一段让人头大的代码

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

<label for="api-title">接口名称</label>
<input type="text" class="form-control" id="api-title" name="news-title" placeholder="请输入接口名称" style="width: 30%; border-radius:5px;">
<br>

虽然丢人的使用了br来进行换行，但是从一个实用主义的角度来看，先这样吧，不会CSS的我还能咋办。
里面使用style="width: 30%; border-radius:5px;"来调整输入框的大小为30%，输入框是圆角的。之前的直角太硬了，看上去很不舒服。

然后是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" style="width: 20%;" 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" style="width: 100%;">
                    <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" style="width: 20%;" 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" style="width: 100%;">
                    <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"
               style="border-radius: 5px">
        </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>

这一部分实现了
当class是box box-default collapsed-box的时候横条会自动隐藏，当box-header with-border的时候会自动显示，这个当然是通过测试发现的，测试方法可以看如下动图，分别是点击小图标后的显示与隐藏导致的class变化

显示与隐藏
感兴趣可以通过查看监听点击操作查看JS干了什么事情
JS代码查看方式
进到URL的内部可以看到一个<tbody>，相当于自成一个小世界。
label标签放展示的内容，input标签放输入框，select标签放下拉框
经过多次的测试之后就会发现摆放好了。
请求头部
请求头部部分增加了+和-的操作，可以按照需要进行新增键值对，不过JS部分代码还没写，所以这两个只是个简单的图标而已
图标
通过需改字体的大小就可以调整图标的大小了：style="font-size:25px;"
其他部分自行查看github上的代码吧～～
https://github.com/zx490336534/Zxapitest
欢迎关注我的公众号：zx94_11
公众号