第四階段第03天優(yōu)樂選課程講義v

1、優(yōu)樂選系統(tǒng)開發(fā)第 3 章規(guī)格及模板管理優(yōu)就業(yè).JAVA 教研室北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：課程目標(biāo)目標(biāo) 1：理解和運(yùn)用 angularJS 的 service目標(biāo) 2：理解和運(yùn)用器繼承目標(biāo) 3：掌握代碼的使用目標(biāo) 4：實(shí)現(xiàn)規(guī)格管理目標(biāo) 5：實(shí)現(xiàn)模板管理1.前端分層開發(fā)1.1 需求分析我們在上次課學(xué)習(xí)了 angularJS 并完成的品牌管理的增刪改查功能。但是我們看代碼，JS 和 html 都放在一起，并不利于我們后期的維護(hù)。我們可以在前端代碼中也運(yùn)用 MVC 的設(shè)計(jì)模式，將代碼進(jìn)行分離，提高程序的可維護(hù)性。1.2 自定義服務(wù)在 AngularJS 中，服務(wù)是一個(gè)函數(shù)或?qū)ο螅稍谀?/p>

2、的 AngularJS 應(yīng)用中使用。我們在上次課中使用了內(nèi)置服務(wù)$http .其實(shí)我們也可以來定義服務(wù)，而服務(wù)會(huì)封裝一些操作。我們在不同的器中可以調(diào)用同一個(gè)服務(wù)，這樣服務(wù)的代碼將會(huì)被重用。我們現(xiàn)在就修改一下我們的品牌管理代碼，使用自定義服務(wù)。北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：<script type="text/javascript">/定義模塊var app=angular.module('youlexuan', 'pagination');/定義模塊，增加分頁模塊/定義 Service 層app.service(

3、9;brandService',function($http)/定義方法列表數(shù)據(jù)北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：this.findAll=function()return $http.get('./brand/findAll.do');/獲取分頁數(shù)據(jù)this.findPage=function(page,rows)return $http.get('./brand/findPage.do?page='+page+'&rows='+rows);/保存this.add=function(entity)return $http

4、.post('./brand/add.do',entity);/修改this.update=function(entity)return $http.post('./brand/update.do',entity);/刪除this.dele=function(ids)return $http.get('./brand/delete.do?ids='+ids);/獲取制定 id 品牌信息this.findOne=function(id)return $http.get('./brand/findOne.do?id='+id);北京海

5、淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：/搜索this.search=function(page,rows,searchEntity)return$http.post('./brand/search.do?page='+page+"&rows="+rows,searchEntity););/定義層，需要注入 service 代碼app.controller('brandController' ,function($scope,brandService)/列表數(shù)據(jù)綁定到表單中$scope.findAll=function() brandSe

6、rvice.findAll.success(function(response)$scope.list=response;);/重新加載列表 數(shù)據(jù)$scope.reloadList=function()$scope.search( $scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：/分頁控件配置$scope.paginationConf = currentPage: 1,totalItems: 10,itemsPerPage: 10,perPageOptions:

7、 10, 20, 30, 40, 50, onChange: function()$scope.reloadList();/重新加載;/分頁$scope.findPage=function(page,rows) brandService.findPage(page,rows).success(function(response)$scope.list=response.rows;$scope.paginationConf.totalItems=response.total;/更新總數(shù));/保存$scope.save=function()if($scope.entity.id!=null)/如果

8、有 ID北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：brandService.update($scope.entity).success(function(response) if(response.success)/重新$scope.reloadList();/重新加載else alert(response.message););elsebrandService.add($scope.entity).success(function(response) if(response.success)/重新$scope.reloadList();/重新加載else alert(response.mes

9、sage););北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：/實(shí)體$scope.findOne=function(id) brandService.findOne(id).success(function(response)$scope.entity= response;);$scope.selectIds=;/選中的 ID 集合/更新復(fù)選$scope.updateSelection = function($event, id) if($event.target.checked)/如果是被選中,則增加到數(shù)組$scope.selectIds.push(id);elsevar idx = $scop

10、e.selectIds.indexOf(id);$scope.selectIds.splice(idx, 1);/刪除/批量刪除$scope.dele=function()北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：/獲取選中的復(fù)選框brandService.dele($scope.selectIds).success(function(response) if(response.success)$scope.reloadList();/刷新列表);$scope.searchEntity=;/定義搜索對象/條件$scope.search=function(page,rows) brandServ

11、ice.search(page,rows,$scope.searchEntity).success(function(response)$scope.paginationConf.totalItems=response.total;/總數(shù)$scope.list=response.rows;/給列表變量賦值););</script>1.3 代碼分離我們剛才已經(jīng)將與后端交互的部分放入自定義服務(wù)，目的是不同的務(wù)層方法。所以我們還需要將代碼分離出來，以便調(diào)用。層都可以重復(fù)調(diào)用服1.3.1 前端基礎(chǔ)層在 youlexuan-manager-web 工程 js 下創(chuàng)建 base.js創(chuàng)建 ba

12、se_pagination.js一個(gè)用于不需要分頁功能的頁面，一個(gè)用于需要分頁功能的頁面.1.3.2 前端服務(wù)層在 youlexuan-manager-web 工程 js 下創(chuàng)建 service 文件夾。創(chuàng)建 brandService.js北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：/定義 Service 層app.service('brandService',function($http)/定義方法列表數(shù)據(jù)this.findAll=function()return $http.get('./brand/findAll.do');/獲取分頁數(shù)據(jù)this.findP

13、age=function(page,rows)return $http.get('./brand/findPage.do?page='+page+'&rows='+rows);/保存var app=angular.module('youlexuan','pagination');var app=angular.module('youlexuan',);北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：this.add=function(entity)return $http.post('./brand/ad

14、d.do',entity);/修改this.update=function(entity)return $http.post('./brand/update.do',entity);/刪除this.dele=function(ids)return $http.get('./brand/delete.do?ids='+ids);/獲取制定 id 品牌信息this.findOne=function(id)return $http.get('./brand/findOne.do?id='+id);/搜索this.search=function(

15、page,rows,searchEntity)return$http.post('./brand/search.do?page='+page+"&rows="+rows,searchEntity););1.3.3 前端層在 youlexuan-manager-web 的 js 文件夾下創(chuàng)建 controller 文件夾，創(chuàng)建 brandController.js北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：/定義層，需要注入 service 代碼app.controller('brandController' ,function($sco

16、pe,brandService)/列表數(shù)據(jù)綁定到表單中$scope.findAll=function() brandService.findAll.success(function(response)$scope.list=response;);/重新加載列表 數(shù)據(jù)$scope.reloadList=function()$scope.search( $scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);/分頁控件配置$scope.paginationConf = currentPage: 1,totalIte

17、ms: 10,北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：itemsPerPage: 10,perPageOptions: 10, 20, 30, 40, 50, onChange: function()$scope.reloadList();/重新加載;/分頁$scope.findPage=function(page,rows) brandService.findPage(page,rows).success(function(response)$scope.list=response.rows;$scope.paginationConf.totalItems=response.total;/

18、更新總數(shù));/保存$scope.save=function()if($scope.entity.id!=null)/如果有 ID brandService.update($scope.entity).success( function(response)if(response.success)/重新$scope.reloadList();/重新加載北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：else alert(response.message););elsebrandService.add($scope.entity).success(function(response) if(respons

19、e.success)/重新$scope.reloadList();/重新加載else alert(response.message););/實(shí)體$scope.findOne=function(id) brandService.findOne(id).success(北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：function(response)$scope.entity= response;);$scope.selectIds=;/選中的 ID 集合/更新復(fù)選$scope.updateSelection = function($event, id) if($event.target.checke

20、d)/如果是被選中,則增加到數(shù)組$scope.selectIds.push(id);elsevar idx = $scope.selectIds.indexOf(id);$scope.selectIds.splice(idx, 1);/刪除/批量刪除$scope.dele=function()/獲取選中的復(fù)選框brandService.dele($scope.selectIds).success(function(response) if(response.success)$scope.reloadList();/刷新列表1.3.4 修改頁面去掉 brand.html 原來的 JS 代碼，引入

21、剛才我們建立的 JS北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：<script type="text/javascript" src="./js/base_pagination.js"> </script><script type="text/javascript" src="./js/service/brandService.js"> </script><script type="text/javascript" src="./js

22、/controller/brandController.js"> </script>);$scope.searchEntity=;/定義搜索對象/條件$scope.search=function(page,rows) brandService.search(page,rows,$scope.searchEntity).success(function(response)$scope.paginationConf.totalItems=response.total;/總數(shù)$scope.list=response.rows;/給列表變量賦值););器繼承2.2.1 需求

23、分析有些功能是每個(gè)頁面都有可能用到的，比如分頁，復(fù)選等等，如果我們再開發(fā)另一個(gè)功能，還需要重復(fù)編寫。怎么能讓這些通用的功能只寫一次呢？我們通過繼承的方式來實(shí)現(xiàn)。2.2 前端代碼2.2.1 建立父器在 youlexuan-manager-web 的 js/controller 目錄下建立 baseController.js北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：/基本層app.controller('baseController' ,function($scope)/重新加載列表 數(shù)據(jù)$scope.reloadList=function()/切換頁碼$scope.search(

24、 $scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);/分頁控件配置$scope.paginationConf = currentPage: 1,totalItems: 10,itemsPerPage: 10,perPageOptions: 10, 20, 30, 40, 50, onChange: function()2.2.2 修改品牌器層修改 brandController.js北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：/品牌層app.controller('brandController&#

25、39; ,function($scope,$controller,brandService)$controller('baseController',$scope:$scope);/繼承/列表數(shù)據(jù)綁定到表單中$scope.findAll=function() brandService.findAll().success($scope.reloadList();/重新加載;$scope.selectIds=;/選中的 ID 集合/更新復(fù)選$scope.updateSelection = function($event, id) if($event.target.checked)/

26、如果是被選中,則增加到數(shù)組$scope.selectIds.push( id);elsevar idx = $scope.selectIds.indexOf(id);$scope.selectIds.splice(idx, 1);/刪除);$controller 也是 angular 提供的一個(gè)服務(wù)，可以實(shí)現(xiàn)偽繼承，實(shí)際上就是與 BaseController 共享$scope2.2.3 修改頁面 brand.html 引入 js3.代碼3.1 代碼生成我們接下來使用優(yōu)就業(yè) JAVA 代碼程中。具體步驟如下：1.0來完成代碼的編寫。生成后將代碼拷貝到工（1）導(dǎo)入（配套軟件YoulexuanMak

27、eCode)代碼工程到開發(fā)工具。北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：<script src="./js/base_pagination.js"></script><script src="./js/controller/baseController.js"></script><script src="./js/service/brandService.js"></script><script src="./js/controller/bran

28、dController.js"></script>function(response)$scope.list=response;);/其它方法省略.); （2）修改數(shù)據(jù)庫連接配置：打開 src/main/resources/properties/perties（3）運(yùn)行代碼生成主程序:MakeCodeMain及可生成代碼。北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql:/localhost:3306/youlexuandb?characterEncodi

29、ng=utf-8 jdbc.username=rootjdbc.password=123這個(gè)生成數(shù)據(jù)層和實(shí)體類，因?yàn)槲覀冎耙呀?jīng)用逆向工程完成了數(shù)據(jù)層與實(shí)體類的生成。（4）提示后，到生成路徑去找生成的代碼，并拷貝到我們的工程中。Service、ServiceImpl、Controller 都生成到了 /src/main/java 目錄下Js 文件生成到了 src/main/webapp/js 目錄下北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：Html 頁面文件生成到了 src/main/webapp/admin 目錄下3.2 代碼拷貝將商家商品相關(guān)代碼拷貝到工程。（1）拷貝服務(wù)接口北京海淀區(qū)學(xué)清

30、路 23 號漢華世紀(jì)B 座：（2）拷貝服務(wù)實(shí)現(xiàn)類（3）拷貝器北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：（4）拷貝 JS北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：3.3 安裝到本地倉庫執(zhí)行 maven 命令 install ,將最新的優(yōu)樂選代碼安裝到本地倉庫4.規(guī)格管理4.1 需求及表結(jié)構(gòu)分析4.1.1 需求實(shí)現(xiàn)規(guī)格管理功能4.1.2 表結(jié)構(gòu)tb_specification規(guī)格表北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：字段類型長度含義idBigint主鍵tb_specification_option規(guī)格選項(xiàng)表4.2 規(guī)格列表4.2.1 引入 JS修改 youlexuan-manager-web

31、 工程的 specification.html4.2.2 放置分頁組件北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：<!- 分頁 -><script type="text/javascript" src="./plugins/angularjs/angular.min.js"> </script><script src="./plugins/angularjs/pagination.js"></script><link rel="stylesheet"

32、href="./plugins/angularjs/pagination.css"><script type="text/javascript" src="./js/base_pagination.js"> </script><script type="text/javascript" src="./js/service/specificationService.js"></script><script type="text/

33、javascript" src="./js/controller/baseController.js"></script><script type="text/javascript" src="./js/controller/specificationController.js"></script>字段類型長度含義idBigint主鍵option_nameVarchar200規(guī)格選項(xiàng)名稱spec_idBigint30規(guī)格 IDordersInt11排序spec_nameVarchar

34、255規(guī)格名稱4.2.3 指令與表達(dá)式在 body 元素指定模塊名和器名循環(huán)表格行4.3 新增規(guī)格4.3.1 新增行的實(shí)現(xiàn)修改 specificationController.js新增以下代碼北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：/定義一個(gè)變量存放規(guī)格選項(xiàng)行$scope.entity=specificationOptionList:;/新增規(guī)格選項(xiàng)行<tr ng-repeat="entity in list"><td><input type="checkbox" ></td><td>enti

35、ty.id</td><td>entity.specName</td><td class="text-center"><button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改</button></td></tr><body class="hold-tr

36、ansition skin-red sidebar-mini"ng-app="youlexuan" ng-controller="specificationController" ><tm-pagination conf="paginationConf"></tm-pagination>specification.html “新增規(guī)格選項(xiàng)”按鈕循環(huán)列表行，綁定表格內(nèi)的編輯框注意：要修改 specification.html “新建”按鈕，彈出窗口時(shí)對 entity 進(jìn)行初始化，否則向集合添加數(shù)據(jù)

37、時(shí)會(huì)報(bào)錯(cuò)！北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：<button type="button" class="btn btn-default" title=" 新建 " data-toggle="modal" data-target="#editModal" ng-click="entity='specificationOptionList':"><i class="fa fa-file-o"></i>

38、新建</button><tr ng-repeat="pojo in entity.specificationOptionList"><td><input type="checkbox"></td><td><input ng-m="pojo.optionName" class="form-control" placeholder="規(guī)格選項(xiàng)"></td><td><input ng-m=

39、"pojo.orders" class="form-control" placeholder="排序"></td></tr><button type="button" class="btn btn-default" title="新建" ng-click="addTableRow()"><i class="fa fa-file-o"></i> 新增規(guī)格選項(xiàng)</but

40、ton>$scope.addTableRow=function()$scope.entity.specificationOptionList.push();4.3.2 刪除行的實(shí)現(xiàn)實(shí)現(xiàn)思路：在每一行將索引值傳遞給集合，在集合中刪除。修改 specificationController.js 新增以下代碼修改每行的刪除按鈕$index 用于獲取 ng-repeat 指令循環(huán)中的索引。4.3.3 提交保存實(shí)現(xiàn)思路：規(guī)格和規(guī)格選項(xiàng)數(shù)據(jù)合并成一個(gè)對象來傳遞，這時(shí)我們需要用一個(gè)對象將這兩個(gè)對象組合起來。在業(yè)務(wù)邏輯中，得到組合對象中的規(guī)格和規(guī)格選項(xiàng)列表，規(guī)格返回規(guī)格 ID，然后循環(huán)規(guī)格選項(xiàng)。（1）我

41、們要增加規(guī)格選項(xiàng)，必須要知道新增規(guī)格的 ID,所以我們在修改 youlexuan-daoTbSpecificationMapper.xml ，在 insert 節(jié)點(diǎn)后添加如下配置的北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：<insert id="insert" parameterType="com.offcn.pojo.TbSpecification" ><selectKey resultType="java.lang.Long" order="AFTER" keyProperty="i

42、d"> SELECT LAST_INSERT_ID() AS id</selectKey>insert into tb_specification (id, spec_name)values (#id,jdbcType=BIGINT, #specName,jdbcType=VARCHAR)</insert><button type="button" class="btn btn-default" title="刪除"ng-click="deleTableRow($index)&q

43、uot;><i class="fa fa-file-o"></i> 刪除</button>/刪除規(guī)格選項(xiàng)$scope.deleTableRow=function(index)$scope.entity.specificationOptionList.splice(index,1);/刪除（2）北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：package com.offcn.group; import java.io.Serializable; import java.util.List;import com.offcn.pojo.TbS

44、pecification;import com.offcn.pojo.TbSpecificationOption;/* 規(guī)格組合實(shí)體類* author Administrator*/public class Specification implements Serializable private TbSpecification specification;private List<TbSpecificationOption> specificationOptionList;public TbSpecification getSpecification() return speci

45、fication;public void setSpecification(TbSpecification specification) this.specification = specification;public List<TbSpecificationOption> getSpecificationOptionList() return specificationOptionList;在 youlexuan-pojo 建立 com.offcn.group下建立 Specification 類（3）修改 youlexuan-sellergoods-interface 的 S

46、pecificationService.java（4）修改 youlexuan-sellergoods-service 的 SpecificationServiceImpl.java北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：/* 增加*/ Overridepublic void add(Specification specification) specificationMapper.insert(specification.getSpecification();/規(guī)格/循環(huán)規(guī)格選項(xiàng)for(TbSpecificationOption specificationOption:specificati

47、on.getSpecificationOptionList()specificationOption.setSpecId(specification.getSpecification().getId();/設(shè)置規(guī)格IDspecificationOptionMapper.insert(specificationOption);/* 增加*/public void add(Specification specification);public void setSpecificationOptionList(List<TbSpecificationOption> specificatio

48、nOptionList) this.specificationOptionList = specificationOptionList;（5）修改 youlexuan-manager-web 的 SpecificationController.java（6）修改頁面 specification.html綁定規(guī)格名稱北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：<table class="table table-bordered table-striped" width="800px"><tr>/* 增加* param specific

49、ation* return*/ RequestMapping("/add")public Result add(RequestBody Specification specification)try specificationService.add(specification); return new Result(true, "增加"); catch (Exception e) e.printStackTrace();return new Result(false, "增加失敗");綁定保存按鈕4.4 修改規(guī)格4.4.1 獲取規(guī)格數(shù)

50、據(jù)實(shí)現(xiàn)思路：通過規(guī)格 ID，到后端規(guī)格和規(guī)格選項(xiàng)列表，然后通過組合實(shí)體類返回結(jié)果（1）修改 youlexuan-sellergoods-interface 的 SpecificationService.java（2）修改 youlexuan-sellergoods-service 的 SpecificationServiceImpl.java北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：/*/* 根據(jù)ID 獲取實(shí)體* param id* return*/public Specification findOne(Long id);<button class="btn btn-succ

51、ess" data-dismiss="modal" aria-hidden="true" ng-click="save()">保存</button><td>規(guī)格名稱</td><td><input ng-m="entity.specification.specName" class="form-control" placeholder="規(guī)格名稱" ></td></tr><

52、/table>（3）修改 youlexuan-manager-web 的 SpecificationController.java北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：RequestMapping("/findOne")public Specification findOne(Long id)* 根據(jù)ID 獲取實(shí)體* param id* return*/ Overridepublic Specification findOne(Long id)/規(guī)格TbSpecification tbSpecification = specificationMapper.sele

53、ctByPrimaryKey(id);/規(guī)格選項(xiàng)列表TbSpecificationOptionExample example=new TbSpecificationOptionExample(); Criteria criteria = example.createCriteria(); criteria.andSpecIdEqualTo(id);/根據(jù)規(guī)格IDList<TbSpecificationOption> optionList =specificationOptionMapper.selectByExample(example);/構(gòu)建組合實(shí)體類返回結(jié)果Specifica

54、tion spec=new Specification(); spec.setSpecification(tbSpecification); spec.setSpecificationOptionList(optionList); return spec;（4）修改頁面 specification.html中列表的修改按鈕4.4.2 保存修改結(jié)果（1）修改 youlexuan-sellergoods-interface 的 SpecificationService.java（2）修改 youlexuan-sellergoods-service 的 SpecificationServiceImpl.java北京海淀區(qū)學(xué)清路 23 號漢華世紀(jì)B 座：/* 修改*/ Overridepublic void update(Specification specification)/保存修改的規(guī)格specificationMapper.updateByPrimaryKey(specification.getSpecification();/保存規(guī)格/刪除原有的規(guī)格選項(xiàng)/* 修改*/public void update(Specification specification);<button type="button" class=&quo