Django的接口新增页面的前端代码（十）
本次来写一下接口新增页面，为了方便管理接口，决定采用postman的文件夹存放的形式来存放，这样我们就需要增加一个接口集管理的页面。 复制一下接口新增部分的html
1<li>
2 <a href="#">
3 <i class="fa fa-cogs"></i>
4 <span>接口集管理</span>
5 </a>
6</li>
7<li>
8 <a href="#">
9 <i class="fa fa-cogs"></i>
10 <span>接口新增</span>
11 </a>
12</li>刷新一下页面可以看到效果
展示效果
但是明显有点问题！
就是怎么可以用一样的图标呢。
我们从箱底翻出AdminLTE-2.4.5
AdminLTE-2.4.5
打开index.html这个宝库，找到图标库。
图标库
然后从中挑选出喜欢的图标来进行替换。
所以我随便挑了fa-clone
图标 修改图中所在的位置：
修改 再次刷新页面就可以看到新的图标了
新图标
新建一个文件callections.html继承于base.html
1{% extends 'index/base.html' %}
2
3{% block title %}
4 接口管理平台-接口集管理
5{% endblock %}
6
7{% block content_header %}
8 接口相关
9{% endblock %}
10
11{% block header_option_desc %}
12 接口集管理
13{% endblock %}
大致效果
在脑海中形成如上的一副结构图，然后我们就用代码实现它
记得我们之前在base.html里面挖的{% block content %}坑吧
填上它！
1{% block content %}
2 <div class="row">
3 <div class="col-md-12 col-xs-12 col-sm-12">
4 <div class="box box-primary">
5 <div class="box-header">
6 <button class="btn btn-primary pull-right" id="btn-add-tag">新建接口集</button>
7 </div>
8 <div class="box-body">
9 <table class="table table-bordered table-hover">
10 <thead>
11 <tr>
12 <th>接口集名称</th>
13 <th>接口数量</th>
14 <th>操作</th>
15 </tr>
16 </thead>
17 <tbody>
18 {% for one_tag in tags %}
19 <tr data-id="{{ one_tag.id }}" data-name="{{ one_tag.name }}">
20 <td>{{ one_tag.name }}</td>
21 <td>{{ one_tag.num_news }}</td>
22 <td>
23 <button class="btn btn-xs btn-warning btn-edit">编辑</button>
24 <button class="btn btn-xs btn-danger btn-del">删除</button>
25 </td>
26 </tr>
27 {% endfor %}
28 </tbody>
29 </table>
30 </div>
31 </div>
32 </div>
33 </div>
34{% endblock %}为了看到效果，我们还需要使用get来进行渲染
在apps/workspace/views.py里新建一个类视图
1class CallectionsView(View):
2 def get(self, request):
3 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请求
成功的话返回接口集名称添加成功，失败返回服务器超时，请重试！
所以新增部分代码如下：
1// 添加
2 let $tagAdd = $("#btn-add-tag"); // 1. 获取添加按钮
3 $tagAdd.click(function () { // 2. 点击事件
4 fAlert.alertOneInput({
5 title: "请输入接口集名称",
6 text: "长度限制在20字以内",
7 placeholder: "请输入接口集名称",
8 confirmCallback: function confirmCallback(inputVal) {
9 console.log(inputVal);
10
11 if (inputVal === "") {
12 swal.showInputError('接口集名称不能为空');
13 return false;
14 }
15
16 let sDataParams = {
17 "name": inputVal
18 };
19
20 $.ajax({
21 // 请求地址
22 url: "/callections/", // url尾部需要添加/
23 // 请求方式
24 type: "POST",
25 data: JSON.stringify(sDataParams),
26 // 请求内容的数据类型（前端发给后端的格式）
27 contentType: "application/json; charset=utf-8",
28 // 响应数据的格式（后端返回给前端的格式）
29 dataType: "json",
30 })
31 .done(function (res) {
32 if (res.errno === "0") {
33 fAlert.alertSuccessToast(inputVal + " 接口集名称添加成功");
34 setTimeout(function () {
35 window.location.reload();
36 }, 1000)
37 } else {
38 swal.showInputError(res.errmsg);
39 }
40 })
41 .fail(function () {
42 message.showError('服务器超时，请重试！');
43 });
44
45 }
46 });
47 });