13項(xiàng)目講義品優(yōu)購(gòu)課程v

1、品優(yōu)購(gòu)系統(tǒng)開(kāi)發(fā)第 3 章品牌管理傳智播客.程序員北京市昌平區(qū)建材城西路龍辦公樓一層：課程目標(biāo)目標(biāo) 1：完成品牌管理的列表功能目標(biāo) 2：完成品牌管理的分頁(yè)列表功能目標(biāo) 3：完成品牌管理的增加功能目標(biāo) 4：完成品牌管理的修改功能目標(biāo) 5：完成品牌管理的刪除功能目標(biāo) 6：完成品牌管理的條件功能1.品牌列表的實(shí)現(xiàn)1.1 需求分析實(shí)現(xiàn)品牌列表的（不用分頁(yè)和條件）效果如下：北京市昌平區(qū)建材城西路龍辦公樓一層：1.2 前端代碼1.2.1 拷貝將“02 靜態(tài)原型/運(yùn)營(yíng)商管理”下的頁(yè)面拷貝到 manager-web 下其中 plugins 文件夾中包括了 angularJS用到、bootstrap、JQuery

2、 等常用前端庫(kù)，在項(xiàng)目中1.2.2 引入 JS修改 brand.html ，引入 JS1.2.3 指定模塊和器ng-app 指令中定義的就是模塊的名稱ng-controller 指令用于為你的應(yīng)用添加器。在器中，你可以編寫(xiě)代碼，制作函數(shù)和變量，并使用 scope 對(duì)象來(lái)。北京市昌平區(qū)建材城西路龍辦公樓一層：1.2.4 編寫(xiě) JS 代碼1.2.5 循環(huán)顯示表格數(shù)據(jù)北京市昌平區(qū)建材城西路龍辦公樓一層：entity.firstChar修改var app=angular.module(pinyougou, );/定義模塊app.controller(brandC

3、ontroller ,function($scope,$http)/列表數(shù)據(jù)綁定到表單中$scope.findAll=function()$http.get(./brand/findAll.do).success(function(response)$scope.list=response;););1.2.6 初始化調(diào)用2.品牌列表分頁(yè)的實(shí)現(xiàn)2.1 需求分析在品牌管理下方放置分頁(yè)欄，實(shí)現(xiàn)分頁(yè)功能2.2 后端代碼2.2.1 分頁(yè)結(jié)果封裝實(shí)體在 pojo 工程中創(chuàng)建 entity 包，用于存放通用實(shí)體類，創(chuàng)建類 PageResult北京市昌平區(qū)建材城西路龍辦公樓一層：package entity;

4、2.2.2 服務(wù)接口層在 sellergoods-interface 的 BrandService.java 增加方法定義北京市昌平區(qū)建材城西路龍辦公樓一層：/* 返回分頁(yè)列表* return*/import java.util.List;/* 分頁(yè)結(jié)果封裝對(duì)象* author Administrator*/public class PageResult implements Serializableprivate Long total;/總數(shù)private List rows;/當(dāng)前頁(yè)結(jié)果public PageResult(Long total, List rows) super(); th

5、is.total = total; this.rows = rows;/getter and setter .2.2.3 服務(wù)實(shí)現(xiàn)層在 sellergoods-service 的 BrandServiceImpl.java 中實(shí)現(xiàn)該方法PageHelper 為 MyBatis 分頁(yè)插件層2.2.4在 manager-web 工程的 BrandController.java 新增方法北京市昌平區(qū)建材城西路龍辦公樓一層：/* 返回全部列表* 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 引入分頁(yè)組件構(gòu)建 app 模塊時(shí)引入 pagination 模塊頁(yè)面的表格下放置分頁(yè)組件2.3.2 JS 代碼在 brandController 中添加如下代碼北京市昌平區(qū)建材城西路龍辦公樓一層：/重新加載列表 數(shù)據(jù)$scope.reloadList=function()/切換頁(yè)碼$scope.findPage( $scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);var app=angu

8、lar.module(pinyougou,pagination);/定義品優(yōu)購(gòu)模塊在頁(yè)面的 body 元素上去掉 ng-init 指令的調(diào)用paginationConf 變量各屬性的意義：currentPage：當(dāng)前頁(yè)碼totalItems:總條數(shù)itemsPerPage:每頁(yè)默認(rèn)顯示多少條北京市昌平區(qū)建材城西路龍辦公樓一層：/分頁(yè)控件配置$scope.paginationConf = currentPage: 1,totalItems: 10,itemsPerPage: 10,perPageOptions: 10, 20, 30, 40, 50, onChange: function()$s

9、cope.reloadList();/重新加載;/分頁(yè)$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;/更新總數(shù));perPageOptions：頁(yè)碼選項(xiàng)onChange：更改頁(yè)面時(shí)觸發(fā)3.增加品牌3.1 需求分析實(shí)現(xiàn)品牌增加功能3.2 后端代碼3.2.1 服務(wù)接口層在

10、 sellergoods-interface 的 BrandService.java 新增方法定義北京市昌平區(qū)建材城西路龍辦公樓一層：/* 增加*/public void add(TbBrand brand);3.2.2 服務(wù)實(shí)現(xiàn)層在 cn.itcast.core.service 的 BrandServiceImpl.java 實(shí)現(xiàn)該方法3.2.3 執(zhí)行結(jié)果封裝實(shí)體在 pojo 的 entity 包下創(chuàng)建類 Result.java北京市昌平區(qū)建材城西路龍辦公樓一層：package entity;import java.io.Serializable;/* 返回結(jié)果封裝* 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 中新增方法北京市昌平區(qū)建材城西路龍辦公樓一層：/* 增加* 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北京市昌平區(qū)建材城西路龍辦公樓一層：/保存$scope.save=function()$http.post(./brand/add.do,$scope.entity ).success(function(response) if(response.success)/重新$scope.reloadList();/重新加載elsealert(response.message););北京市昌平區(qū)建材城西路龍辦公樓一層：品牌編輯品牌名稱 首字母 保存關(guān)閉為了每次打開(kāi)窗口沒(méi)有遺留上次的數(shù)據(jù)，我們可以修改新建按鈕，對(duì) entit

14、y 變量進(jìn)行清空操作4.修改品牌4.1 需求分析點(diǎn)擊列表的修改按鈕，彈出窗口，修改數(shù)據(jù)后點(diǎn)“保存”執(zhí)行保存操作4.2 后端代碼4.2.1 服務(wù)接口層在 sellergoods-interface 的 BrandService.java 新增方法定義北京市昌平區(qū)建材城西路龍辦公樓一層：/* 修改*/ 新建4.2.2 服務(wù)實(shí)現(xiàn)層在 sellergoods-service 的 BrandServiceImpl.java 新增方法實(shí)現(xiàn)北京市昌平區(qū)建材城西路龍辦公樓一層：/* 修改*/ Overridepublic void update(TbBrand brand) brandMapper.updat

15、eByPrimaryKey(brand);/* 根據(jù)ID 獲取實(shí)體* param id* return*/public void update(TbBrand brand);/* 根據(jù)ID 獲取實(shí)體* param id* return*/public TbBrand findOne(Long id);層4.2.3在 manager-web 的 BrandController.java 新增方法北京市昌平區(qū)建材城西路龍辦公樓一層：/* 修改* 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 實(shí)現(xiàn)數(shù)據(jù)增加 JS 代碼修改列表中的“修改”按鈕，調(diào)用此方法執(zhí)行實(shí)體的操作北京市昌平區(qū)建材城西路龍辦公樓一層：修改

17、/實(shí)體$scope.findOne=function(id)$http.get(./brand/findOne.do?id=+id).success(function(response)$scope.entity= response;);* 獲取實(shí)體* param id* return*/ RequestMapping(/findOne)public TbBrand findOne(Long id)return brandService.findOne(id);4.3.2 保存數(shù)據(jù)修改 JS 的 save 方法北京市昌平區(qū)建材城西路龍辦公樓一層：/保存$scope.save=function(

18、)var methodName=add;/方法名稱if($scope.entity.id!=null)/如果有 ID methodName=update;/則執(zhí)行修改方法$http.post(./brand/+ methodName +.do,$scope.entity ).success(function(response) if(response.success)/重新$scope.reloadList();/重新加載elsealert(response.message););5.刪除品牌5.1 需求分析點(diǎn)擊列表前的復(fù)選框，點(diǎn)擊刪除按鈕，刪除選中的品牌。5.2 后端代碼5.2.1 服務(wù)接口

19、層在 sellergoods-interface 的 BrandService.java 接口定義方法5.2.2 服務(wù)實(shí)現(xiàn)層在 sellergoods-service 的 BrandServiceImpl.java 實(shí)現(xiàn)該方法北京市昌平區(qū)建材城西路龍辦公樓一層：/* 批量刪除* param ids*/public void delete(Long ids);層5.2.3在 manager-web 的 BrandController.java 中增加方法北京市昌平區(qū)建材城西路龍辦公樓一層：/* 批量刪除* 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主要思路：我們需要定義一個(gè)用于選中 ID 的數(shù)組，當(dāng)我們點(diǎn)擊復(fù)選框后是選擇還是取消選擇，如果是選擇就加到數(shù)組中，如果是取消選擇就從數(shù)組中移除。在點(diǎn)擊刪除按鈕時(shí)需要用到

21、這個(gè)了 ID 的數(shù)組。這里我們補(bǔ)充一下 JS 的關(guān)于數(shù)組操作的知識(shí)（1）數(shù)組的 push 方法：向數(shù)組中添加元素（2）數(shù)組的splice 方法：從數(shù)組的指2 位移除的個(gè)數(shù)置移除指定個(gè)數(shù)的元素，參數(shù) 1 為位置，參數(shù)（3）復(fù)選框的 checked 屬性：用于是否被選中北京市昌平區(qū)建材城西路龍辦公樓一層：$scope.selectIds=;/選中的ID 集合/更新復(fù)選$scope.updateSelection = function($event, id) if($event.target.checked)/如果是被選中,則增加到數(shù)組$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）修改列表的復(fù)選框（2）修改刪除按鈕北京市昌平區(qū)建材城西路龍辦公樓一層： 刪除/批量刪除$scope.dele=function()/獲取選中的復(fù)選框$http.get(./brand/delete.do?ids=+$scope.selectIds).success(function(response) if(response

23、.success)$scope.reloadList();/刷新列表);6.品牌條件6.1 需求分析實(shí)現(xiàn)品牌條件功能，輸入品牌名稱、首字母后，并分頁(yè)。6.2 后端代碼6.2.1 服務(wù)接口層在 sellergoods-interface 工程的 BrandService.java 方法增加方法定義6.2.2 服務(wù)實(shí)現(xiàn)層在 sellergoods-service 工程 BrandServiceImpl.java 實(shí)現(xiàn)該方法北京市昌平區(qū)建材城西路龍辦公樓一層：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)/* 分頁(yè)* param pageNum 當(dāng)前頁(yè) 碼* param pageSize 每頁(yè)數(shù)* return*/public PageResult findPage(TbBrand brand, int pageNum,int pageSize);層6.2.3在 manager-web 的 BrandController.java 增加方法北京市昌平區(qū)建材城西路龍辦公樓一層：/*+分頁(yè)* param brand* param page* param rows* return*/ RequestMapping(/search)public PageResult search(RequestBody TbBrand brand, int page, int rows )return bra