门户网站中展示许多商品,把这些商品进行具体分类归纳形成层级结构的样式。列如:手机—小米手机—红米手机。红米手机属于一个层级中的一个,而红米手机是隶属于小米下的,小米手机也是一个层级中的一个,而小米手机是隶属于手机下的。通过一个节点来查询出它所在层级中的所有数据以及它父节点和它父节点所在层级中的所有数据…一直查询到根节点,这就是面包屑。
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我用来封装数据的方式使用一个对象来封装该节点的所有数据然后使用对象集合的方式封装该节点同级中的所有对象数据