第四阶段第03天优乐选课程讲义v

1、优乐选系统开发第 3 章规格及模板管理优就业.JAVA 教研室北京海淀区学清路 23 号汉华世纪B 座：课程目标目标 1：理解和运用 angularJS 的 service目标 2：理解和运用器继承目标 3：掌握代码的使用目标 4：实现规格管理目标 5：实现模板管理1.前端分层开发1.1 需求分析我们在上次课学习了 angularJS 并完成的品牌管理的增删改查功能。但是我们看代码，JS 和 html 都放在一起，并不利于我们后期的维护。我们可以在前端代码中也运用 MVC 的设计模式，将代码进行分离，提高程序的可维护性。1.2 自定义服务在 AngularJS 中，服务是一个函数或对象，可在你

2、的 AngularJS 应用中使用。我们在上次课中使用了内置服务$http .其实我们也可以来定义服务，而服务会封装一些操作。我们在不同的器中可以调用同一个服务，这样服务的代码将会被重用。我们现在就修改一下我们的品牌管理代码，使用自定义服务。北京海淀区学清路 23 号汉华世纪B 座：<script type="text/javascript">/定义模块var app=angular.module('youlexuan', 'pagination');/定义模块，增加分页模块/定义 Service 层app.service(

3、9;brandService',function($http)/定义方法列表数据北京海淀区学清路 23 号汉华世纪B 座：this.findAll=function()return $http.get('./brand/findAll.do');/获取分页数据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、淀区学清路 23 号汉华世纪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)/列表数据绑定到表单中$scope.findAll=function() brandSe

6、rvice.findAll.success(function(response)$scope.list=response;);/重新加载列表 数据$scope.reloadList=function()$scope.search( $scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);北京海淀区学清路 23 号汉华世纪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;/更新总数);/保存$scope.save=function()if($scope.entity.id!=null)/如果

8、有 ID北京海淀区学清路 23 号汉华世纪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););北京海淀区学清路 23 号汉华世纪B 座：/实体$scope.findOne=function(id) brandService.findOne(id).success(function(response)$scope.entity= response;);$scope.selectIds=;/选中的 ID 集合/更新复选$scope.updateSelection = function($event, id) if($event.target.checked)/如果是被选中,则增加到数组$scope.selectIds.push(id);elsevar idx = $scop

10、e.selectIds.indexOf(id);$scope.selectIds.splice(idx, 1);/删除/批量删除$scope.dele=function()北京海淀区学清路 23 号汉华世纪B 座：/获取选中的复选框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;/总数$scope.list=response.rows;/给列表变量赋值););</script>1.3 代码分离我们刚才已经将与后端交互的部分放入自定义服务，目的是不同的务层方法。所以我们还需要将代码分离出来，以便调用。层都可以重复调用服1.3.1 前端基础层在 youlexuan-manager-web 工程 js 下创建 base.js创建 ba

12、se_pagination.js一个用于不需要分页功能的页面，一个用于需要分页功能的页面.1.3.2 前端服务层在 youlexuan-manager-web 工程 js 下创建 service 文件夹。创建 brandService.js北京海淀区学清路 23 号汉华世纪B 座：/定义 Service 层app.service('brandService',function($http)/定义方法列表数据this.findAll=function()return $http.get('./brand/findAll.do');/获取分页数据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',);北京海淀区学清路 23 号汉华世纪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 文件夹下创建 controller 文件夹，创建 brandController.js北京海淀区学清路 23 号汉华世纪B 座：/定义层，需要注入 service 代码app.controller('brandController' ,function($sco

16、pe,brandService)/列表数据绑定到表单中$scope.findAll=function() brandService.findAll.success(function(response)$scope.list=response;);/重新加载列表 数据$scope.reloadList=function()$scope.search( $scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);/分页控件配置$scope.paginationConf = currentPage: 1,totalIte

17、ms: 10,北京海淀区学清路 23 号汉华世纪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、更新总数);/保存$scope.save=function()if($scope.entity.id!=null)/如果有 ID brandService.update($scope.entity).success( function(response)if(response.success)/重新$scope.reloadList();/重新加载北京海淀区学清路 23 号汉华世纪B 座：else alert(response.message););elsebrandService.add($scope.entity).success(function(response) if(respons

19、e.success)/重新$scope.reloadList();/重新加载else alert(response.message););/实体$scope.findOne=function(id) brandService.findOne(id).success(北京海淀区学清路 23 号汉华世纪B 座：function(response)$scope.entity= response;);$scope.selectIds=;/选中的 ID 集合/更新复选$scope.updateSelection = function($event, id) if($event.target.checke

20、d)/如果是被选中,则增加到数组$scope.selectIds.push(id);elsevar idx = $scope.selectIds.indexOf(id);$scope.selectIds.splice(idx, 1);/删除/批量删除$scope.dele=function()/获取选中的复选框brandService.dele($scope.selectIds).success(function(response) if(response.success)$scope.reloadList();/刷新列表1.3.4 修改页面去掉 brand.html 原来的 JS 代码，引入

21、刚才我们建立的 JS北京海淀区学清路 23 号汉华世纪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;/总数$scope.list=response.rows;/给列表变量赋值););器继承2.2.1 需求

23、分析有些功能是每个页面都有可能用到的，比如分页，复选等等，如果我们再开发另一个功能，还需要重复编写。怎么能让这些通用的功能只写一次呢？我们通过继承的方式来实现。2.2 前端代码2.2.1 建立父器在 youlexuan-manager-web 的 js/controller 目录下建立 baseController.js北京海淀区学清路 23 号汉华世纪B 座：/基本层app.controller('baseController' ,function($scope)/重新加载列表 数据$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北京海淀区学清路 23 号汉华世纪B 座：/品牌层app.controller('brandController&#

25、39; ,function($scope,$controller,brandService)$controller('baseController',$scope:$scope);/继承/列表数据绑定到表单中$scope.findAll=function() brandService.findAll().success($scope.reloadList();/重新加载;$scope.selectIds=;/选中的 ID 集合/更新复选$scope.updateSelection = function($event, id) if($event.target.checked)/

26、如果是被选中,则增加到数组$scope.selectIds.push( id);elsevar idx = $scope.selectIds.indexOf(id);$scope.selectIds.splice(idx, 1);/删除);$controller 也是 angular 提供的一个服务，可以实现伪继承，实际上就是与 BaseController 共享$scope2.2.3 修改页面 brand.html 引入 js3.代码3.1 代码生成我们接下来使用优就业 JAVA 代码程中。具体步骤如下：1.0来完成代码的编写。生成后将代码拷贝到工（1）导入（配套软件YoulexuanMak

27、eCode)代码工程到开发工具。北京海淀区学清路 23 号汉华世纪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）修改数据库连接配置：打开 src/main/resources/properties/perties（3）运行代码生成主程序:MakeCodeMain及可生成代码。北京海淀区学清路 23 号汉华世纪B 座：jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql:/localhost:3306/youlexuandb?characterEncodi

29、ng=utf-8 jdbc.username=rootjdbc.password=123这个生成数据层和实体类，因为我们之前已经用逆向工程完成了数据层与实体类的生成。（4）提示后，到生成路径去找生成的代码，并拷贝到我们的工程中。Service、ServiceImpl、Controller 都生成到了 /src/main/java 目录下Js 文件生成到了 src/main/webapp/js 目录下北京海淀区学清路 23 号汉华世纪B 座：Html 页面文件生成到了 src/main/webapp/admin 目录下3.2 代码拷贝将商家商品相关代码拷贝到工程。（1）拷贝服务接口北京海淀区学清

30、路 23 号汉华世纪B 座：（2）拷贝服务实现类（3）拷贝器北京海淀区学清路 23 号汉华世纪B 座：（4）拷贝 JS北京海淀区学清路 23 号汉华世纪B 座：3.3 安装到本地仓库执行 maven 命令 install ,将最新的优乐选代码安装到本地仓库4.规格管理4.1 需求及表结构分析4.1.1 需求实现规格管理功能4.1.2 表结构tb_specification规格表北京海淀区学清路 23 号汉华世纪B 座：字段类型长度含义idBigint主键tb_specification_option规格选项表4.2 规格列表4.2.1 引入 JS修改 youlexuan-manager-web

31、 工程的 specification.html4.2.2 放置分页组件北京海淀区学清路 23 号汉华世纪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规格选项名称spec_idBigint30规格 IDordersInt11排序spec_nameVarchar

34、255规格名称4.2.3 指令与表达式在 body 元素指定模块名和器名循环表格行4.3 新增规格4.3.1 新增行的实现修改 specificationController.js新增以下代码北京海淀区学清路 23 号汉华世纪B 座：/定义一个变量存放规格选项行$scope.entity=specificationOptionList:;/新增规格选项行<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 “新增规格选项”按钮循环列表行，绑定表格内的编辑框注意：要修改 specification.html “新建”按钮，弹出窗口时对 entity 进行初始化，否则向集合添加数据

37、时会报错！北京海淀区学清路 23 号汉华世纪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="规格选项"></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> 新增规格选项</but

40、ton>$scope.addTableRow=function()$scope.entity.specificationOptionList.push();4.3.2 删除行的实现实现思路：在每一行将索引值传递给集合，在集合中删除。修改 specificationController.js 新增以下代码修改每行的删除按钮$index 用于获取 ng-repeat 指令循环中的索引。4.3.3 提交保存实现思路：规格和规格选项数据合并成一个对象来传递，这时我们需要用一个对象将这两个对象组合起来。在业务逻辑中，得到组合对象中的规格和规格选项列表，规格返回规格 ID，然后循环规格选项。（1）我

41、们要增加规格选项，必须要知道新增规格的 ID,所以我们在修改 youlexuan-daoTbSpecificationMapper.xml ，在 insert 节点后添加如下配置的北京海淀区学清路 23 号汉华世纪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>/删除规格选项$scope.deleTableRow=function(index)$scope.entity.specificationOptionList.splice(index,1);/删除（2）北京海淀区学清路 23 号汉华世纪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;/* 规格组合实体类* 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北京海淀区学清路 23 号汉华世纪B 座：/* 增加*/ Overridepublic void add(Specification specification) specificationMapper.insert(specification.getSpecification();/规格/循环规格选项for(TbSpecificationOption specificationOption:specificati

47、on.getSpecificationOptionList()specificationOption.setSpecId(specification.getSpecification().getId();/设置规格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绑定规格名称北京海淀区学清路 23 号汉华世纪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 修改规格4.4.1 获取规格数

50、据实现思路：通过规格 ID，到后端规格和规格选项列表，然后通过组合实体类返回结果（1）修改 youlexuan-sellergoods-interface 的 SpecificationService.java（2）修改 youlexuan-sellergoods-service 的 SpecificationServiceImpl.java北京海淀区学清路 23 号汉华世纪B 座：/*/* 根据ID 获取实体* 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>规格名称</td><td><input ng-m="entity.specification.specName" class="form-control" placeholder="规格名称" ></td></tr><

52、/table>（3）修改 youlexuan-manager-web 的 SpecificationController.java北京海淀区学清路 23 号汉华世纪B 座：RequestMapping("/findOne")public Specification findOne(Long id)* 根据ID 获取实体* param id* return*/ Overridepublic Specification findOne(Long id)/规格TbSpecification tbSpecification = specificationMapper.sele

53、ctByPrimaryKey(id);/规格选项列表TbSpecificationOptionExample example=new TbSpecificationOptionExample(); Criteria criteria = example.createCriteria(); criteria.andSpecIdEqualTo(id);/根据规格IDList<TbSpecificationOption> optionList =specificationOptionMapper.selectByExample(example);/构建组合实体类返回结果Specifica

54、tion spec=new Specification(); spec.setSpecification(tbSpecification); spec.setSpecificationOptionList(optionList); return spec;（4）修改页面 specification.html中列表的修改按钮4.4.2 保存修改结果（1）修改 youlexuan-sellergoods-interface 的 SpecificationService.java（2）修改 youlexuan-sellergoods-service 的 SpecificationServiceImpl.java北京海淀区学清路 23 号汉华世纪B 座：/* 修改*/ Overridepublic void update(Specification specification)/保存修改的规格specificationMapper.updateByPrimaryKey(specification.getSpecification();/保存规格/删除原有的规格选项/* 修改*/public void update(Specification specification);<button type="button" class=&quo