品優購電商系統開發第2章品牌管理傳智播客.黑馬程序員課程目標目標1：運用AngularJS前端框架的常用指令目標2：完成品牌管理的列表功能目標3：完成品牌管理的分頁列表功能目標4：完成品牌管理的增加功能目標5：完成品牌管理的修改功能目標6：完成品牌管理的刪除功能目標7：完成品牌管理的條件查詢功能1.前端框架AngularJS入門1.1 AngularJS簡介AngularJS誕生于2009年，由Misko Hevery 等人創建，后為Google所收購。是一款優秀的前端JS框架，已經被用于Google的多款產品當中。AngularJS有著諸多特性，最為核心的是：MVC、模塊化、自動化雙向數據綁定、依賴注入等等。 1.2 AngularJS四大特征1.2.1 MVC模式Angular遵循軟件工程的MVC模式,并鼓勵展現，數據，和邏輯組件之間的松耦合.通過依賴注入（dependency injection），Angular為客戶端的Web應用帶來了傳統服務端的服務，例如獨立于視圖的控制。 因此，后端減少了許多負擔，產生了更輕的Web應用。Model:數據,其實就是angular變量($scope.XX);View: 數據的呈現,Html+Directive(指令);Controller:操作數據,就是function,數據的增刪改查;1.2.2雙向綁定AngularJS是建立在這樣的信念上的：即聲明式編程應該用于構建用戶界面以及編寫軟件構建，而指令式編程非常適合來表示業務邏輯。框架采用并擴展了傳統HTML，通過雙向的數據綁定來適應動態內容，雙向的數據綁定允許模型和視圖之間的自動同步。因此，AngularJS使得對DOM的操作不再重要并提升了可測試性。1.2.3依賴注入依賴注入(Dependency Injection,簡稱DI)是一種設計模式, 指某個對象依賴的其他對象無需手工創建，只需要“吼一嗓子”，則此對象在創建時，其依賴的對象由框架來自動創建并注入進來,其實就是最少知識法則;模塊中所有的service和provider兩類對象，都可以根據形參名稱實現DI.1.2.4模塊化設計高內聚低耦合法則1)官方提供的模塊 ng、ngRoute、ngAnimate 2)用戶自定義的模塊 angular.module(模塊名, )1.3入門小Demo1.3.1 表達式入門小Demo-1100+100執行結果如下：表達式的寫法是表達式 表達式可以是變量或是運算式ng-app 指令作用是告訴子元素一下的指令是歸angularJs的,angularJs會識別的ng-app指令定義了 AngularJS 應用程序的根元素。ng-app指令在網頁加載完畢時會自動引導（自動初始化）應用程序。1.3.2 雙向綁定入門小Demo-1 雙向綁定請輸入你的姓名：myname,你好運行效果如下：ng-model 指令用于綁定變量,這樣用戶在文本框輸入的內容會綁定到變量上，而表達式可以實時地輸出變量。1.3.3 初始化指令我們如果希望有些變量具有初始值，可以使用ng-init指令來對變量初始化入門小Demo-3 初始化請輸入你的姓名：myname,你好1.3.4 控制器入門小Demo-3 初始化var app=angular.module(myApp,); /定義了一個叫myApp的模塊/定義控制器app.controller(myController,function($scope)$scope.add=function()return parseInt($scope.x)+parseInt($scope.y););x:y:運算結果：add()運行結果如下：ng-controller用于指定所使用的控制器。理解 $scope：$scope的使用貫穿整個AngularJS App應用,它與數據模型相關聯,同時也是表達式執行的上下文.有了$scope就在視圖和控制器之間建立了一個通道,基于作用域視圖在修改數據時會立刻更新$scope,同樣的$scope發生改變時也會立刻重新渲染視圖.1.3.5 事件指令入門小Demo-5 事件指令var app=angular.module(myApp,); /定義了一個叫myApp的模塊/定義控制器app.controller(myController,function($scope)$scope.add=function()$scope.z= parseInt($scope.x)+parseInt($scope.y););x:y:運算結果：z運行結果：ng-click 是最常用的單擊事件指令，再點擊時觸發控制器的某個方法1.3.6 循環數組入門小Demo-6 循環數據var app=angular.module(myApp,); /定義了一個叫myApp的模塊/定義控制器app.controller(myController,function($scope)$scope.list= 100,192,203,434 ;/定義數組);x這里的ng-repeat指令用于循環數組變量。運行結果如下：1.3.7 循環對象數組入門小Demo-7 循環對象數組var app=angular.module(myApp,); /定義了一個叫myApp的模塊/定義控制器app.controller(myController,function($scope)$scope.list= name:張三,shuxue:100,yuwen:93,name:李四,shuxue:88,yuwen:87,name:王五,shuxue:77,yuwen:56;/定義數組);姓名數學語文entity.shuxueentity.yuwen運行結果如下：1.3.8 內置服務我們的數據一般都是從后端獲取的，那么如何獲取數據呢？我們一般使用內置服務$http來實現。注意：以下代碼需要在tomcat中運行。入門小Demo-8 內置服務var app=angular.module(myApp,); /定義了一個叫myApp的模塊/定義控制器app.controller(myController,function($scope,$http)$scope.findAll=function()$http.get(data.json).success(function(response)$scope.list=response;););姓名數學語文entity.shuxueentity.yuwen建立文件 data.jsonname:張三,shuxue:100,yuwen:93,name:李四,shuxue:88,yuwen:87,name:王五,shuxue:77,yuwen:56,name:趙六,shuxue:67,yuwen:862.品牌列表的實現2.1需求分析實現品牌列表的查詢（不用分頁和條件查詢）效果如下：2.2前端代碼2.2.1拷貝資源將“資源/靜態原型/運營商管理后臺”下的頁面資源拷貝到pinyougou-manager-web下其中plugins文件夾中包括了angularJS 、bootstrap、JQuery等常用前端庫，我們將在項目中用到2.2.2引入JS修改brand.html ，引入JS2.2.3指定模塊和控制器ng-app指令中定義的就是模塊的名稱ng-controller指令用于為你的應用添加控制器。在控制器中，你可以編寫代碼，制作函數和變量，并使用 scope 對象來訪問。2.2.4編寫JS代碼 var app=angular.module(pinyougou, );/定義模塊app.controller(brandController ,function($scope,$http) /讀取列表數據綁定到表單中 $scope.findAll=function()$http.get(./brand/findAll.do).success(function(response)$scope.list=response;););2.2.5循環顯示表格數據 entity.id entity.firstChar 修改 2.2.6初始化調用3.品牌列表分頁的實現3.1需求分析在品牌管理下方放置分頁欄，實現分頁功能3.2后端代碼3.2.1 分頁結果封裝實體在pinyougou-pojo工程中創建entity包，用于存放通用實體類，創建類PageResultpackage entity;import java.util.List;/* * 分頁結果封裝對象 * author Administrator * */public class PageResult implements Serializableprivate long total;/總記錄數private List rows;/當前頁結果public PageResult(long total, List rows) super();this.total = total;this.rows = rows; /getter and setter .3.2.2 服務接口層在pinyougou-sellergoods-interface的BrandService.java 增加方法定義/* * 返回分頁列表 * return */public PageResult findPage(int pageNum,int pageSize);3.2.3 服務實現層在pinyougou-sellergoods-service的BrandServiceImpl.java中實現該方法Overridepublic PageResult findPage(int pageNum, int pageSize) PageHelper.startPage(pageNum, pageSize);Page page= (Page) brandMapper.selectByExample(null);return new PageResult(page.getTotal(), page.getResult();PageHelper為MyBatis分頁插件3.2.4 控制層在pinyougou-manager-web工程的BrandController.java新增方法/* * 返回全部列表 * return */RequestMapping(/findPage)public PageResult findPage(int page,int rows)return brandService.findPage(page, rows);3.3前端代碼3.3.1 HTML在brand.html引入分頁組件構建app模塊時引入pagination模塊var app=angular.module(pinyougou,pagination);/定義品優購模塊頁面的表格下放置分頁組件 3.3.2 JS代碼在brandController中添加如下代碼/重新加載列表 數據$scope.reloadList=function() /切換頁碼 $scope.findPage( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);/分頁控件配置 $scope.paginationConf = currentPage: 1, totalItems: 10, itemsPerPage: 10, perPageOptions: 10, 20, 30, 40, 50, onChange: function() $scope.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;/更新總記錄數);在頁面的body元素上去掉ng-init指令的調用paginationConf 變量各屬性的意義：currentPage：當前頁碼totalItems:總條數itemsPerPage:perPageOptions：頁碼選項onChange：更改頁面時觸發事件4.增加品牌4.1需求分析實現品牌增加功能4.2后端代碼4.2.1 服務接口層在pinyougou-sellergoods-interface的BrandService.java新增方法定義/* * 增加*/public void add(TbBrand brand);4.2.2 服務實現層在com.pinyougou.sellergoods.service.impl的BrandServiceImpl.java實現該方法Overridepublic void add(TbBrand brand) brandMapper.insert(brand);4.2.3 執行結果封裝實體在pinyougou-pojo的entity包下創建類Result.javapackage entity;import java.io.Serializable;/* * 返回結果封裝 * author Administrator * */public class Result implements Serializableprivate boolean success;private String message;public Result(boolean success, String message) super();this.success = success;this.message = message;/getter and setter.4.2.4 控制層在pinyougou-manager-web的BrandController.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, 增加失敗);4.3前端代碼4.3.1 JS代碼/保存 $scope.save=function()$http.post(./brand/add.do,$scope.entity ).success(function(response)if(response.success)/重新查詢 $scope.reloadList();/重新加載 else alert(response.message); );4.3.2 HTML綁定表單元素，我們用ng-model指令，綁定按鈕的單擊事件我們用ng-click 品牌編輯 品牌名稱 首字母 保存關閉 為了每次打開窗口沒有遺留上次的數據，我們可以修改新建按鈕，對entity變量進行清空操作 新建5.修改品牌5.1 需求分析點擊列表的修改按鈕，彈出窗口，修改數據后點“保存”執行保存操作5.2 后端代碼5.2.1 服務接口層在pinyougou-sellergoods-interface的BrandService.java新增方法定義/* * 修改 */public void update(TbBrand brand);/* * 根據ID獲取實體 * param id * return */public TbBrand findOne(Long id);5.2.2 服務實現層在pinyougou-sellergoods-service的BrandServiceImpl.java新增方法實現/* * 修改 */Overridepublic void update(TbBrand brand)brandMapper.updateByPrimaryKey(brand);/* * 根據ID獲取實體 * param id * return */Overridepublic TbBrand findOne(Long id)return brandMapper.selectByPrimaryKey(id);5.2.3 控制層在pinyougou-manager-web的BrandController.java新增方法/* * 修改 * param brand * return */RequestMapping(/update)public Result update(RequestBody TbBrand brand)try brandService.update(brand);return new Result(true, 修改成功); catch (Exception e) e.printStackTrace();return new Result(false, 修改失敗);/* * 獲取實體 * param id * return */RequestMapping(/findOne)public TbBrand findOne(Long id)return brandService.findOne(id);5.3 前端代碼5.3.1 實現數據查詢增加JS代碼/查詢實體 $scope.findOne=function(id)$http.get(./brand/findOne.do?id=+id).success(function(response)$scope.entity= response; );修改列表中的“修改”按鈕，調用此方法執行查詢實體的操作修改5.3.2 保存數據修改JS的save方法/保存 $scope.save=function()var methodName=add;/方法名稱if($scope.entity.id!=null)/如果有IDmethodName=update;/則執行修改方法 $http.post(./brand/+ methodName +.do,$scope.entity ).success(function(response)if(response.success) /重新查詢 $scope.reloadList();/重新加載else alert(response.message); );6.刪除品牌6.1 需求分析點擊列表前的復選框，點擊刪除按鈕，刪除選中的品牌。6.2 后端代碼6.2.1 服務接口層在pinyougou-sellergoods-interface的BrandService.java接口定義方法/* * 批量刪除 * param ids */public void delete(Long ids);6.2.2 服務實現層在pinyougou-sellergoods-service的BrandServiceImpl.java實現該方法/* * 批量刪除 */Overridepublic void delete(Long ids) for(Long id:ids)brandMapper.deleteByPrimaryKey(id);6.2.3 控制層在pinyougou-manager-web的BrandController.java中增加方法/* * 批量刪除 * param ids * return */RequestMapping(/delete)public Result delete(Long ids)try brandService.delete(ids);return new Result(true, 刪除成功); catch (Exception e) e.printStackTrace();return new Result(false, 刪除失敗);6.3 前端代碼6.3.1 JS主要思路：我們需要定義一個用于存儲選中ID的數組，當我們點擊復選框后判斷是選擇還是取消選擇，如果是選擇就加到數組中，如果是取消選擇就從數組中移除。在點擊刪除按鈕時需要用到這個存儲了ID的數組。這里我們補充一下JS的關于數組操作的知識（1） 數組的push方法：向數組中添加元素（2） 數組的splice方法：從數組的指定位置移除指定個數的元素 ，參數1為位置 ，參數2位移除的個數 （3）復選框的checked屬性：用于判斷是否被選中$scope.selectIds=;/選中的ID集合 /更新復選$scope.updateSelection = function($event, id) if($event.target.checked)/如果是被選中,則增加到數組$scope.selectIds.push( id);elsevar idx = $scope.selectIds.indexOf(id); $scope.selectIds.splice(idx, 1);/刪除 /批量刪除 $scope.dele=function()/獲取選中的復選框$http.get(./brand/delete.do?ids=+$scope.selectIds).success(function(response)if(response.success)$scope.reloadList();/刷新列表);6.3.2 HTML（1）修改列表的復選框（2）修改刪除按鈕 刪除 7.品牌條件查詢7.1需求分析實現品牌條件查詢功能，輸入品牌名稱、首字母后查詢，并分頁。7.2后端代碼7.2.1 服務接口層在pinyougou-sellergoods-interface工程的BrandService.java方法增加方法定義/* * 分頁 * param pageNum 當前頁 碼 * param pageSize 每頁記錄數 * return */public PageResult findPage(TbBrand brand, int pageNum,int pageSize);7.2.2 服務實現層在pinyougou-sellergoods-service工程BrandServiceImpl.java實現該方法Overridepublic PageResult findPage(TbBrand brand, int pageNum, int pageSize) PageHelper.startPage(pageNum, pageSize);TbBrandExample example=new TbBrandExample();Criteria criteria = example.c