面包屑

总体导图

面包屑的效果

 

面包屑的封装方案:

返回前端一个list(也可以封装在Ajax的object里面),这个list里面的每条数据(CrumbsVo)是前端带过来id去数据库查出的(CourseType)族谱(的path元素),

分割族谱里面的每一级的数据查出的CourseType2, 以及这个CourseType2相同等级的List<CourseType>,

封装的最终格式

list{CrumbsVo{CourseType,List<CourseType>},CrumbsVo{CourseType,List<CourseType>}......}

结合下面代码方便理解

//实体类

@TableName("t_course_type")
public class CourseType extends Model<CourseType> {

    private static final long serialVersionUID = 1L;

    @TableId(value = "id", type = IdType.AUTO)
    private Long id;
    @TableField("create_time")
    private Long createTime;
    @TableField("update_time")
    private Long updateTime;
    /**
     * 类型名
     */
    private String name;
    /**
     * 父ID
     */
    private Long pid;
    /**
     * 图标
     */
    private String logo;
    /**
     * 描述
     */
    private String description;
    @TableField("sort_index")
    private Integer sortIndex;
    /**
     * 路径
     */
    private String path;
    /**
     * 课程数量
     */
    @TableField("total_count")
    private Integer totalCount;
    //添加字段  用来封装子级  数据库表中不存在的字段
    @TableField(exist = false)
    private List<CourseType>  children  = new ArrayList<>();
}

//用来封装面包屑的零时实体类Vo

public class CrumbsVo {

    //自己个
    private CourseType ownerProductType;

    //兄弟姐妹
    private List<CourseType> otherProductTypes = new ArrayList<>();

}

 

 

    /**
     * 获取面包屑接口
     *
     */
    @GetMapping("/crumbs/{id}")
    public List<CrumbVo> getCrumbs(@PathVariable("id")Long id)
    {
        return courseTypeService.getCrumbs(id);
    }

 

 

 

//面包蟹的方法体

@Override
public List<CrumbsVo> getCrumbs(Long id) {
    //准备好了list封装返回数据
    List<CrumbsVo> result = new ArrayList<>();
    //查出用户当前点击的数据,查出该数据的path
    CourseType courseType = typeMapper.selectById(id);
    String path = courseType.getPath();
    //根据path查出族谱
    String[] ids = path.split("\.");
    //根据族谱查出每个级别的相同级别其他数据
    for (String tid:ids){
        //创建一个vo封装一层面包屑
        CrumbsVo crumbVo = new CrumbsVo();
        //将String转换为long类型
        Long rid = Long.valueOf(tid);
        //根据rid查询自己
        CourseType own = typeMapper.selectById(rid);

        //====每一级别的都包含点击数据的本数据,
        crumbVo.setOwnerProductType(own);

        //根据pid相同 查询其同级
        //new EntityWrapper<CourseType>().eq("pid", own.getPid()),MyBatisPlus系列五：条件构造器EntityWrapper,
        //eq("pid", own.getPid())相等的条件设立
        List<CourseType> types = typeMapper.selectList(new EntityWrapper<CourseType>().eq("pid", own.getPid()));
        //迭代器遍历集合
        Iterator<CourseType> iterator = types.iterator();
        while (iterator.hasNext()){
            //根据id相同  移除自己,自己在外面已经封装了,上面的 crumbVo.setOwnerProductType(own);
            if(own.getId().equals(iterator.next().getId())){
                iterator.remove();
                break;
            }
        }
        //====将同级其他添加到面包屑
        crumbVo.setOtherProductTypes(types);
        //将面包屑添加到返回的结果集合中
        result.add(crumbVo);
    }
    return result;
    }