使⽤java怎么实现商品三级分类_如何实现列表三级分类---后
端+前端
对于分类来说，⼀般包括⼀级分类，⼆级分类，三级分类， ⼤部分⽹站都是左边点击⼆级分类，右边显⽰相对应商品 下⾯就来为⼤家详细分析⼀下该如何实现吧。 如图:
分析图java怎么编写
1.1后端实现：JavaBean
与数据库匹配字段
⽤于封装，每⼀个分类，对应多个⼦分类
1.2后端实现：
数据库中的数据必须交特殊的，先录⼊⽗分类，再录⼊⼦分类，为了保证所有的⼦分类，可以在遍历到⽗分类，数据需要排序。步骤⼀： mapper，通⽤mapper
@org.apache.ibatis.annotations.Mapper
public interface CategoryMapper extends Mapper {
}
步骤⼆：service ,
@Service
@Transactional
public class CategoryService {
@Resource
private CategoryMapper categoryMapper;
/**
* 查询所有分类(⼀级分类-->⼆级分类-->三级分类)
* @return
*/
public List findAll(){
//1 查询所有(安排⽗分类id排序)先查询到⼀级分类
Example example = new Example(Category.class);
example.setOrderByClause("parent_id asc");
List list = categoryMapper.selectByExample(example);
//2 组装数据
// 2.1 提供新集合，组装后的数据
List returnList = new ArrayList<>();
// 2.2 提供Map进⾏缓存，⼦分类可以快速到⽗分类
Map cacheMap = new HashMap<>();
//2.3 组装
for(Category category : list ) {
//如果⽗分类id为0，表⽰⼀级分类
if (ParentId() == 0) {
returnList.add( category );
}
//将⾃⼰添加到map缓存中，⽅便⼦分类到⾃⼰
cacheMap.Id() , category);
//⼦分类从缓存map获得⽗分类
Category parentCategory = (ParentId()); if(parentCategory != null) {
}
}
return returnList;
}
}
步骤三：controller
@RestController
@RequestMapping("/categorys")
public class CategoryController {
@Resource
private CategoryService categoryService;
@GetMapping
public BaseResult findAll(){
//查询
List list = categoryService.findAll();
//返回
return BaseResult.ok("查询成功", list );
}
}
通过Postman 测试
我使⽤Visual Studio Code 软件，使⽤Vue-cli脚⼿架搭建前端项⽬步骤⼀：在plugins创建 api.server.js，编写服务端api.js，
步骤⼆：编写服务端api.js，修改fig.js 配置仅服务器可⽤
步骤三：修改 api.server.js，查询所有的分类
步骤四：~pages/index.vue，使⽤asyncData进⾏查询
步骤五： ~pages/index.vue，设置HeaderSearch组件 list 属性(相当于实参步骤六：修改 HeaderSearch组件，声明list属性(相当于形成)
export default {
props: {
list: {  //属性list，属性值类型为数组Array
type: Array
}
}
}
步骤七：修改 HeaderSearch组件，遍历展⽰数据
如图:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。