代码下载地址:https://github.com/YangLinWei93/pingyougou 版本号:c98e409fba0faa91f8d6fdb94e30a2efc718d907
需求及表结构分析 1.需求实现规格管理功能
tb_specification 规格表
字段类型长度含义IdBigint主键Spec_nameVarchar255规格名称tb_specification_option 规格选项表
字段类型长度含义IdBigint主键Option_nameVarchar200规格选项名称Spec_idBigint30规格 IDOrdersInt11排序 规格列表 1.引入JS修改 pinyougou-manager-web 工程的specification.html:
2.放置分页组件
3.指令与表达式
在 body 元素指定模块名和控制器名
循环表格行
{{entity.id}}
{{entity.specName}}
修改
新增规格
1.新增行的实现
修改 specificationController.js 新增以下代码
//新增选项行
$scope.addTableRow=function(){
$scope.entity.specificationOptionList.push({});
}
specification.html “新建选项”按钮
新增规格选项
循环列表行,绑定表格内的编辑框
注意:要修改 specification.html “新建”按钮,弹出窗口时对 entity 进行初始化,否则向集合添加数据时会报错!
新建
2.删除行的实现
实现思路:在每一行将索引值传递给集合,在集合中删除。
修改 specificationController.js 新增以下代码
//批量选项删除
$scope.deleTableRow=function(index){
$scope.entity.specificationOptionList.splice(index,1);//删除
}
修改每行的删除按钮
删除
$index 用于获取 ng-repeat 指令循环中的索引。
3. 提交保存实现思路:我们将规格和规格选项数据合并成一个对象来传递,这时我们需要用一个对象将这两个对象组合起来。在业务逻辑中,得到组合对象中的规格和规格选项列表,插入规格返回规格 ID,然后循环插入规格选项。
(1)我们要增加规格选项,必须要知道新增规格的 ID, 所以我们在修改 pinyougou-dao 的TbSpecificationMapper.xml ,在 insert 节点后添加
如下配置
SELECT LAST_INSERT_ID() AS id
insert into tb_specification (id, spec_name)
values (#{id,jdbcType=BIGINT}, #{specName,jdbcType=VARCHAR})
(2)在 pinyougou-pojo 建立com.pinyougou.pojogroup 包,包下建立Specification 类
*/
public class Specification implements Serializable {
private TbSpecification specification;
private List specificationOptionList;
public TbSpecification getSpecification() {
return specification;
}
public void setSpecification(TbSpecification specification) {
this.specification = specification;
}
public List getSpecificationOptionList() {
return specificationOptionList;
}
public void setSpecificationOptionList(List
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
规格名称
绑定保存按钮事件
保存
修改规格
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 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 中列表的修改按钮
修改
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 列表的复选框
删除按钮
删除