品优购_day03_规格表的新增功能

最新推荐文章于 2021-07-26 18:52:55 发布

原创最新推荐文章于 2021-07-26 18:52:55 发布 · 444 阅读

1 ·

CC 4.0 BY-SA版权

品优购同时被 2 个专栏收录

29 篇文章

订阅专栏

项目day03

5 篇文章

订阅专栏

新增功能:

对应的数据库情况:_规格表

对应的数据库情况:_规格详情表

第一模块:编写后台代码

-------------------------------------------------------------------------------------------------------------------------------------------

1 新建一个domain类,用于封装规格表和规格详情表

目的:由前端页面可以看出,如果新增的话新增页面提交的数据包括规格表和规格详情表的数据, 为了便于数据的传输,所以需要一个domain基础表,用于封装数据库中两个表的数据,所以我们造一个Specification实体类.

Specification实体类代码:

package com.pyg.pojogroup;

import com.pyg.pojo.TbSpecification;
import com.pyg.pojo.TbSpecificationOption;
import java.io.Serializable;
import java.util.List;

//规格的组合属性
public class Specification implements Serializable{
    //封装1: 封装规格表数据
    private TbSpecification specification;
    //封装2: 封装规格详情表数据
    private List<TbSpecificationOption> specificationOptionList;

.........................省略后面的getter,setter方法

2 service层的接口

由于我们已经用代码生成器自动生成了dao层面的mapper接口及mapper的实现类,所以现在我们需要生成Specification实体类的service层的接口

public interface SpecificationService {
/**
 * 增加
*/
public void add(Specification specification);

}

3 接口的实现类,有了接口后就需要生成接口的实现类

接口实现类代码如下:

代码解释:

1.给规则表添加数据: 通过分解前台传过来的specification对象,将其中的tb_specification对象

2.给规则详情表添加数据: 通过分解前台传过 specification对象,获取SpecificationOption集合,并将集合遍历取出其中一个,分别设置其外键值及其他值.

@Service
public class SpecificationServiceImpl implements SpecificationService {

@Autowired
private TbSpecificationMapper specificationMapper;
/**
 * 增加
 */
@Override
public void add(Specification specification) {
   specificationMapper.insert(specification.getSpecification());
   for(TbSpecificationOption tbSpecificationOption:specification.getSpecificationOptionList()){
      tbSpecificationOption.setSpecId(specification.getSpecification().getId()); //设置外键
      specificationOptionMapper.insert(tbSpecificationOption);
   }

}

注意:此处如果直接过去外键值设置的话一定为null,因为tb_specification的值刚设置还没有给其他的,所以需要在mapper映射类中配置一下这样规则详情表才可以得到规则表的id作为其外键

配置如下

<insert id="insert" parameterType="com.pyg.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>

4 controller的代码

controller层的代码如下:

@RestController
@RequestMapping("/specification")
public class SpecificationController {

@Reference
private SpecificationService specificationService;

@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, "增加失败");
   }
}

---------------------------------接下来我们编写前端代码----------------------------------------------------------------------------

service层代码如下:service专门是路径的一个js文件

//服务层
app.service('specificationService',function($http){

//增加 
this.add=function(entity){
   return  $http.post('../specification/add.do',entity );
}

}

控制层代码如下

 //控制层 
app.controller('specificationController' ,function($scope,$controller,specificationService){
   
   $controller('baseController',{$scope:$scope});//继承

//定义一个组合实体类对象
$scope.entity={specification:{},specificationOptionList:[]};
//添加规格选项
$scope.addTableRow=function () {
   $scope.entity.specificationOptionList.push({});
   }
   //删除选项卡,根据下标删除1个
$scope.removeTableRow=function (index) {
   $scope.entity.specificationOptionList.splice(index,1);
   }

//保存 
$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);
         }
      }     
   );          
}

前端html页面收集数据 ng-model="entity.specification.specName"

以下代码是收集上图规格名称中的数据 ,用双向ng-model,将specName放入specification中,然后specification放入entity,此处entity就相当于我们后台自定义封装的domain实体类

------------------------------------------------------------------------------------------------------------------------------

以下代码是收集上图规格选项中的数据,此处循环展示entity.specificationOptionList获取到每一条数据,然后将每一条中的optionName和orders利用双向原理传送给specificationOptionList, 然后specificationOptionList传送给entity

至此,加上上一条,entity中就封装了两部分数据:1 规格名称(数据库中的tb_specification表) 2 规格详情表(数据库中的tb_specification_option表)

最后增加一个触发条件,只要点击保存按钮,就调用control层的add方法

代码如下: 点击保存调用save方法,将上面的内容保存到后台

<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">保存</button>