13项目讲义品优购课程v

1、品优购系统开发第 3 章品牌管理传智播客.程序员北京市昌平区建材城西路龙办公楼一层：课程目标目标 1：完成品牌管理的列表功能目标 2：完成品牌管理的分页列表功能目标 3：完成品牌管理的增加功能目标 4：完成品牌管理的修改功能目标 5：完成品牌管理的删除功能目标 6：完成品牌管理的条件功能1.品牌列表的实现1.1 需求分析实现品牌列表的（不用分页和条件）效果如下：北京市昌平区建材城西路龙办公楼一层：1.2 前端代码1.2.1 拷贝将“02 静态原型/运营商管理”下的页面拷贝到 manager-web 下其中 plugins 文件夹中包括了 angularJS用到、bootstrap、JQuery

2、 等常用前端库，在项目中1.2.2 引入 JS修改 brand.html ，引入 JS1.2.3 指定模块和器ng-app 指令中定义的就是模块的名称ng-controller 指令用于为你的应用添加器。在器中，你可以编写代码，制作函数和变量，并使用 scope 对象来。北京市昌平区建材城西路龙办公楼一层：1.2.4 编写 JS 代码1.2.5 循环显示表格数据北京市昌平区建材城西路龙办公楼一层：entity.firstChar修改var app=angular.module(pinyougou, );/定义模块app.controller(brandC

3、ontroller ,function($scope,$http)/列表数据绑定到表单中$scope.findAll=function()$http.get(./brand/findAll.do).success(function(response)$scope.list=response;););1.2.6 初始化调用2.品牌列表分页的实现2.1 需求分析在品牌管理下方放置分页栏，实现分页功能2.2 后端代码2.2.1 分页结果封装实体在 pojo 工程中创建 entity 包，用于存放通用实体类，创建类 PageResult北京市昌平区建材城西路龙办公楼一层：package entity;

4、2.2.2 服务接口层在 sellergoods-interface 的 BrandService.java 增加方法定义北京市昌平区建材城西路龙办公楼一层：/* 返回分页列表* return*/import java.util.List;/* 分页结果封装对象* author Administrator*/public class PageResult implements Serializableprivate Long total;/总数private List rows;/当前页结果public PageResult(Long total, List rows) super(); th

5、is.total = total; this.rows = rows;/getter and setter .2.2.3 服务实现层在 sellergoods-service 的 BrandServiceImpl.java 中实现该方法PageHelper 为 MyBatis 分页插件层2.2.4在 manager-web 工程的 BrandController.java 新增方法北京市昌平区建材城西路龙办公楼一层：/* 返回全部列表* return*/ RequestMapping(/findPage)public PageResult findPage(Integer page, Inte

6、ger rows)return brandService.findPage(page, rows);Overridepublic PageResult findPage(Integer pageNum, Integer pageSize) PageHelper.startPage(pageNum, pageSize);Page page=(Page) brandMapper.selectByExample(null);return new PageResult(page.getTotal(), page.getResult();public PageResult findPage(Intege

7、r pageNum, Integer pageSize);2.3 前端代码2.3.1 HTML在 brand.html 引入分页组件构建 app 模块时引入 pagination 模块页面的表格下放置分页组件2.3.2 JS 代码在 brandController 中添加如下代码北京市昌平区建材城西路龙办公楼一层：/重新加载列表 数据$scope.reloadList=function()/切换页码$scope.findPage( $scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);var app=angu

8、lar.module(pinyougou,pagination);/定义品优购模块在页面的 body 元素上去掉 ng-init 指令的调用paginationConf 变量各属性的意义：currentPage：当前页码totalItems:总条数itemsPerPage:每页默认显示多少条北京市昌平区建材城西路龙办公楼一层：/分页控件配置$scope.paginationConf = currentPage: 1,totalItems: 10,itemsPerPage: 10,perPageOptions: 10, 20, 30, 40, 50, onChange: function()$s

9、cope.reloadList();/重新加载;/分页$scope.findPage=function(page,rows)$http.get(./brand/findPage.do?page=+page+&rows=+rows).success(function(response)$scope.list=response.rows;$scope.paginationConf.totalItems=response.total;/更新总数);perPageOptions：页码选项onChange：更改页面时触发3.增加品牌3.1 需求分析实现品牌增加功能3.2 后端代码3.2.1 服务接口层在

10、 sellergoods-interface 的 BrandService.java 新增方法定义北京市昌平区建材城西路龙办公楼一层：/* 增加*/public void add(TbBrand brand);3.2.2 服务实现层在 cn.itcast.core.service 的 BrandServiceImpl.java 实现该方法3.2.3 执行结果封装实体在 pojo 的 entity 包下创建类 Result.java北京市昌平区建材城西路龙办公楼一层：package entity;import java.io.Serializable;/* 返回结果封装* author Admi

11、nistrator*/public class Result implements Serializableprivate boolean success;private String message;public Result(boolean success, String message) super();this.success = success;this.message = message;Overridepublic void add(TbBrand brand) brandMapper.insert(brand);层3.2.4在 manager-web 的 BrandContro

12、ller.java 中新增方法北京市昌平区建材城西路龙办公楼一层：/* 增加* param brand* return*/ RequestMapping(/add)public Result add(RequestBody TbBrand brand)try brandService.add(brand);return new Result(true, 增加); catch (Exception e) e.printStackTrace();return new Result(false, 增加失败);/getter and setter.3.3 前端代码3.3.1 JS 代码3.3.2 HT

13、ML绑定表单元素，我们用 ng-m指令，绑定按钮的单击我们用 ng-click北京市昌平区建材城西路龙办公楼一层：/保存$scope.save=function()$http.post(./brand/add.do,$scope.entity ).success(function(response) if(response.success)/重新$scope.reloadList();/重新加载elsealert(response.message););北京市昌平区建材城西路龙办公楼一层：品牌编辑品牌名称 首字母 保存关闭为了每次打开窗口没有遗留上次的数据，我们可以修改新建按钮，对 entit

14、y 变量进行清空操作4.修改品牌4.1 需求分析点击列表的修改按钮，弹出窗口，修改数据后点“保存”执行保存操作4.2 后端代码4.2.1 服务接口层在 sellergoods-interface 的 BrandService.java 新增方法定义北京市昌平区建材城西路龙办公楼一层：/* 修改*/ 新建4.2.2 服务实现层在 sellergoods-service 的 BrandServiceImpl.java 新增方法实现北京市昌平区建材城西路龙办公楼一层：/* 修改*/ Overridepublic void update(TbBrand brand) brandMapper.updat

15、eByPrimaryKey(brand);/* 根据ID 获取实体* param id* return*/public void update(TbBrand brand);/* 根据ID 获取实体* param id* return*/public TbBrand findOne(Long id);层4.2.3在 manager-web 的 BrandController.java 新增方法北京市昌平区建材城西路龙办公楼一层：/* 修改* param brand* return*/ RequestMapping(/update)public Result update(RequestBody

16、 TbBrand brand)try brandService.update(brand);return new Result(true, 修改); catch (Exception e) e.printStackTrace();return new Result(false, 修改失败);/*Overridepublic TbBrand findOne(Long id)return brandMapper.selectByPrimaryKey(id);4.3 前端代码4.3.1 实现数据增加 JS 代码修改列表中的“修改”按钮，调用此方法执行实体的操作北京市昌平区建材城西路龙办公楼一层：修改

17、/实体$scope.findOne=function(id)$http.get(./brand/findOne.do?id=+id).success(function(response)$scope.entity= response;);* 获取实体* param id* return*/ RequestMapping(/findOne)public TbBrand findOne(Long id)return brandService.findOne(id);4.3.2 保存数据修改 JS 的 save 方法北京市昌平区建材城西路龙办公楼一层：/保存$scope.save=function(

18、)var methodName=add;/方法名称if($scope.entity.id!=null)/如果有 ID methodName=update;/则执行修改方法$http.post(./brand/+ methodName +.do,$scope.entity ).success(function(response) if(response.success)/重新$scope.reloadList();/重新加载elsealert(response.message););5.删除品牌5.1 需求分析点击列表前的复选框，点击删除按钮，删除选中的品牌。5.2 后端代码5.2.1 服务接口

19、层在 sellergoods-interface 的 BrandService.java 接口定义方法5.2.2 服务实现层在 sellergoods-service 的 BrandServiceImpl.java 实现该方法北京市昌平区建材城西路龙办公楼一层：/* 批量删除* param ids*/public void delete(Long ids);层5.2.3在 manager-web 的 BrandController.java 中增加方法北京市昌平区建材城西路龙办公楼一层：/* 批量删除* param ids* return*/ RequestMapping(/delete)pu

20、blic Resuelete(Long ids)try brandService.delete(ids);return new Result(true, 删除); catch (Exception e) /* 批量删除*/ Overridepublic void delete(Long ids) for(Long id:ids) brandMapper.deleteByPrimaryKey(id);5.3 前端代码5.3.1 JS主要思路：我们需要定义一个用于选中 ID 的数组，当我们点击复选框后是选择还是取消选择，如果是选择就加到数组中，如果是取消选择就从数组中移除。在点击删除按钮时需要用到

21、这个了 ID 的数组。这里我们补充一下 JS 的关于数组操作的知识（1）数组的 push 方法：向数组中添加元素（2）数组的splice 方法：从数组的指2 位移除的个数置移除指定个数的元素，参数 1 为位置，参数（3）复选框的 checked 属性：用于是否被选中北京市昌平区建材城西路龙办公楼一层：$scope.selectIds=;/选中的ID 集合/更新复选$scope.updateSelection = function($event, id) if($event.target.checked)/如果是被选中,则增加到数组$scope.selectIds.push( id);elsev

22、ar idx = $scope.selectIds.indexOf(id);$scope.selectIds.splice(idx, 1);/删除e.printStackTrace();return new Result(false, 删除失败);5.3.2 HTML（1）修改列表的复选框（2）修改删除按钮北京市昌平区建材城西路龙办公楼一层： 删除/批量删除$scope.dele=function()/获取选中的复选框$http.get(./brand/delete.do?ids=+$scope.selectIds).success(function(response) if(response

23、.success)$scope.reloadList();/刷新列表);6.品牌条件6.1 需求分析实现品牌条件功能，输入品牌名称、首字母后，并分页。6.2 后端代码6.2.1 服务接口层在 sellergoods-interface 工程的 BrandService.java 方法增加方法定义6.2.2 服务实现层在 sellergoods-service 工程 BrandServiceImpl.java 实现该方法北京市昌平区建材城西路龙办公楼一层：Overridepublic PageResult findPage(TbBrand brand, int pageNum, int page

24、Size) PageHelper.startPage(pageNum, pageSize);TbBrandExample example=new TbBrandExample(); Criteria criteria = example.createCriteria();if(brand!=null)/* 分页* param pageNum 当前页 码* param pageSize 每页数* return*/public PageResult findPage(TbBrand brand, int pageNum,int pageSize);层6.2.3在 manager-web 的 BrandController.java 增加方法北京市昌平区建材城西路龙办公楼一层：/*+分页* param brand* param page* param rows* return*/ RequestMapping(/search)public PageResult search(RequestBody TbBrand brand, int page, int rows )return bra