代码下载地址：https://github.com/YangLinWei93/pingyougou
版本号：c98e409fba0faa91f8d6fdb94e30a2efc718d907
需求及表结构分析
1.需求
实现规格管理功能
2.表结构
tb_specification 规格表
| 字段 | 类型 | 长度 | 含义 |
| Id | Bigint | 主键 | |
| Spec_name | Varchar | 255 | 规格名称 |
tb_specification_option 规格选项表
| 字段 | 类型 | 长度 | 含义 |
| Id | Bigint | 主键 | |
| Option_name | Varchar | 200 | 规格选项名称 |
| Spec_id | Bigint | 30 | 规格 ID |
| Orders | Int | 11 | 排序 |
规格列表
1.引入JS
修改 pinyougou-manager-web 工程的specification.html：
<link rel="stylesheet" href="../plugins/angularjs/pagination.css"> <script type="text/javascript" src="../plugins/angularjs/angular.min.js"> </script> <script src="../plugins/angularjs/pagination.js"></script> <script type="text/javascript" src="../js/base_pagination.js"> </script> <script type="text/javascript" src="../js/service/specificationService.js"> </script> <script type="text/javascript" src="../js/controller/baseController.js"></script> <script type="text/javascript" src="../js/controller/specificationController.js"> </script>
2.放置分页组件
<!-- 分页 --> <tm-pagination conf="paginationConf"></tm-pagination>
3.指令与表达式
在 body 元素指定模块名和控制器名
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="specificationController" >
循环表格行
<tr ng-repeat="entity in list"> <td><input type="checkbox" ></td> <td>{{entity.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>
新增规格
1.新增行的实现
修改 specificationController.js 新增以下代码
//新增选项行 $scope.addTableRow=function(){ $scope.entity.specificationOptionList.push({}); }
specification.html “新建选项”按钮
<button type="button" class="btn btn-default" title="新建" ng-click="addTableRow()"><i class="fa fa-file-o"></i> 新增规格选项</button>
循环列表行，绑定表格内的编辑框
<tr ng-repeat="pojo in entity.specificationOptionList"> <td><input type="checkbox"></td> <td> <input ng-model="pojo.optionName" class="form-control" placeholder="规格选项"> </td> <td> <input ng-model="pojo.orders" class="form-control" placeholder="排序"> </td> </tr>
注意：要修改 specification.html “新建”按钮，弹出窗口时对 entity 进行初始化，否则向集合添加数据时会报错！
<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> 新建 </button>
2.删除行的实现
实现思路：在每一行将索引值传递给集合，在集合中删除。
修改 specificationController.js 新增以下代码
//批量选项删除 $scope.deleTableRow=function(index){ $scope.entity.specificationOptionList.splice(index,1);//删除 }
修改每行的删除按钮
<button type="button" class="btn btn-default" title="删除" ng-click="deleTablenRow($index)"> <i class="fa fa-file-o"></i> 删除 </button>
$index 用于获取 ng-repeat 指令循环中的索引。
3. 提交保存
实现思路：我们将规格和规格选项数据合并成一个对象来传递，这时我们需要用一个对象将这两个对象组合起来。在业务逻辑中，得到组合对象中的规格和规格选项列表，插入规格返回规格 ID，然后循环插入规格选项。
（1）我们要增加规格选项，必须要知道新增规格的 ID, 所以我们在修改 pinyougou-dao 的TbSpecificationMapper.xml ，在 insert 节点后添加
如下配置
<insert id="insert" parameterType="com.pinyougou.pojo.TbSpecification" > <selectKey resultType="java.lang.Long" order="AFTER" keyProperty="id"> SELECT LAST_INSERT_ID() AS id </selectKey> insert into tb_specification (id, spec_name) values (#{id,jdbcType=BIGINT}, #{specName,jdbcType=VARCHAR}) </insert>
（2）在 pinyougou-pojo 建立com.pinyougou.pojogroup 包，包下建立Specification 类
*/ public class Specification implements Serializable { private TbSpecification specification; private List<TbSpecificationOption> specificationOptionList; public TbSpecification getSpecification() { return specification; } public void setSpecification(TbSpecification specification) { this.specification = specification; } public List<TbSpecificationOption> getSpecificationOptionList() { return specificationOptionList; } public void setSpecificationOptionList(List<TbSpecificationOption> specificationOptionList) { this.specificationOptionList = specificationOptionList; } }
（3）修改 pinyougou-sellergoods-interface 的 SpecificationService.java
/** * 增加 */ public void add(Specification specification);
（4）修改 pinyougou-sellergoods-service 的 SpecificationServiceImpl.java
/** * 增加 */ @Override public void add(Specification specification) { specificationMapper.insert(specification.getSpecification());//插入规//循环插入规格选项 for(TbSpecificationOption specificationOption:specification.getSpecificationOptionList()){ specificationOption.setSpecId(specification.getSpecification().getId());//设置规格 ID specificationOptionMapper.insert(specificationOption) } }
（5）修改 pinyougou-manager-web 的SpecificationController.java
/** * 增加 * @param specification * @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, "增加失败"); } }
（6）修改页面 specification.html
<table class="table table-bordered table-striped" width="800px"> <tr> <td>规格名称</td> <td> <input ng-model="entity.specification.specName" class="form-control" placeholder="规格名称" > </td> </tr> </table>
绑定保存按钮事件
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">保存</button>
修改规格
1. 获取规格数据
实现思路：通过规格 ID，到后端查询规格和规格选项列表，然后通过组合实体类返回结果
（1）修改 pinyougou-sellergoods-interface 的SpecificationService.java
/** * 根据 ID 获取实体 * @param id * @return */ public Specification findOne(Long id);
（2）修改 pinyougou-sellergoods-service 的 SpecificationServiceImpl.java
/** * 根据 ID 获取实体 * @param id * @return */ @Override public Specification findOne(Long id){ //查询规格 TbSpecification tbSpecification = specificationMapper.selectByPrimaryKey(id); //查询规格选项列表 TbSpecificationOptionExample example=new TbSpecificationOptionExample(); Criteria criteria = example.createCriteria(); criteria.andSpecIdEqualTo(id);//根据规格 ID 查询 List<TbSpecificationOption> optionList = specificationOptionMapper.selectByExample(example); //构建组合实体类返回结果 Specification spec=new Specification(); spec.setSpecification(tbSpecification); spec.setSpecificationOptionList(optionList); return spec; }
（3）修改 pinyougou-manager-web 的 SpecificationController.java
@RequestMapping("/findOne") public Specification findOne(Long id){ return specificationService.findOne(id); }
（4）修改页面 specification.html 中列表的修改按钮
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)">修改</button>
2.保存修改结果
（1）修改 pinyougou-sellergoods-interface 的 SpecificationService.java
* 修改 */ public void update(Specification specification);
（2）修改 pinyougou-sellergoods-service 的 SpecificationServiceImpl.java
/** * 修改 */ @Override public void update(Specification specification){ //保存修改的规格 specificationMapper.updateByPrimaryKey(specification.getSpecification());//保存规格 //删除原有的规格选项 TbSpecificationOptionExample example=new TbSpecificationOptionExample(); com.pinyougou.pojo.TbSpecificationOptionExample.Criteria criteria = example.createCriteria(); criteria.andSpecIdEqualTo(specification.getSpecification().getId());//指定规格 ID 为条件 specificationOptionMapper.deleteByExample(example);//删除 //循环插入规格选项 for(TbSpecificationOption specificationOption:specification.getSpecificationOptionList()){ specificationOption.setSpecId(specification.getSpecification().getId()); specificationOptionMapper.insert(specificationOption) } }
（3）修改 pinyougou-manager-web 的SpecificationController.java
/** * 修改 * @param specification * @return */ @RequestMapping("/update") public Result update(@RequestBody Specification specification){ try { specificationService.update(specification); return new Result(true, "修改成功"); } catch (Exception e) { e.printStackTrace(); return new Result(false, "修改失败"); } }
（4）修改 specification.js 的 save 方法
//保存 $scope.save=function(){ var serviceObject;//服务层对象 if($scope.entity.specification.id!=null){//如果有 ID serviceObject=specificationService.update( $scope.entity ); //修改 }else{ serviceObject=specificationService.add( $scope.entity );//增加 } serviceObject.success( function(response){ if(response.success){ //重新查询 $scope.reloadList();//重新加载 }else{ alert(response.message); } } ); }
删除规格
实现思路：我们要删除规格的同时，还要记得将关联的规格选项删除掉。
1.后端代码
修改 pinyougou-sellergoods-service 的SpecificationServiceImpl.java
/** * 批量删除 */ @Override public void delete(Long[] ids) { for(Long id:ids){ specificationMapper.deleteByPrimaryKey(id); //删除原有的规格选项 TbSpecificationOptionExample example=new TbSpecificationOptionExampcom.pinyougou.pojo.TbSpecificationOptionExample.Criteria criteria example.createCriteria(); criteria.andSpecIdEqualTo(id);//指定规格 ID 为条件 specificationOptionMapper.deleteByExample(example);//删除 } }
2.前端代码
修改 pinyougou-manager-web 的 specification.html
列表的复选框
<input type="checkbox" ng-click="updateSelection($event,entity.id)">
删除按钮
<button type="button" class="btn btn-default" title="删除" ng-click="dele()" ><i class="fa fa-trash-o"></i> 删除</button>
