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

zx钟

发布于 2019-07-19 14:24:23

9660

发布于 2019-07-19 14:24:23

文章被收录于专栏：测试游记测试游记

做一个好看的页面真的是一件困难的事情，所以还是遵循复制后修改的原则，首先是借鉴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干了什么事情