Django的接口新增页面的前端代码（十）

本次来写一下接口新增页面，为了方便管理接口，决定采用postman的文件夹存放的形式来存放，这样我们就需要增加一个接口集管理的页面。
复制一下接口新增部分的html

<li>
  <a href="#">
    <i class="fa fa-cogs"></i>
    <span>接口集管理</span>
  </a>
</li>
<li>
  <a href="#">
    <i class="fa fa-cogs"></i>
    <span>接口新增</span>
  </a>
</li>

刷新一下页面可以看到效果

展示效果
但是明显有点问题！
就是怎么可以用一样的图标呢。
我们从箱底翻出AdminLTE-2.4.5
AdminLTE-2.4.5
打开index.html这个宝库，找到图标库。
图标库
然后从中挑选出喜欢的图标来进行替换。
所以我随便挑了fa-clone
图标
修改图中所在的位置：
修改
再次刷新页面就可以看到新的图标了
新图标
新建一个文件callections.html继承于base.html

{% extends 'index/base.html' %}

{% block title %}
  接口管理平台-接口集管理
{% endblock %}

{% block content_header %}
  接口相关
{% endblock %}

{% block header_option_desc %}
  接口集管理
{% endblock %}

大致效果
在脑海中形成如上的一副结构图，然后我们就用代码实现它
记得我们之前在base.html里面挖的{% block content %}坑吧
填上它！

{% block content %}
  <div class="row">
    <div class="col-md-12 col-xs-12 col-sm-12">
      <div class="box box-primary">
        <div class="box-header">
          <button class="btn btn-primary pull-right" id="btn-add-tag">新建接口集</button>
        </div>
        <div class="box-body">
          <table class="table table-bordered table-hover">
            <thead>
            <tr>
              <th>接口集名称</th>
              <th>接口数量</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for one_tag in tags %}
              <tr data-id="{{ one_tag.id }}" data-name="{{ one_tag.name }}">
                <td>{{ one_tag.name }}</td>
                <td>{{ one_tag.num_news }}</td>
                <td>
                  <button class="btn btn-xs btn-warning btn-edit">编辑</button>
                  <button class="btn btn-xs btn-danger btn-del">删除</button>
                </td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

为了看到效果，我们还需要使用get来进行渲染
在apps/workspace/views.py里新建一个类视图

class CallectionsView(View):
    def get(self, request):
        return render(request, 'index/callections.html')

然后去apps/workspace/urls.py里面加上它的路由
path('callections/', views.CallectionsView.as_view(), name='callections'),
最后去base页面找到接口集管理的a标签，将它修改为
<a href={% url 'callections' %}>
这样我们就完成来html页面的编写
之后会动态的从数据库中读取，并使用for循环生成展示。

接下来编写前端JS相关代码
在本页面应该有三个按钮对应三个主要的操作：新建，编辑，删除。
首先分析一下新建：
使用ID找到对应的新增按钮：
let $tagAdd = $("#btn-add-tag");
然后是监听它的点击事件：
$tagAdd.click(function () {}
本次使用post请求发送ajax请求
成功的话返回接口集名称添加成功，失败返回服务器超时，请重试！
所以新增部分代码如下：

// 添加
    let $tagAdd = $("#btn-add-tag");  // 1. 获取添加按钮
    $tagAdd.click(function () {   // 2. 点击事件
        fAlert.alertOneInput({
            title: "请输入接口集名称",
            text: "长度限制在20字以内",
            placeholder: "请输入接口集名称",
            confirmCallback: function confirmCallback(inputVal) {
                console.log(inputVal);

                if (inputVal === "") {
                    swal.showInputError('接口集名称不能为空');
                    return false;
                }

                let sDataParams = {
                    "name": inputVal
                };

                $.ajax({
                    // 请求地址
                    url: "/callections/",  // url尾部需要添加/
                    // 请求方式
                    type: "POST",
                    data: JSON.stringify(sDataParams),
                    // 请求内容的数据类型（前端发给后端的格式）
                    contentType: "application/json; charset=utf-8",
                    // 响应数据的格式（后端返回给前端的格式）
                    dataType: "json",
                })
                    .done(function (res) {
                        if (res.errno === "0") {
                            fAlert.alertSuccessToast(inputVal + " 接口集名称添加成功");
                            setTimeout(function () {
                                window.location.reload();
                            }, 1000)
                        } else {
                            swal.showInputError(res.errmsg);
                        }
                    })
                    .fail(function () {
                        message.showError('服务器超时，请重试！');
                    });

            }
        });
    });

其他部分明天继续了～
欢迎关注我的公众号：zx94_11
代码在：https://github.com/zx490336534/Zxapitest

公众号