面包屑

门户网站中展示许多商品,把这些商品进行具体分类归纳形成层级结构的样式。列如:手机—小米手机—红米手机。红米手机属于一个层级中的一个,而红米手机是隶属于小米下的,小米手机也是一个层级中的一个,而小米手机是隶属于手机下的。通过一个节点来查询出它所在层级中的所有数据以及它父节点和它父节点所在层级中的所有数据…一直查询到根节点,这就是面包屑。

1.面包屑展示
在这里插入图片描述2.分析层级结构、数据存储方式

/**
 [
     {
         "self":{   //红米手机对象的所有信息
             id:1,
             name:"红米note8"
        },
        "others":[
            {红米note9},{},,{},,{}
        ]
     } ,
     {
         "self":{   //红米note8的父级——小米手机
             id:1,
             name:"小米手机"
        },
         "others":[
            {小米手机},{红米手机},,{},,{}
         ]
     } ,
     {
     "self":{   //小米手机的父级——手机
     id:1,
     name:"手机"
     },
     "others":[
     {华为手机},{小米手机},,{},,{}
     ]
     } ,
 ]

 */
@Data
public class CrumbsNodeVo {
    private CourseType ownerCourseType;
    private List<CourseType> otherCourseTypes = new ArrayList<>();
}

3.创建controller

@RestController
@RequestMapping("/courseType")
public class CourseTypeController {
    @Autowired
    public ICourseTypeService courseTypeService;

    /**
     *查询课程面包屑  前台获取到指定课程类型的id
     */
    @RequestMapping(value="/crumbs/{courseTypeId}",method= RequestMethod.GET)
    public AjaxResult crumbs(@PathVariable("courseTypeId")Long courseTypeId){
        List<CrumbsNodeVo> result = courseTypeService.crumbs(courseTypeId);
        return AjaxResult.me().setResultObj(result);
    }
}

4.创建service

@Service
public class CourseTypeServiceImpl extends ServiceImpl<CourseTypeMapper, CourseType> implements ICourseTypeService {

    //查询课程面包屑  前台获取到指定课程类型的id
    @Override
    public List<CrumbsNodeVo> crumbs(Long courseTypeId) {
        //校验参数是否正确  使用断言工具
        ValidUtils.isNotNull(courseTypeId, "传入的参数无效,请稍后再试");
        //通过courseTypeId获取到对象
        CourseType courseType = baseMapper.selectById(courseTypeId);
        //通过断言工具判断对象是否为空
        ValidUtils.isNotNull(courseType,"无效的课程分类,请稍后再试" );
        //判断对象中的Path path结构为[1037.1039.1047] 1047为当前对象的id,1037为根级的id  使用StringUtils中的方法来判断一个字符是否为空
        if(StringUtils.isNotEmpty(courseType.getPath())){
            //当Path不为空时获取到对象的path并将它分隔  存放在数据库中的path是一个字符串  通过剪切获取到它的父级
            String path = courseType.getPath();
            String[] ids = path.split("\\.");
            //通过遍历集合的方式获取到所有的对象
            List<CourseType> courseTypes = baseMapper.selectBatchIds(Arrays.asList(ids));
            //创建一个集合用来接收所有的数据集合
            List<CrumbsNodeVo> result = new ArrayList<>(ids.length);
            //遍历所有的courseTypes
            courseTypes.forEach(courseType1 -> {
                //创建一个新的CrumbsBodeVo用来接收数据
                CrumbsNodeVo crumbsNodeVo = new CrumbsNodeVo();
                //将自己courseType设置进去
                crumbsNodeVo.setOwnerCourseType(courseType1);
                //通过pid获取到同级的其他数据  pid相当于类型字段  同一个层级的pid相同
                List<CourseType> others = baseMapper.selectByPid(courseType1.getPid());
                crumbsNodeVo.setOtherCourseTypes(others);
                //将这些数据存放在result中
                result.add(crumbsNodeVo);
            });
            return result;
        }
        return null;
    }
}

5.面包屑的个人理解
5.1在做一些分层展示需要使用到,可以快速在不同层级跳转该层级的同类中去
5.2我做的面包屑只是单向向上的层级,当选择为中间级时无法展示它的儿子和子级层所有数据
5.3我用来封装数据的方式使用一个对象来封装该节点的所有数据然后使用对象集合的方式封装该节点同级中的所有对象数据

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值