品優(yōu)購(gòu)_day02_課程講義_V1.3

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