黑马程序员技术交流社区

标题: 【郑州校区】品优购电商系统开发第 5 章一 [打印本页]

作者: 我是楠楠 时间: 2020-5-20 16:28
标题: 【郑州校区】品优购电商系统开发第 5 章一

【郑州校区】品优购电商系统开发第 5 章一

品优购电商系统开发
第 5 章
商品录入【1】
课程目标
目标 1：完成商品分类功能
目标 2：了解电商概念 SPU 和 SKU
目标 3：掌握富文本编辑器的使用
目标 4：掌握上传服务器 FastDFS
目标 5：掌握 angularJS 图片上传
1.商品分类
1.1 需求及表结构分析
1.1.1 需求分析
实现三级商品分类列表查询功能
进入页面首先显示所以一级分类，效果如下：

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

1.1.2 表结构分析
tb_item_cat 商品分类表

1.2 列表实现
1.2.1 后端代码
修改 pinyougou-sellergoods-interface 工程 ItemCatService 接口，新增方法定义

[AppleScript] 纯文本查看 复制代码

/**

* 根据上级 ID 返回列表

* @return

*/

public List<TbItemCat> findByParentId(Long parentId);

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

[AppleScript] 纯文本查看 复制代码

/**

* 根据上级 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

[AppleScript] 纯文本查看 复制代码

 /**

* 根据上级 ID 查询列表

* @param parentId

* @return

*/

@RequestMapping("/findByParentId")

public List<TbItemCat> findByParentId(Long parentId){

return itemCatService.findByParentId(parentId);

}

1.2.2 前端代码
（1）修改 itemCatService.js

[AppleScript] 纯文本查看 复制代码

 //根据上级 ID 查询下级列表

this.findByParentId=function(parentId){

return $http.get('../itemCat/findByParentId.do?parentId='+parentId);

}

（2）修改 itemCatController.js

[AppleScript] 纯文本查看 复制代码

 //根据上级 ID 显示下级列表

$scope.findByParentId=function(parentId){

itemCatService.findByParentId(parentId).success(

function(response){

$scope.list=response;

}

);

}

（3）修改 item_cat.html
引入 JS

[AppleScript] 纯文本查看 复制代码

 <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>

指令定义

[AppleScript] 纯文本查看 复制代码

 <body

class="hold-transition skin-red sidebar-mini"

ng-app="pinyougou"

ng-controller="itemCatController" ng-init="findByParentId(0)">

循环列表

[AppleScript] 纯文本查看 复制代码

<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>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2