js组织结构图代码_Django的接口新增页面的前端代码（十）

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

复制一下接口新增部分的html

 1

2 3 4 接口集管理 5 6 7 8 9 10 接口新增11 12

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

展示效果

但是明显有点问题！

就是怎么可以用一样的图标呢。

我们从箱底翻出AdminLTE-2.4.5

AdminLTE-2.4.5

打开index.html这个宝库，找到图标库。

图标库

然后从中挑选出喜欢的图标来进行替换。

所以我随便挑了fa-clone

图标

修改图中所在的位置：

修改

修改

再次刷新页面就可以看到新的图标了

新建一个文件callections.html继承于

 1 base.html{% extends 'index/base.html' %} 2 3{% block title %} 4 接口管理平台-接口集管理 5{% endblock %} 6 7{% block content_header %} 8 接口相关 9{% endblock %}1011{% block header_option_desc %}12 接口集管理13{% endblock %}

大致效果

在脑海中形成如上的一副结构图，然后我们就用代码实现它

记得我们之前在base.html里面挖的{% block content %}坑吧，填上它！

 1{% block content %} 2 

3

4

5

6 新建接口集 7

8

9 10 11 12 接口集名称13 接口数量14 操作15 16 17 18 {% for one_tag in tags %}19 20 {{ one_tag.name }}21 {{ one_tag.num_news }}22 23 编辑24 删除25 26 27 {% endfor %}28 29 30

31

32

33

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标签，将它修改为

这样我们就完成来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: "请输入接口集名称