当前课程知识点:软件开发实训--动态网站开发 >  10 分类管理实现 >  10.3分类树结构实现 >  10.3.1分类树结构实现

返回《软件开发实训--动态网站开发》慕课在线视频课程列表

10.3.1分类树结构实现在线视频

下一节:10.4.1分类删除实现

返回《软件开发实训--动态网站开发》慕课在线视频列表

10.3.1分类树结构实现课程教案、知识点、字幕

同学你好

欢迎回到软件开发实训课堂

上节课咱们完成了分类的编辑添加

那么我们实际上在表单里还缺了一个上一级的

表单域

那么上一级它实际上是一个树形结构

我们来看看如何去实现它的树形列表

我们打开控制器

为了显示这棵树

我们知道我们的实体contentType它有一个

成员parent是指出它的父级

这个负极是可以为空的

而且我们在这个数据访问对象里边也提供了

一个findByParent

通过父节点来查询我们所有的内容

现在我们来看

在控制器里找到edit方法

因为是同一个页面

所以我们先要去查询它的父级内容

model

Add这里我们就给它写成parent

然后我们查找通过

服务对象findByparent来查

而他的父节点输入null

查出所有父节点为空的节点

这样我们就可以得到所有的没有父级的标签了

也就是树根

有了这个以后

我们就可以去界面来显示它

这里我们加上一个S表示我们是多个父节点

这也是为了区别我们里面的parent成员

加上一个S

那么怎么来实现它呢

我们先来用div把表单隔起来

我们这里不能再让这个表单作为行了

首先我们用div把它分成两个列

第一列col我们让它占上两个单元格

专门放分类数

第二列

我们让它占据

剩下的所有的单元格

来放我们的表单

现在我们把表单只要移入到我们的第二个单元格里就行了

然后我们在这个地方就可以展现我们的数

在展现数之前我们加一个按钮

这个按钮的作用实际上就是为了添加我们的

新的分类

只需要简单的把它转向过去就行了

添加新分类

然后在它的下面放入数

导航开始

然后我们在这里为了能够使用递归的方式来

显示内容

因为它的内容不止一层

还有它的子集分类

所以我们需要用递归来做

为了使用递归我们用th:href的block标签

注意th:href只有这一个标签

其他的都是属性

然后定义一个碎片

我们就把它叫做tree

tree他需要一个对象

我们把它叫datas

然后我们就可以定义

ul下面

li的循环

循环datas

循环的过程中

因为datas实际上就是我们的内容类型对象

所以我们可以让它显示我们的名称

我们先把这个名称给它显示出来

a.name

这样我们就有了第一级

我们先来看一下它能不能出现

怎么来调用呢

我们在这加一个

div th

我们用replace来调用它

tree

我们的对象是parents

注意加个S

这样我们就调用它的碎片了

你在这里加一个注释

定义

递归显示数结构的碎片模板碎片

然后在这里使用它

使用模板碎片tree生成内容分类数

现在我们打开浏览器来看一下

输入正确的账号

我们登录进去

然后进入到我们的edittype

这样我们看一下已经出来了

而且我们发现名字是重复的

我们可以改变我们的实体类

让他们名字唯一

来解决这个问题

那么它已经出来了

我们有了第一级的数据

所以我们这个模板是正常的了

但是往往我们不止一级

这个时候怎么办

我们需要用在Li下面去显示我们的子级内容

所以我们的模板碎片还得去修正一下

首先我们说在Li下面我们循环Li但是在Li

的下面我们加上一个a标签

a标签用来显示名字

并且让他超链接到我们需要指向的位置

这里我们先把它放在这

来写第二层

第二层怎么来写

在这里

我们只需要去调用block

replace

我们这里面替换它

直接调用我们的tree这个模块

那么什么时候掉这个模块

当然是它的子级存在的时候

所以我们还需要一个判断

th:if等于判断自己的存在

sublists

如果sublists是为真

我们就接着去循环

这个数据

把A点sublists传给他

这样就可以了

这样他就能够显示多级了

那么我们超连接a链接到哪里

当我们点击超链接的时候

我们可以让他去编辑我们当前内容分类

当我们点击超链接时

我们可以让他重新打开表单来编辑分类

所以我们这里可以链接到edittype页面

并且传递我们的ID给它

这是一个我们可以传递过去

直接点击让它编辑

另外一个

当它被点击时

我们可以把它作为父级

让表单去添加我们的新的内容

或者修改某个存在的节点的父级

我们先这样实现

来看一下

效果

这样我们就有了

然后我们点击它看一下

这都实现了

我们可以把这个新闻中心加一个字

保存成功

保存成功后

你发现他的分类数丢了

没有了分类数

新建后又回来了

这是为什么呢

这是因为我们保存成功后直接返回的是界面

而不是我们对应的

已经存在数据的界面

所以我们需要怎么样

redirect下

只要保存成功

我们就返回到给定的界面

我们这里边给它加上一个type.getTid

id始终都会存在

为什么

因为它保存以后

实际上新增也会把ID赋给type对象

所以type对象始终能够拿到他的ID值

这样修改后我们就可以看一下

每次过来我们都需要输入还是挺麻烦的

我们一会来加一个链接

这会儿就有了

我们来编辑一下

加个一

编辑成功

把A给它改成通知

内容

这样我们的分类就有了

现在我们来看一下它的上一级怎么办

现在我们是点击链接的时候让他去编辑他

这样实际上并不合理

我们应该让他点击时把这块给它改掉

让它的上一级等于我们的当前点击的内容

我们来看

在我们的界面上

我们把给它改一下

改成什么呢

在我们的名称后面我们加一个编辑

把他为了和超链接区分

我们变成按钮

那么我们这里点击时不再刷新界面

界面就可以让他的href等于这个值就可以了

那么不刷新界面干什么呢

换掉我们的父级

class

等于

我们这里给它取一个class

class的名称叫getparent

意思就是我们获取父级

意思就是我们获取父级

但是我们怎么来获取父级的信息

我们需要两个信息

一个是父级的ID

我们这里叫做Pid另外一个是它的名字

那么pid我们这里就直接得到a.tid

就可以了

然后他的名字我们可以在这里写个pn来显示

得到它的名字

这样当我们点击它的时候

我们就可以去填充父级表单了

我们来看一下父级表单

在父级表单里面

我们用的是select

这里可以把它改掉

因为我们不需要select这个标签了

我们把它换成input

首先第一个input是一个隐藏的

input

input它主要显示的是parentID

而input是

名字为parentname

然后绑定

parent

name

显示出来

但是class等于form-control

plaintext是纯文本

然后改成readonly就可以了

让他只读就是不能修改

你只能通过左边的数去点击来改变它

这里边我们再加上一个field等于星号

parent.tid那么这样的修改我们到底能不能成功

来看一下

下面的我们就可以去掉了

打开浏览器

我们来测试一下

这是我们加的编辑按钮

对每一个进行编辑的

现在我们把通知内容作为上一级

没有起作用

是因为我们还没有写脚本去让它起作用

起上一个作用

我们在下面加上我们的脚本

当我们点击的时候点击谁

我们给它加脚本

首先我们看这块有没有进来

进来了

然后再一个来看一下我们的ID叫做我们通过

class而不是ID来获取的

这是class

对他

执行什么呢

可立刻操作

当它被点击时

我们执行这个函数

首先获得ID等于

attr我们来看一下ID的名称

我们当时给的是什么呢

pid而名字给的是pn注意下边的名字是不一样的

下面的ID是parentID和parentname

有了这层对应关系

我们先得到pid然后再得到名字

现在我们把值给它设上

只要我们点击

那么它的内容就会发生变化

父级的内容

这是设置当前表单的上一级数据

这是操作的

说明

先获取自定义属性的值

然后把对应表单给它改掉

能不能实现我们的效果

来看一下

我们现在把通知放在新闻下面

来点通知

你看着他自己放他自己

这是不现实的

所以我们点击一下

看新闻中心有了

我们现在来点击登录

看通知已经跑到新闻中心的下面去了

编辑显得忒大

有点夺主的感觉

这个可以使用小图片来代替它

这样我们就实现了这样一个操作

但我们点击新建分类的时候

他完全就可以再出现公司介绍

我们来看一下权重

我们可以不输

他是要求必须的

你就输个一或零就可以了

公司介绍进来后到了这里

这个时候如果我们想改

他的上级就这样去改就可以了

新建

修改

这样我们绑定好了

现在我们来点击一下通知

点击通知

编辑

看一下编辑通知后

他的上一级是新闻中心

没有问题的

这是有关

对上一级

它的处理

以及我们对整个内容分类的一个展示方式

通过树形结构把它展示出来

有关内容分类我们就讲到这里

下节课我们再见

软件开发实训--动态网站开发课程列表:

1 前端需求分析

-1.1课程介绍

--1.1.1课程介绍

--1.1.2课程介绍PPT

--1.1.3随堂测试

-1.2网站需求分析

--1.2.2网站需求分析

--1.2.3需求PPT

--1.2.4随堂测试

-1.3网站首页分析

--1.3.1网站首页分析

--1.3.2首页分析PPT

--1.3.3随堂测试

-1.4导航菜单分析

--1.4.1导航菜单分析

--1.4.2课程PPT

--1.4.3随堂测试

-1.5内容区域分析

--1.5.1内容区域分析

--1.5.2课程PPT

--1.5.3随堂测试

-1.6内容副页面分析

--1.6.1副页面分析

--1.6.2课程PPT

--1.6.3软件系统需求分析

-1.7编写需求文档

-1.8需求分析理解

2 后端分析

-2.1后端页面总体分析

--2.1.1后端页面总体设计

--2.1.2课程PPT

--2.1.3随堂测试

-2.2用户管理功能设计

--2.2.1用户管理功能分析

--2.2.2课程PPT

--2.2.3随堂测试

-2.3内容与分类功能分析

--2.3.1内容与分类功能分析

--2.3.2课程PPT

--2.3.3随堂测试

-2.4网站配置功能设计

--2.4.1网站配置功能设计

--2.4.2课程PPT

--2.4.3软件系统设计

--2.4.4随堂测试

-2.5数据库及表结构分析

--2.5.1数据库及表结构分析

--2.5.2课程PPT

--2.5.3数据库设计

-总体设计文档

3 接口设计

-3.1前台模板约定

--3.1.1前台模板约定

--3.1.2课程PPT

--3.1.3随堂测试

-3.2网站配置接口设计

--3.2.1网站配置接口设计

--3.2.2课程PPT

--3.2.3随堂测试

-3.3菜单接口设计

--3.3.1菜单接口设计

--3.3.2课程PPT

--3.3.3随堂测试

-3.4内容接口设计

--3.4.1内容接口设计

--3.4.2课程PPT

--3.4.3随堂测试

-3.5幻灯片接口设计

--3.5.1幻灯片接口设计

--3.5.2课程PPT

--3.5.3随堂测试

-补充设计文档

-3.7接口设计

4 功能设计

-4.1用户管理功能设计

--4.1.1用户管理功能设计

--4.1.2课程PPT

--4.1.3随堂测试

-4.2菜单管理功能设计

--4.2.1菜单管理功能设计

--4.2.2课程PPT

--4.2.3随堂测试

-4.3内容管理功能设计

--4.3.1内容管理功能设计

--4.3.2课程PPT

--4.3.3随堂测试

-4.4网站配置信息设计

--4.4.1网站配置信息设计

--4.4.2课程PPT

--4.4.3随堂测试

-完成设计文档

-4.6随堂测试

5 环境搭建与开发

-5.1开发环境搭建

--5.1.1环境搭建

--5.1.2随堂测试

-5.2Web前端环境搭建

--5.2.1Web前端环境

-5.3创建用户实体

--5.3.1用户实体创建

--5.3.2随堂测试

-5.4用户实体表创建与初始化

--5.4.1用户实体表创建与初始化

--5.4.2随堂测试

-5.5用户数据访问接口实现

--5.5.1用户数据访问接口实现

--5.5.2随堂测试

-5.6环境搭建问题

-5.7环境搭建问题

6 用户管理功能实现

-6.1用户服务层接口实现

--6.1.1用户服务层接口实现

--6.1.2随堂测试

-6.2用户列表和编辑控制器实现

--6.2.1用户列表和编辑控制器实现

--6.2.2随堂测试

-6.3用户存储和删除控制器实现

--6.3.1用户存储和删除控制器实现

-6.4用户添加、编辑界面实现

--6.4.1用户添加、编辑界面实现

-6.5用户管理添加用户调试

--6.5.1用户管理添加用户调试

-6.6开发

7 用户管理功能实现二

-7.1用户查询模板实现

--7.1.1用户查询模板实现

--7.1.2随堂测试

-7.2用户信息编辑的实现

--7.2.1用户信息编辑的实现

-7.3单个用户删除实现

--7.3.2单个用户删除实现

-7.4多个用户删除实现

--7.4.1多个用户删除实现

8 用户管理功能实现三

-8.1用户列表分页基本实现

--8.1.1用户列表分页基本实现

-8.2用户列表查询结果分页实现

--8.2.1用户列表查询结果分页实现

-8.3通用日期处理

--8.3.1通用日期处理

-8.4整型日期处理

--8.4.1整型日期处理

--8.4.2随堂测试

-8.5枚举数据的应用

--8.5.1枚举数据的应用

--8.5.2Spring Boot开发

9 后台主界面实现

-9.1登录逻辑实现

--9.1.1登录逻辑实现

--9.1.2随堂测试

-9.2登录界面及流程调试

--9.2.1登录界面及流程调试

--9.2.2随堂测试

-9.3管理主界面实现

--9.3.1管理主界面实现

--9.3.2随堂测试

-9.4授权验证拦截器实现

--9.4.1授权验证拦截器实现

--9.4.2随堂测试

-9.5拦截器调试

--9.5.1拦截器调试

10 分类管理实现

-10.1分类接口实现

--10.1.1分类接口实现

-10.2分类添加、编辑实现

--10.2.1分类添加、编辑实现

-10.3分类树结构实现

--10.3.1分类树结构实现

-10.4分类删除实现

--10.4.1分类删除实现

--10.4.2随堂测试

11 内容管理实现

-11.1内容实体定义

--11.1.1内容实体定义

-11.2相关接口定义

--11.2.1相关接口定义

-11.3服务接口实现

--11.3.1服务接口实现

-11.4内容添加、编辑模板实现

--11.4.1内容添加、编辑模板实现

-11.5内容添加、编辑控制器实现

--11.5.1内容添加、编辑控制器实现

-11.6内容检索页面实现

--11.6.1内容检索页面实现

-11.7内容分类树实现

--11.7.1内容分类树实现

12 UEditor富文本编辑器

-12.1修改UEditor相关问题

--12.1.1修改UEditor相关问题

-12.2整合UEditor到内容编辑界面

--12.2.1整合UEditor到内容编辑界面

-12.3UEditor图片对话框应用

--12.3.1UEditor图片对话框应用

-12.4文件上传问题处理

--12.4.1文件上传问题处理

13 网站配置管理实现

-13.1网站配置相关类实现

--13.1.1网站配置相关类实现

-13.2网站配置界面模板实现

--13.2.1网站配置界面模板实现

-13.3网站配置调试

--13.3.1网站配置调试

14 网站前端组件实现

-14.1网站首页布局实现

--14.1.1网站首页布局实现

-14.2菜单Vue组件实现

--14.2.1菜单Vue组件实现

--14.2.2随堂测试

-14.3幻灯片Vue组件实现

--14.3.1幻灯片Vue组件实现

-14.4滚动Vue组件实现

--14.4.1滚动Vue组件实现

--14.4.2随堂测试

-14.5滚动接口实现

--14.5.1滚动接口实现

-14.6滚动接口调试

--14.6.1滚动接口调试

-14.7幻灯片接口实现

--14.7.1幻灯片接口实现

15 网站前端页面实现

-15.1首页区域实现

--15.1.1首页区域实现

-15.2首页内容脚本实现

--15.2.1首页内容脚本实现

-15.3首页完善

--15.3.1首页完善

-15.4Vue组件放入单文件

--15.4.1Vue组件放入单文件

-15.5详细页面实现

--15.5.1详细页面实现

-15.6前端问题

16 测试与发布

-16.1网站测试介绍

--16.1.1网站测试介绍

--16.1.2课程PPT

-16.2功能测试

--16.2.1功能测试

--16.2.2课程PPT

-16.3打包发布

--16.3.1打包发布

-16.4部署运行

--16.4.1部署运行

--16.4.2随堂测试

10.3.1分类树结构实现笔记与讨论

也许你还感兴趣的课程:

© 柠檬大学-慕课导航 课程版权归原始院校所有,
本网站仅通过互联网进行慕课课程索引,不提供在线课程学习和视频,请同学们点击报名到课程提供网站进行学习。