如何实现列表三级分类---后端+前端

对于分类来讲，通常包括一级分类，二级分类，三级分类，大部分网站都是左边点击二级分类，右边显示相对应商品下面就来为你们详细分析一下该如何实现吧。如图:html

分析图前端

1.1后端实现：JavaBean

与数据库匹配字段vue
用于封装，每个分类，对应多个子分类java

1.2后端实现：

数据库中的数据必须交特殊的，先录入父分类，再录入子分类，为了保证全部的子分类，能够在遍历找到父分类，数据须要排序。数据库

步骤一： mapper，通用mapperapache

@org.apache.ibatis.annotations.Mapper
public interface CategoryMapper extends Mapper<Category> {
}

步骤二：service ,后端

@Service
@Transactional
public class CategoryService {

    @Resource
    private CategoryMapper categoryMapper;

    /**
     * 查询全部分类（一级分类-->二级分类-->三级分类）
     * @return
     */
    public List<Category> findAll(){
        //1 查询全部（安排父分类id排序）先查询到一级分类
        Example example = new Example(Category.class);
        example.setOrderByClause("parent_id asc");
        List<Category> list = categoryMapper.selectByExample(example);

        //2 组装数据
        // 2.1 提供新集合，组装后的数据
        List<Category> returnList = new ArrayList<>();
        // 2.2 提供Map进行缓存，子分类能够快速找到父分类
        Map<Integer,Category> cacheMap = new HashMap<>();

        //2.3 组装
        for(Category category : list ) {
            //若是父分类id为0，表示一级分类
            if (category.getParentId() == 0) {
                returnList.add( category );
            }

            //将本身添加到map缓存中，方便子分类找到本身
            cacheMap.put(category.getId() , category);

            //子分类从缓存map得到父分类
            Category parentCategory = cacheMap.get(category.getParentId());
            if(parentCategory != null) {
                parentCategory.getChildren().add(category);
            }


        }

        return returnList;
    }


}

步骤三：controllerapi

@RestController
@RequestMapping("/categorys")
public class CategoryController {

    @Resource
    private CategoryService categoryService;

    @GetMapping
    public BaseResult findAll(){
        //查询
        List<Category> list = categoryService.findAll();
        //返回
        return BaseResult.ok("查询成功", list );
    }

}

经过Postman 测试数组

我使用Visual Studio Code 软件,使用Vue-cli脚手架搭建前端项目

步骤一：在plugins建立 api.server.js，编写服务端api.js，缓存
步骤二：编写服务端api.js，修改nuxt.config.js 配置仅服务器可用

步骤三：修改 api.server.js，查询全部的分类

步骤四：~pages/index.vue，使用asyncData进行查询

步骤五： ~pages/index.vue，设置HeaderSearch组件 list 属性（至关于实参

 <HeaderSearch :list="categoryList"></HeaderSearch>

步骤六：修改 HeaderSearch组件，声明list属性（至关于造成）

export default {
  props: {
    list: {   //属性list，属性值类型为数组Array
      type: Array
    }
  }
}

步骤七：修改 HeaderSearch组件，遍历展现数据

<!-- 分类列表（一级分类）start ， <div class="cat item1"> -->
<div class="cat item1" v-for="(c1,i1) in list" :key="i1">
	<h3><a href="">{{c1.catName}}</a> <b></b></h3>
	<div class="cat_detail">
		<!-- 分类详情（二级分类）start -->
		<dl class="dl_1st" v-for="(c2,i2) in c1.children" :key="i2">
			<dt><a href="">{{c2.catName}}</a></dt>
			<dd>
				<!-- 三级分类 start -->
				<a href="list.html" v-for="(c3,i3) in c2.children" :key="i3">{{c3.catName}}</a>
				<!-- 三级分类 end -->
			</dd>
		</dl>
		<!-- 分类详情（二级分类）end -->
	</div>
</div>
<!-- 分类列表（一级分类）end -->

如图: