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

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

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

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

下一个问题，假如是三级分类呢？

先导一下数据：

INSERT INTO `edu`.`type` (`id`, `level`, `pid`, `type_name`, `order_num`) VALUES ('402880e876f69e280176f6a731a20001', '2', '402880e876f69e280176f6a731a20000', 'JDK安装', '1');
INSERT INTO `edu`.`type` (`id`, `level`, `pid`, `type_name`, `order_num`) VALUES ('402880e876f69e280176f6a731a20002', '2', '402880e876f69e280176f6a731a20000', 'eclipse的使用', '2');
INSERT INTO `edu`.`type` (`id`, `level`, `pid`, `type_name`, `order_num`) VALUES ('402880e876f69e280176f6a731a22001', '3', '402880e876f69e280176f6a731a20001', '下载JDK', '1');

现在的关系图如下：

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

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

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

反正我就是这么理解的。

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

查询方法代码如下：

	/**
	 * 查询分类
	 * @param type
	 * @return
	 */
	@RequestMapping("/list")
	@ResponseBody
	public Map<String,Object> list(Type type){
		Map<String,Object> result = new HashMap<>();
		result.put("code",0);
		
		//如果id为空，说明是加载一级课程分类
		if(type.getId() == null){
			type.setPid("0"); //我们规定一级分类的父ID是0
		}else{
			//如果有ID传过来，就看做是PID，去查询它所有的子节点
			String pid = type.getId();
			Type probe = new Type();
			probe.setPid(pid); //查询条件就是pid
			List<Type> childTypes = typeDao.findAll(Example.of(probe));
			
			//子节点查询完毕
			result.put("childTypes",childTypes);
			
			
			//根据本次点击的分类，向上追溯父节点
			List<Type> listTypeForBread = new ArrayList<Type>();
			
			//因为前台只传过来ID，所以要去数据库搜索完整的Type
			type = typeDao.findOne(type.getId());
			
			//本次点击的节点肯定要加进去
			listTypeForBread.add(type);
			
			
			getParents(listTypeForBread,type);
			
			for (Iterator iterator = listTypeForBread.iterator(); iterator.hasNext();) {
				Type type2 = (Type) iterator.next();
				System.out.println(type2.getTypeName());
			}
			
		}
		
		List<Type> findByPid = typeDao.findByPid(type.getPid());
		result.put("data", findByPid);
		return result;
	}

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

    //追溯所有父节点
	private void getParents(List<Type> listTypeForBread, Type type) {
		
		//如果父节点是0，说明是点击一级菜单而已，直接返回一级菜单就行了。
		if(type.getPid().equals("0")){
			return;
		}
		
		Type probe = new Type();
		probe.setId(type.getPid());
		
		Type parent = typeDao.findOne(Example.of(probe));
		listTypeForBread.add(parent);
		
		if(parent.getPid().equals("0")){
			return;
		}
		
		getParents(listTypeForBread,parent);
	}

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

	@Test
	public void listType(){
		Type type = new Type();
		type.setId("402880e876f69e280176f6a731a20000");
		typeController.list(type);
	}

测试结果：

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

结果：

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

//list倒序
List<Type> listTypeForBreadNew = new ArrayList<>();
for (int i = listTypeForBread.size() - 1; i >= 0 ; i--) {
	Type typeItem = listTypeForBread.get(i);
	listTypeForBreadNew.add(typeItem);
}

//面包屑数据处理完毕
result.put("breadList",listTypeForBreadNew);

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

数据没问题了，就去搞搞页面吧。

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

最终代码：

/* 改变面包屑导航的字体颜色 */
.el-breadcrumb__item a {
	color:#1989fa !important;
}

.el-breadcrumb {
    font-size: 14px;
    line-height: 1;
    background: #e3f3d1;
    padding: 14px 8px;
    border-radius: 2px;
    border-color: #e3f3d1;
}

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

   <el-breadcrumb separator="/" style="margin-bottom: 10px;">
	  <el-breadcrumb-item><a href="${basePath}/admin/index">首页</a></el-breadcrumb-item>
	  <el-breadcrumb-item v-for="(item,index) in breadList">
	  	<a :style="index == breadList.length - 1 ? 'color:#777 !important;': '' " 
	  	   :href=" index == breadList.length - 1 ? 'javaScript:void(0)' : '${basePath}/type/list?id=' + item.id">
	  		{{item.typeName}}
	  	</a>
	  </el-breadcrumb-item>
	</el-breadcrumb>

先看最终效果：

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

代码如下：

<el-row :gutter="20" v-for="(row,rowIndex) in childTypes" style="margin:30px 16px;">
    <el-col :span="6" v-for="(item,colIndex) in childTypes[rowIndex]" >
        <el-badge :value="'9'" class="item">
            <el-card class="box-card" shadow="hover" style="height:150px;" body-style="">
              <div slot="header" class="clearfix card-header">
                <span><i class="el-icon-document"></i></span>
                <div class="cardname" type="text">[{{item.typeName}}]</div>
              </div>
              <div class="text item">
                [{{item.typeName}}]
              </div>
              <span class="ordernum">{{rowIndex * 4 + colIndex+1}}</span>
            </el-card>
        </el-badge>
    </el-col>
</el-row> 

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

效果：

对应的JS代码：

//循环次数
that.loop = data.childTypes.length / 4 + 1;
  
//本次加载的所有同级分类
that.typesMain = data.data;
//面包屑
that.breadList = data.breadList;
//子节点数据
var childTypes = data.childTypes;

//处理子节点，每四个一组（难点）
var arr = [];
//debugger;

var count = Math.floor(childTypes.length / 4) + 1;

for(var i = 0;i < count;i++){
	//每次循环都要用到一个新的数组
	var newArr = JSON.parse(JSON.stringify(childTypes));
	var start = i * 4;

	if( i == count - 1){
		arr[i] =  newArr.splice(start)
	}else
		arr[i] =  newArr.splice(start,4)
		
}

that.childTypes = arr;
console.log(that.childTypes);

代码很多，我只贴了关键部分，需要完整源码的可以关注【java小白翻身】，加群获取。

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