欢迎来访墨菲定律受益网站,本网站为你提供时间管理方法,百度在线阅读书籍

墨菲定律

阅读墨菲定律书籍一生受益

基于SpringBoot打造在线教育系统(7)-- 面包屑导航与子分类

作者:jcmp      发布时间:2021-03-29      浏览量:93742
这一节我们来讲一下面包屑导航的问题。

这一节我们来讲一下面包屑导航的问题。 先看思路,当我们点击左侧的一级课程,是不是可以拿到一个ID? 这个ID的作用可大了,我们有了这个ID,本意是通过它去寻找它所有的子节点。

看图,假设【JAVA基础】里面有JDK,Hello,变量三个课程。那么请问,这三个课程的PID(父节点)是不是就正好等于【JAVA基础】的ID呢。

对了,就是这么个思路。这样一来,二级分类的数据我们就拿到了。

1、下一个问题,假如是三级分类呢?

2、先导一下数据:

3、现在的关系图如下:

面包屑是啥东东呢,比如你点的是Java基础,那么面包屑就是 Java基础 。

你点JDK安装,面包屑就是 Java基础 | JDK安装 。

你点下载JDK,面包屑就是 Java基础 | JDK安装 | 下载JDK。

4、反正我就是这么理解的。

于是乎,我们就得写一个方法,递推出当前节点上面所有的父节点。

5、查询方法代码如下:

追溯所有父节点,我单独封装了一个方法。

验证一下代码的逻辑,新建一个测试方法。 Java进阶的ID是402880e876f69e280176f6a731a20000,我们就用它来测试:

6、测试结果:

接着用402880e876f69e280176f6a731a20001,402880e876f69e280176f6a731a22001来测试,分别对应JDK安装和下载JDK,是二级分类和三级分类。

7、结果:

顺序倒过来了,没关系,我们再修改一下list方法。

这样就完成了倒序,虽然代码不够精美,但是能用。

8、数据没问题了,就去搞搞页面吧。

ElementUI已经给我们提供了面包屑的组件了,直接拿来用。

9、最终代码:

下面这段代码比较复杂,我踌躇再三才决定这么写的。如果你有更好的办法,可以私信我,我可以抄袭,哦不,借鉴一下。

10、先看最终效果:

然后是遍历二级课程,这可真TM要了我的老命,很绕啊,我也试了很多办法才搞出来的。

11、代码如下:

代码不多,但是还真的挺难想的,也许是我太菜了,哈哈哈。

12、效果:

13、对应的JS代码:

哎,累死了,我下班后一直写到现在,跪求一键三联啊,分享一波,您的支持是我最大的动力。