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

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');

    /**
     * 查询分类
     * @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);
    }

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

//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);

/* 改变面包屑导航的字体颜色 */
.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>

<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> 

//循环次数
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);