一、后臺管理系統表格分頁形式的分類顯示

先來看實現的效果。
這是所有商品的一級分類，選中一個一級分類后（如圖中的“家電 數碼 手機”）點擊“下級分類管理”，即跳轉至該分類的二級分類，如下圖。
再選擇二級分類中的“家電”后，點擊“下級分類管理”，即跳轉至該二級分類下的三級分類，如下圖。

所有的分類都是記錄在同一張表內，表內主要字段如下。

屬性名說明

category_id	自增id，用于記錄每個分類的編號
category_level	表示該分類屬于幾級分類
parent_id	表示該分類的上級分類的id，如果是一級分類，則為0
category_name	分類名稱
category_rank	分類排序值，值越高越靠前顯示

另外在前后端傳值的時候有三個關鍵的參數：

• categoryLevel， 用來表格該分類的等級
• parentId，用來表格該分類的上級分類的id，一級分類則為0
• backParentId，用來表示三級分類的parentId所對應的二級分類的一級分類

現在開始上代碼。
初試列表顯示的是所有一級分類，因此這里三個參數分別為：categoryLevel=1，parentId=0，backParentId=0；url為：
admin/categories?parentId=0&categoryLevel=1&backParentId=0
二級列表和三級列表的參數由前端獲取到后傳給后端。

NewBeeMallGoodsCategoryController.java @Resourceprivate NewBeeMallCategoryService newBeeMallCategoryService;/*** 列表顯示*/@RequestMapping(value = "/categories/list" ,method = RequestMethod.GET)@ResponseBodypublic Result list(@RequestParam Map<String,Object> params){if (StringUtils.isEmpty(params.get("page")) || StringUtils.isEmpty(params.get("limit"))){return ResultGenerator.genFailResult("參數異常");}PageQueryUtil pageQueryUtil = new PageQueryUtil(params);return ResultGenerator.genSuccessResult(newBeeMallCategoryService.getCategoriesPage(pageQueryUtil));}

（categoryLevel=1,parentId=0封裝在params中）

NewBeeMallCategoryService.java /*** 管理后臺分頁顯示* @param pageQueryUtil* @return*/PageResult getCategoriesPage(PageQueryUtil pageQueryUtil); NewBeeMallCategoryServiceImpl.java @Autowiredprivate GoodsCategoryMapper goodsCategoryMapper;@Overridepublic PageResult getCategoriesPage(PageQueryUtil pageQueryUtil) {List<GoodsCategory> goodsCategories = goodsCategoryMapper.findGoodsCategoryList(pageQueryUtil);int total = goodsCategoryMapper.getTotalGoodsCategories(pageQueryUtil);PageResult pageResult = new PageResult(goodsCategories,total,pageQueryUtil.getLimit(),pageQueryUtil.getPage());return pageResult;} GoodsCategoryMapper.java /*** 后臺獲取分類列表* @param pageQueryUtil* @return*/List<GoodsCategory> findGoodsCategoryList(PageQueryUtil pageQueryUtil);/*** 后臺獲取分類總數* @param pageQueryUtil* @return*/int getTotalGoodsCategories(PageQueryUtil pageQueryUtil); GoodsCategoryMapper.xml <sql id="Base_Column_List">category_id, category_level, parent_id, category_name, category_rank, is_deleted,create_time, create_user, update_time, update_user</sql><select id="findGoodsCategoryList" parameterType="map" resultMap="BaseResultMap">select<include refid="Base_Column_List"></include>from tb_newbee_mall_goods_category<where><if test="categoryLevel!=null and categoryLevel!=''">and category_level = #{categoryLevel}</if><if test="parentId!=null and parentId!=''">and parent_id = #{parentId}</if>and is_deleted = 0</where>order by category_rank desc<if test="start!=null and limit!=null">limit #{start},#{limit}</if></select><select id="getTotalGoodsCategories" parameterType="Map" resultType="int">select count(*) from tb_newbee_mall_goods_category<where><if test="categoryLevel!=null and categoryLevel!=''">and category_level = #{categoryLevel}</if><if test="parentId!=null and parentId!=''">and parent_id = #{parentId}</if>and is_deleted = 0</where></select>

二、添加商品頁面的下拉菜單式的三級聯動

實際效果如圖所示。

第一個下拉菜單默認顯示排序值最高的一級分類。第二個下拉菜單顯示的是該一級分類下的第一個二級分類。第三個下拉菜單顯示的是該二級分類下的第一個三級分類。若沒有內容則顯示空白。這里有三種情況，分別是：

（1）打開頁面后的默認顯示

一打開這個頁面默認顯示的是第一個一級分類，和其所屬的第一個二級分類以及該二級分類下的第一個三級分類，即：“家電 數碼 手機” -->“家電” --> “生活電器”。

NewBeeMallGoodsController.java @Resourceprivate NewBeeMallCategoryService newBeeMallCategoryService;@GetMapping("/goods/edit")public String edit(HttpServletRequest request){request.setAttribute("path", "edit");//查詢所有的一級分類List<GoodsCategory> firstLevelCategories = newBeeMallCategoryService.selectByLevelAndParentIdsAndNumber(Collections.singletonList(0L), NewBeeMallCategoryLevelEnum.LEVEL_ONE.getLevel());if (!CollectionUtils.isEmpty(firstLevelCategories)){//查詢一級分類列表中第一個實體的所有二級分類List<GoodsCategory> secondLevelCategories = newBeeMallCategoryService.selectByLevelAndParentIdsAndNumber(Collections.singletonList(firstLevelCategories.get(0).getCategoryId()), NewBeeMallCategoryLevelEnum.LEVEL_TWO.getLevel());if (!CollectionUtils.isEmpty(secondLevelCategories)){//查詢二級分類列表中第一個實體的所有三級分類List<GoodsCategory> thirdLevelCategories = newBeeMallCategoryService.selectByLevelAndParentIdsAndNumber(Collections.singletonList(secondLevelCategories.get(0).getCategoryId()),NewBeeMallCategoryLevelEnum.LEVEL_THREE.getLevel());request.setAttribute("firstLevelCategories",firstLevelCategories);request.setAttribute("secondLevelCategories",secondLevelCategories);request.setAttribute("thirdLevelCategories",thirdLevelCategories);request.setAttribute("path","goods-edit");return "admin/newbee_mall_goods_edit";}}return "error/error_5xx";} NewBeeMallCategoryService.java /*** 根據parentId和level獲取分類列表* @param parentIds* @param categoryLevel* @return*/List<GoodsCategory> selectByLevelAndParentIdsAndNumber(List<Long> parentIds, int categoryLevel); NewBeeMallCategoryServiceImpl.java @Autowiredprivate GoodsCategoryMapper goodsCategoryMapper;@Overridepublic List<GoodsCategory> selectByLevelAndParentIdsAndNumber(List<Long> parentIds, int categoryLevel){return goodsCategoryMapper.selectByLevelAndParentIdsAndNumber(parentIds,categoryLevel,0);//0代表查詢所有} GoodsCategoryMapper.java List<GoodsCategory> selectByLevelAndParentIdsAndNumber(@Param("parentIds") List<Long> parentIds,@Param("categoryLevel") int categoryLevel,@Param("number") int number); GoodsCategoryMapper.xml <select id="selectByLevelAndParentIdsAndNumber" resultMap="BaseResultMap">select<include refid="Base_Column_List"/>from tb_newbee_mall_goods_categorywhere parent_id in<foreach item="parentId" collection="parentIds" open="(" separator="," close=")">#{parentId,jdbcType=BIGINT}</foreach>and category_level = #{categoryLevel,jdbcType=TINYINT}and is_deleted = 0order by category_rank desc<if test="number>0">limit #{number}</if></select>

（2）修改商品信息頁，已知商品id

這種情況下是用戶在商品列表選擇了相應的商品后，點擊編輯按鈕，希望修改這個商品的基本信息（如，分類、庫存、售價等）,這個時候頁面跳轉到與前面的截圖相同的頁面，區別就是這個時候的三級菜單會自動顯示當前該商品所在的三級分類，即數據回顯。如下圖所示，我選中了其中一個商品（如小米某型號手機），返回的頁面是這樣的。

NewBeeMallGoodsController.java @Resourceprivate NewBeeMallGoodsService newBeeMallGoodsService;@GetMapping("/goods/edit/{goodsId}")public String edit(HttpServletRequest request,@PathVariable("goodsId") Long goodsId){request.setAttribute("path","edit");NewBeeMallGoods newBeeMallGoods = newBeeMallGoodsService.getNewBeeMallGoodsById(goodsId);if(newBeeMallGoods == null){return "error/error_400";}if(newBeeMallGoods.getGoodsCategoryId() > 0){if (newBeeMallGoods.getGoodsCategoryId() != null || newBeeMallGoods.getGoodsCategoryId() > 0){//有分類字段則查詢相關分類數據返回給前端以供分類的三級聯動顯示GoodsCategory currentGoodsCategory = newBeeMallCategoryService.getGoodsCategoryById(newBeeMallGoods.getGoodsCategoryId());//商品表中存儲的分類id字段為三級分類的id,不為三級分類則是錯誤數據if (currentGoodsCategory != null && currentGoodsCategory.getCategoryLevel() == NewBeeMallCategoryLevelEnum.LEVEL_THREE.getLevel()){//查詢所有的一級分類List<GoodsCategory> firstLevelCategories = newBeeMallCategoryService.selectByLevelAndParentIdsAndNumber(Collections.singletonList(0L),NewBeeMallCategoryLevelEnum.LEVEL_ONE.getLevel());//根據parentId查詢當前parentId下所有的三級分類List<GoodsCategory> thirdLevelCategories = newBeeMallCategoryService.selectByLevelAndParentIdsAndNumber(Collections.singletonList(currentGoodsCategory.getParentId()),NewBeeMallCategoryLevelEnum.LEVEL_THREE.getLevel());//查詢當前三級分類的父級二級分類GoodsCategory secondCategory = newBeeMallCategoryService.getGoodsCategoryById(currentGoodsCategory.getParentId());if(secondCategory != null){//根據parentId查詢當前parentId下所有的二級分類List<GoodsCategory> secondLevelCategories = newBeeMallCategoryService.selectByLevelAndParentIdsAndNumber(Collections.singletonList(secondCategory.getParentId()),NewBeeMallCategoryLevelEnum.LEVEL_TWO.getLevel());//查詢當前二級分類的父級一級分類GoodsCategory firstCategory = newBeeMallCategoryService.getGoodsCategoryById(secondCategory.getParentId());if (firstCategory != null){//所有分類數據都得到之后放到request對象中供前端讀取request.setAttribute("firstLevelCategories", firstLevelCategories);request.setAttribute("secondLevelCategories", secondLevelCategories);request.setAttribute("thirdLevelCategories", thirdLevelCategories);request.setAttribute("firstLevelCategoryId", firstCategory.getCategoryId());request.setAttribute("secondLevelCategoryId", secondCategory.getCategoryId());request.setAttribute("thirdLevelCategoryId", currentGoodsCategory.getCategoryId());}}}}}if (newBeeMallGoods.getGoodsCategoryId() == 0) {//查詢所有的一級分類List<GoodsCategory> firstLevelCategories = newBeeMallCategoryService.selectByLevelAndParentIdsAndNumber(Collections.singletonList(0L), NewBeeMallCategoryLevelEnum.LEVEL_ONE.getLevel());if (!CollectionUtils.isEmpty(firstLevelCategories)) {//查詢一級分類列表中第一個實體的所有二級分類List<GoodsCategory> secondLevelCategories = newBeeMallCategoryService.selectByLevelAndParentIdsAndNumber(Collections.singletonList(firstLevelCategories.get(0).getCategoryId()), NewBeeMallCategoryLevelEnum.LEVEL_TWO.getLevel());if (!CollectionUtils.isEmpty(secondLevelCategories)) {//查詢二級分類列表中第一個實體的所有三級分類List<GoodsCategory> thirdLevelCategories = newBeeMallCategoryService.selectByLevelAndParentIdsAndNumber(Collections.singletonList(secondLevelCategories.get(0).getCategoryId()), NewBeeMallCategoryLevelEnum.LEVEL_THREE.getLevel());request.setAttribute("firstLevelCategories", firstLevelCategories);request.setAttribute("secondLevelCategories", secondLevelCategories);request.setAttribute("thirdLevelCategories", thirdLevelCategories);}}}request.setAttribute("goods", newBeeMallGoods);request.setAttribute("path", "goods-edit");return "admin/newbee_mall_goods_edit";} NewBeeMallGoodsService.java /*** 根據id獲取商品詳情* @param id* @return*/NewBeeMallGoods getNewBeeMallGoodsById(Long id); NewBeeMallGoodsServiceImpl.java @Autowiredprivate NewBeeMallGoodsMapper goodsMapper;@Overridepublic NewBeeMallGoods getNewBeeMallGoodsById(Long id) {return goodsMapper.selectByPrimaryKey(id);} NewBeeMallGoodsMapper.java /*** 根據id獲取商品* @param goodsId* @return*/NewBeeMallGoods selectByPrimaryKey(Long goodsId); NewBeeMallGoodsMapper.xml <sql id="Base_Column_List">goods_id, goods_name, goods_intro,goods_category_id, goods_cover_img, goods_carousel, original_price,selling_price, stock_num, tag, goods_sell_status, create_user, create_time, update_user,update_time</sql><sql id="Blob_Column_List">goods_detail_content</sql><select id="selectByPrimaryKey" parameterType="java.lang.Long" resultMap="ResultMapWithBLOBs">select<include refid="Base_Column_List"/>,<include refid="Blob_Column_List"/>from tb_newbee_mall_goods_infowhere goods_id = #{goodsId,jdbcType=BIGINT}</select>

（3）手動選擇更改分類

當我們手動選擇了一個一級分類后，二級分類的下拉菜單會自動修改為當前選擇的那個一級分類下的第一個二級分類，三級分類的下拉菜單會自動修改為當前第一個二級分類下的第一個三級分類，如果沒有相應的下屬分類則不顯示。當自己手動選擇了一個二級分類后，三級分類的下拉菜單會自動修改為當前選擇的二級分類下的第一個三級分類。

NewBeeMallGoodsCategoryController.java @Resourceprivate NewBeeMallCategoryService newBeeMallCategoryService;/*** 添加/修改商品信息頁的列表顯示*/@RequestMapping(value = "/categories/listForSelect",method = RequestMethod.GET)@ResponseBodypublic Result listForSelect(@RequestParam("categoryId") Long categoryId){if (categoryId == null || categoryId < 1){return ResultGenerator.genFailResult("缺少參數");}GoodsCategory category = newBeeMallCategoryService.getGoodsCategoryById(categoryId);//既不是一級分類也不是二級分類則不返回數據if (category == null || category.getCategoryLevel() == NewBeeMallCategoryLevelEnum.LEVEL_THREE.getLevel()){return ResultGenerator.genFailResult("參數異常");}Map categoryResult = new HashMap(2);if (category.getCategoryLevel() == NewBeeMallCategoryLevelEnum.LEVEL_ONE.getLevel()){//如果是一級分類則返回一級分類下的所有二級分類，以及二級分類列表中第一條數據下的所有三級分類//查詢一級分類列表中第一個實體的所有二級分類List<GoodsCategory> secondLevelCategories = newBeeMallCategoryService.selectByLevelAndParentIdsAndNumber(Collections.singletonList(categoryId),NewBeeMallCategoryLevelEnum.LEVEL_TWO.getLevel());if(!CollectionUtils.isEmpty(secondLevelCategories)){//查詢二級分類列表中第一個實體的所有三級分類List<GoodsCategory> thirdLevelCategories = newBeeMallCategoryService.selectByLevelAndParentIdsAndNumber(Collections.singletonList(secondLevelCategories.get(0).getCategoryId()),NewBeeMallCategoryLevelEnum.LEVEL_THREE.getLevel());categoryResult.put("secondLevelCategories",secondLevelCategories);categoryResult.put("thirdLevelCategories",thirdLevelCategories);}}if(category.getCategoryLevel() == NewBeeMallCategoryLevelEnum.LEVEL_TWO.getLevel()){//如果是二級分類則返回當前分類下的所有三級分類列表List<GoodsCategory> thirdLevelCategories = newBeeMallCategoryService.selectByLevelAndParentIdsAndNumber(Collections.singletonList(categoryId),NewBeeMallCategoryLevelEnum.LEVEL_THREE.getLevel());categoryResult.put("thirdLevelCategories",thirdLevelCategories);}return ResultGenerator.genSuccessResult(categoryResult);} NewBeeMallCategoryService.java /*** 根據id獲取分類* @param id* @return*/GoodsCategory getGoodsCategoryById(Long id);/*** 根據parentId和level獲取分類列表* @param parentIds* @param categoryLevel* @return*/List<GoodsCategory> selectByLevelAndParentIdsAndNumber(List<Long> parentIds, int categoryLevel); NewBeeMallCategoryServiceImpl.java @Autowiredprivate GoodsCategoryMapper goodsCategoryMapper;@Overridepublic GoodsCategory getGoodsCategoryById(Long id){return goodsCategoryMapper.selectByPrimaryKey(id);}@Overridepublic List<GoodsCategory> selectByLevelAndParentIdsAndNumber(List<Long> parentIds, int categoryLevel){return goodsCategoryMapper.selectByLevelAndParentIdsAndNumber(parentIds,categoryLevel,0);//0代表查詢所有} GoodsCategoryMapper.java /*** 根據id查找分類* @param categoryId* @return*/GoodsCategory selectByPrimaryKey(Long categoryId);List<GoodsCategory> selectByLevelAndParentIdsAndNumber(@Param("parentIds") List<Long> parentIds,@Param("categoryLevel") int categoryLevel,@Param("number") int number); GoodsCategoryMapper.xml <sql id="Base_Column_List">category_id, category_level, parent_id, category_name, category_rank, is_deleted,create_time, create_user, update_time, update_user</sql><select id="selectByPrimaryKey" parameterType="java.lang.Long" resultMap="BaseResultMap">select<include refid="Base_Column_List"/>from tb_newbee_mall_goods_categorywhere category_id = #{categoryId,jdbcType=BIGINT} and is_deleted=0</select><select id="selectByLevelAndParentIdsAndNumber" resultMap="BaseResultMap">select<include refid="Base_Column_List"/>from tb_newbee_mall_goods_categorywhere parent_id in<foreach item="parentId" collection="parentIds" open="(" separator="," close=")">#{parentId,jdbcType=BIGINT}</foreach>and category_level = #{categoryLevel,jdbcType=TINYINT}and is_deleted = 0order by category_rank desc<if test="number>0">limit #{number}</if></select>

三、商城首頁三級分類顯示

后臺管理系統配置好了分類之后，就是用來在前臺商城首頁顯示。首頁如圖所示。

IndexController.java @Resourceprivate NewBeeMallCategoryService newBeeMallCategoryService;@GetMapping({"/index", "/", "/index.html"})public String indexPage(HttpServletRequest request){List<NewBeeMallIndexCategoryVO> categories = newBeeMallCategoryService.getCategoriesForIndex();if (CollectionUtils.isEmpty(categories)){return "error/error_5xx";}request.setAttribute("categories",categories);//分類數據return "mall/index";} NewBeeMallCategoryService.java /*** 商城首頁返回分類數據* @return*/List<NewBeeMallIndexCategoryVO> getCategoriesForIndex(); NewBeeMallCategoryServiceImpl.java @Autowiredprivate GoodsCategoryMapper goodsCategoryMapper;@Overridepublic List<NewBeeMallIndexCategoryVO> getCategoriesForIndex() {List<NewBeeMallIndexCategoryVO> newBeeMallIndexCategoryVOS = new ArrayList<>();//獲取一級分類的固定數量的數據List<GoodsCategory> firstLevelCategories = goodsCategoryMapper.selectByLevelAndParentIdsAndNumber(Collections.singletonList(0L), NewBeeMallCategoryLevelEnum.LEVEL_ONE.getLevel(), Constants.INDEX_CATEGORY_NUMBER);if (!CollectionUtils.isEmpty(firstLevelCategories)){List<Long> firstLevelCategoryIds = firstLevelCategories.stream().map(GoodsCategory::getCategoryId).collect(Collectors.toList());//獲取二級分類的數據List<GoodsCategory> secondLevelCategories = goodsCategoryMapper.selectByLevelAndParentIdsAndNumber(firstLevelCategoryIds,NewBeeMallCategoryLevelEnum.LEVEL_TWO.getLevel(), 0);if (!CollectionUtils.isEmpty(secondLevelCategories)){List<Long> secondLevelCategoryIds = secondLevelCategories.stream().map(GoodsCategory::getCategoryId).collect(Collectors.toList());//獲取三級分類的數據List<GoodsCategory> thirdLevelCategories = goodsCategoryMapper.selectByLevelAndParentIdsAndNumber(secondLevelCategoryIds,NewBeeMallCategoryLevelEnum.LEVEL_THREE.getLevel(),0);if (!CollectionUtils.isEmpty(thirdLevelCategories)){//根據parentId 將 thirdLevelCategories分組Map<Long,List<GoodsCategory>> thirdLevelCategoryMap = thirdLevelCategories.stream().collect(groupingBy(GoodsCategory::getParentId));List<SecondLevelCategoryVO> secondLevelCategoryVOS = new ArrayList<>();//處理二級分類for (GoodsCategory secondLevelCategory : secondLevelCategories){SecondLevelCategoryVO secondLevelCategoryVO = new SecondLevelCategoryVO();BeanUtil.copyProperties(secondLevelCategory,secondLevelCategoryVO);//如果該二級分類下有數據則放入 secondLevelCategoryVOS 對象中if (thirdLevelCategoryMap.containsKey(secondLevelCategory.getCategoryId())){//根據二級分類的id取出thirdLevelCategoryMap分組中的三級分類listList<GoodsCategory> tempGoodsCategories = thirdLevelCategoryMap.get(secondLevelCategory.getCategoryId());secondLevelCategoryVO.setThirdLevelCategoryVOS((BeanUtil.copyList(tempGoodsCategories, ThirdLevelCategoryVO.class)));secondLevelCategoryVOS.add(secondLevelCategoryVO);}}//處理一級分類if (!CollectionUtils.isEmpty(secondLevelCategoryVOS)){//根據parentId將 thirdLevelCategories分組Map<Long,List<SecondLevelCategoryVO>> secondLevelCategoryVOMap = secondLevelCategoryVOS.stream().collect(groupingBy(SecondLevelCategoryVO::getParentId));for (GoodsCategory firstCategory : firstLevelCategories){NewBeeMallIndexCategoryVO newBeeMallIndexCategoryVO = new NewBeeMallIndexCategoryVO();BeanUtil.copyProperties(firstCategory,newBeeMallIndexCategoryVO);//如果該一級分類下有數據則放入 newBeeMallIndexCategoryVOS 對象中if (secondLevelCategoryVOMap.containsKey(firstCategory.getCategoryId())){//根據該一級分類的id取出secondLevelCategoryVOMap分組中的二級分類listList<SecondLevelCategoryVO> tempGoodsCategories = secondLevelCategoryVOMap.get(firstCategory.getCategoryId());newBeeMallIndexCategoryVO.setSecondLevelCategoryVOS(tempGoodsCategories);newBeeMallIndexCategoryVOS.add(newBeeMallIndexCategoryVO);}}}}}return newBeeMallIndexCategoryVOS;}else {return null;}} GoodsCategoryMapper.java <sql id="Base_Column_List">category_id, category_level, parent_id, category_name, category_rank, is_deleted,create_time, create_user, update_time, update_user</sql>List<GoodsCategory> selectByLevelAndParentIdsAndNumber(@Param("parentIds") List<Long> parentIds,@Param("categoryLevel") int categoryLevel,@Param("number") int number); GoodsCategoryMapper.xml <select id="selectByLevelAndParentIdsAndNumber" resultMap="BaseResultMap">select<include refid="Base_Column_List"/>from tb_newbee_mall_goods_categorywhere parent_id in<foreach item="parentId" collection="parentIds" open="(" separator="," close=")">#{parentId,jdbcType=BIGINT}</foreach>and category_level = #{categoryLevel,jdbcType=TINYINT}and is_deleted = 0order by category_rank desc<if test="number>0">limit #{number}</if></select>

后端代碼主要就是這些，前端表格插件使用jqgrid，數據交互主要使用thymeleaf模板引擎，因為主要想學習一下后端的知識，所以前端的代碼就不貼上來了。（以上所有代碼非本人原創，都是從“新蜂商城”這個開源項目上復制下來，僅做學習記錄使用。）

總結

以上是生活随笔為你收集整理的SpringBoot+Mybatis实现三级分类联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。