商品分类实现(一级分类、二级分类和子分类)

最新推荐文章于 2023-05-15 10:02:20 发布

Java追求者

最新推荐文章于 2023-05-15 10:02:20 发布

阅读量8.2k

点赞数 5

分类专栏： Java架构师直通车文章标签： vue mybatis java

本文链接：https://blog.csdn.net/Yearingforthefuture/article/details/106091119

版权

Java架构师直通车专栏收录该内容

15 篇文章

订阅专栏

1.封装二级分类(CategoryVO)和三级分类(SubCategoryVO)
CategoryVO

public class CategoryVO {
    private Integer id;
    private String name;
    private String type;
    private Integer fatherId;

    private List<SubCategoryVO> SubCatList;
    省略get和set方法.......
}

SubCategoryVO

public class SubCategoryVO {
    private Integer subId;
    private String SubName;
    private String SubType;
    private Integer SubFatherId;
    省略get和set方法......
}

2.查询二级分类和子分类需要自定义Sql，所以得重新创建CategoryMapperCustom接口和CategoryMapperCustom.xml
CategoryMapperCustom接口

public interface CategoryMapperCustom {
    /**
     * 查询所有的二级分类
     */
    public List<CategoryVO> getSubCatList(Integer rootCatId);

}

CategoryMapperCustom.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.lzx.mapper.CategoryMapperCustom" >
  <resultMap id="myCategoryVO"  type="com.lzx.pojo.vo.CategoryVO">
    <id column="id" property="id" />
    <result column="name" property="name"/>
    <result column="type" property="type" />
    <result column="fatherId" property="fatherId" />
    <!--
      collection:用于定义关联的list
      property:对应三级分类list属性名
      ofType：集合的类型，三级分类的VO
    -->
    <collection property="SubCatList" ofType="com.lzx.pojo.vo.SubCategoryVO">
      <id column="subId" property="subId" />
      <result column="subName" property="subName"/>
      <result column="subType" property="subType" />
      <result column="subFatherId" property="subFatherId" />
    </collection>
  </resultMap>
  <select id="getSubCatList" resultMap="myCategoryVO" parameterType="int">
    SELECT
     f.`id` AS id,
     f.`name` AS `name`,
     f.`type` AS TYPE,
     f.`father_id` AS fatherId,
     c.`id` AS subId,
     c.`name` AS `subName`,
     c.`type` AS subType,
     c.`father_id` AS subFatherId
    FROM
      category f
    LEFT JOIN
      category c
    ON
    f.id = c.father_id
    WHERE
      f.father_id = #{rootCatId}
  </select>
</mapper>

3.查询一级分类和子分类目录
CategoryService

public interface CategoryService {
    /**
     * 查询一级分类
     * @param
     * @return
     */
    public List<Category> queryAllRootLevel();

    /**
     * 查询所有的二级分类和子分类
     * @param rootCatId
     * @return
     */
    public List<CategoryVO> getSubCatlist(Integer rootCatId);
}

CategoryServiceImpl

@Service
public class CategoryServiceImpl implements CategoryService {
    @Autowired
    private CategoryMapper categoryMapper;
    @Autowired
    private CategoryMapperCustom categoryMapperCustom;

    @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public List<Category> queryAllRootLevel() {
        Example example = new Example(Category.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("type",1);
        List<Category> result = categoryMapper.selectByExample(example);
        return result;
    }
    @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public List<CategoryVO> getSubCatlist(Integer rootCatId) {
        return categoryMapperCustom.getSubCatList(rootCatId);

    }

}

前端（部分代码）

				renderCategorys() {
					var serverUrl = app.serverUrl;

					// 获得商品分类 - 大分类
					axios.get(
							serverUrl + '/index/cats', {})
						.then(res => {
							
							if (res.data.status == 200) {
								var categoryList = res.data.data
								this.categoryList = categoryList;

								var rootCatHtml = "";
								for (var i = 0; i < categoryList.length; i++) {

									var cat = categoryList[i];
									rootCatHtml += '' +
										'<li class="appliance js_toggle relative">' +
										'<div class="category-info">' +
										'<h3 class="category-name b-category-name">' +
										'<i><img src="' + cat.logo + '"></i>' +
										'<a class="ml-22" title="' + cat.name + '">' + cat.name + '</a>' +
										'</h3>' +
										'<em>&gt;</em></div>' +
										'<div class="menu-item menu-in top">' +
										'<div class="area-in">' +
										'<div class="area-bg">' +
										'<div class="menu-srot">' +
										'<div class="sort-side" rootCatId="' + cat.id + '"></div>' +
										'</div>' +
										'</div>' +
										'</div>' +
										'</div>' +
										'<b class="arrow"></b>' +
										'</li>';
								}
								var $leftNav = $('#js_climit_li');
								$leftNav.html(rootCatHtml);

								$("li").hover(function () {
									// debugger;
									$(".category-content .category-list li.first .menu-in").css("display",
										"none");
									$(".category-content .category-list li.first").removeClass("hover");

									var meLi = $(this);

									var subWapper = $(this).children("div.menu-in").children("div.area-in")
										.children("div.area-bg").children("div.menu-srot").children(
											"div.sort-side");
									// console.log(subWapper.html());
									var subCatHtml = subWapper.html();
									var rootCatId = subWapper.attr("rootCatId");
									// console.log(rootCatId);
									// 如果该节点下没有内容，则发起请求查询子分类并且渲染到页面，如果有的话就不查询了（懒加载模式）
									if (subCatHtml == null || subCatHtml == '' || subCatHtml == undefined) {
										if (rootCatId != undefined && rootCatId != null && rootCatId != '') {
											// 根据root分类id查询该分类下的所有子分类
											axios.get(
													serverUrl + '/index/subCat/' + rootCatId, {})
												.then(res => {
													if (res.data.status == 200) {
														var catList = res.data.data
														// this.catList = catList;
														// debugger;
														var subRenderHtml = '';
														for (var i = 0; i < catList.length; i++) {
															var cat = catList[i];
															subRenderHtml += '' +
																'<dl class="dl-sort">' +
																'<dt><span title="' + cat.name + '">' +
																cat.name + '</span></dt>';

															// 拼接第三级分类
															var subCatList = cat.subCatList;
															for (var j = 0; j < subCatList.length; j++) {
																var subCat = subCatList[j];
																subRenderHtml += '<dd><a title="' + subCat
																	.subName + '" href="catItems.html?searchType=catItems&catId='+ subCat.subId +'" target="_blank"><span>' +
																	subCat.subName + '</span></a></dd>'
															}

															subRenderHtml += '</dl>';
														}
														subWapper.html(subRenderHtml);
														meLi.addClass("hover");
														meLi.children("div.menu-in").css("display",
															"block");
													}
												});
										}
										// var renderHtml = '' 
										// 	+ '<dl class="dl-sort">'
										// 		+ '<dt><span title="大包装">大包装</span></dt>'
										// 		+ '<dd><a title="蒸蛋糕" href="#"><span>蒸蛋糕</span></a></dd>'
										// 		+ '<dd><a title="脱水蛋糕" href="#"><span>脱水蛋糕</span></a></dd>'
										// 		+ '<dd><a title="瑞士卷" href="#"><span>瑞士卷</span></a></dd>'
										// 		+ '<dd><a title="软面包" href="#"><span>软面包</span></a></dd>'
										// 		+ '<dd><a title="马卡龙" href="#"><span>马卡龙</span></a></dd>'
										// 		+ '<dd><a title="千层饼" href="#"><span>千层饼</span></a></dd>'
										// 		+ '<dd><a title="甜甜圈" href="#"><span>甜甜圈</span></a></dd>'
										// 		+ '<dd><a title="蒸三明治" href="#"><span>蒸三明治</span></a></dd>'
										// 		+ '<dd><a title="铜锣烧" href="#"><span>铜锣烧</span></a></dd>'
										// 	+ '</dl>'
										// 	+ '<dl class="dl-sort">'
										// 		+ '<dt><span title="两件套">两件套</span></dt>'
										// 		+ '<dd><a title="蒸蛋糕" href="#"><span>蒸蛋糕</span></a></dd>'
										// 		+ '<dd><a title="脱水蛋糕" href="#"><span>脱水蛋糕</span></a></dd>'
										// 		+ '<dd><a title="瑞士卷" href="#"><span>瑞士卷</span></a></dd>'
										// 		+ '<dd><a title="软面包" href="#"><span>软面包</span></a></dd>'
										// 		+ '<dd><a title="马卡龙" href="#"><span>马卡龙</span></a></dd>'
										// 		+ '<dd><a title="千层饼" href="#"><span>千层饼</span></a></dd>'
										// 		+ '<dd><a title="甜甜圈" href="#"><span>甜甜圈</span></a></dd>'
										// 		+ '<dd><a title="蒸三明治" href="#"><span>蒸三明治</span></a></dd>'
										// 		+ '<dd><a title="铜锣烧" href="#"><span>铜锣烧</span></a></dd>'
										// 	+ '</dl>';
										// 	$(this)
										// 		.children("div.menu-in")
										// 		.children("div.area-in")
										// 		.children("div.area-bg")
										// 		.children("div.menu-srot")
										// 		.children("div.sort-side")
										// 		.html(renderHtml);
									} else {
										$(this).addClass("hover");
										$(this).children("div.menu-in").css("display", "block");
									}

									// $(this).addClass("hover");
									// $(this).children("div.menu-in").css("display", "block")
								}, function () {
									$(this).removeClass("hover")
									$(this).children("div.menu-in").css("display", "none")
								});
								this.renderSixNewItems();
							}
						});
				},