23分布式电商项目 - 商品分类管理（列表实现）

需求分析

实现三级商品分类列表查询功能
进入页面首先显示所以一级分类，效果如下：

点击列表行的查询下级按钮，进入下级分类列表，同时更新面包屑导航

再次点击表行的查询下级按钮，进入三级分类列表，因为三级分类属于最后一级，所以在列表中不显示查询下级按钮，同时更新面包屑导航

表结构分析

tb_item_cat 商品分类表

列表实现

1.后端代码

修改 pinyougou-sellergoods-interface 工程ItemCatService 接口，新增方法定义

/**
* 根据上级 ID 返回列表
* @return
*/
public List findByParentId(Long parentId);

修改 pinyougou-sellergoods-interface 工程ItemCatServiceImpl ，实现方法

/**
* 根据上级 ID 查询列表
*/
@Override
public List findByParentId(Long parentId) {
	TbItemCatExample example1=new TbItemCatExample();
	Criteria criteria1 = example1.createCriteria();
	criteria1.andParentIdEqualTo(parentId);
	return itemCatMapper.selectByExample(example1);
}

修改 pinyougou-manager-web 的 ItemCatController.java

/**
* 根据上级 ID 查询列表
* @param parentId
* @return
*/
@RequestMapping("/findByParentId")
	public List findByParentId(Long parentId){
	return itemCatService.findByParentId(parentId);
}

2.前端代码

（1）修改 itemCatService.js

//根据上级 ID 查询下级列表
this.findByParentId=function(parentId){
	return $http.get('../itemCat/findByParentId.do?parentId='+parentId);
}

（2）修改 itemCatController.js

//根据上级 ID 显示下级列表
$scope.findByParentId=function(parentId){
itemCatService.findByParentId(parentId).success(
	function(response){
		$scope.list=response;
	}
);
}

（3）修改 item_cat.html
引入 JS

指令定义

循环列表

	  
	{{entity.id}}
	{{entity.name}}  
	{{entity.typeId}}  
	  
		查询下级  
		修改