0
点赞
收藏
分享

微信扫一扫

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

秀儿2020 2022-03-24 阅读 63


需求分析

实现三级商品分类列表查询功能

进入页面首先显示所以一级分类,效果如下:

23分布式电商项目 - 商品分类管理(列表实现)_javascript

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

23分布式电商项目 - 商品分类管理(列表实现)_表结构_02

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

23分布式电商项目 - 商品分类管理(列表实现)_表结构_03

表结构分析

tb_item_cat 商品分类表

23分布式电商项目 - 商品分类管理(列表实现)_ide_04

列表实现

1.后端代码

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

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

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

/**
* 根据上级 ID 查询列表
*/
@Override
public List<TbItemCat> 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<TbItemCat> 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

<script type="text/javascript" src="../plugins/angularjs/angular.min.js"> </script>
<script type="text/javascript" src="../js/base.js"> </script>
<script type="text/javascript" src="../js/service/itemCatService.js"> </script>
<script type="text/javascript" src="../js/controller/baseController.js"> </script>
<script type="text/javascript" src="../js/controller/itemCatController.js"> </script>

指令定义

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="itemCatController" ng-init="findByParentId(0)">

循环列表

<tr ng-repeat="entity in list">
<td><input type="checkbox" ></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.typeId}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" ng-click="findByParentId(entity.id)">查询下级</button>
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>
</td>
</tr>



举报

相关推荐

0 条评论