商品分类实现(一级分类、二级分类和子分类)
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 += '' +
'' +
'' +
'' +
'' +
'';
}
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 += '' +
''
+
'+ cat.name + '">' +
cat.name + ' ';
// 拼接第三级分类
var subCatList = cat.subCatList;
for (var j = 0; j < subCatList.length; j++) {
var subCat = subCatList[j];
subRenderHtml += '+ subCat
.subName + '" href="catItems.html?searchType=catItems&catId='+ subCat.subId +'" target="_blank">' +
subCat.subName + ''
}
subRenderHtml += '';
}
subWapper.html(subRenderHtml);
meLi.addClass("hover");
meLi.children("div.menu-in").css("display",
"block");
}
});
}
// var renderHtml = ''
// + ''
// + '大包装 '
// + '蒸蛋糕 '
// + '脱水蛋糕 '
// + '瑞士卷 '
// + '软面包 '
// + '马卡龙 '
// + '千层饼 '
// + '甜甜圈 '
// + '蒸三明治 '
// + '铜锣烧 '
// + ''
// + ''
// + '两件套 '
// + '蒸蛋糕 '
// + '脱水蛋糕 '
// + '瑞士卷 '
// + '软面包 '
// + '马卡龙 '
// + '千层饼 '
// + '甜甜圈 '
// + '蒸三明治 '
// + '铜锣烧 '
// + '';
// $(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();
}
});
},