27分布式电商项目 - 商品录入（基本功能）-CFANZ编程社区

1.需求分析

在商家后台实现商品录入功能。包括商品名称、副标题、价格、包装列表、售后服务

27分布式电商项目 - 商品录入（基本功能）_javascript

2.后端代码

1.实体类

public class Goods implements Serializable{
  private TbGoods goods;//商品 SPU
  private TbGoodsDesc goodsDesc;//商品扩展
  private List<TbItem> itemList;//商品 SKU 列表
  //getter and setter 方法......
}

2.数据访问层

由于我们需要在商品表添加数据后可以得到自增的 ID,所以我们需要在 TbGoodsMapper.xml中的 insert 配置中添加如下配置

<selectKey resultType="java.lang.Long" order="AFTER" keyProperty="id">
  SELECT LAST_INSERT_ID() AS id
</selectKey>

3. 服务接口层

修改 pinyougou-sellergoods-interface 的 GoodsService 接口 add 方法

/**
* 增加
*/
public void add(Goods goods);

4.服务实现层

修改 pinyougou-sellergoods-service 的GoodsServiceImpl.java

@Autowired
private TbGoodsDescMapper goodsDescMapper;
/**
* 增加
*/
@Override
public void add(Goods goods) {
  goods.getGoods().setAuditStatus("0");//设置未申请状态
  goodsMapper.insert(goods.getGoods());
  goods.getGoodsDesc().setGoodsId(goods.getGoods().getId());//设置 ID
  goodsDescMapper.insert(goods.getGoodsDesc());//插入商品扩展数据
}

5.控制层

修改 pinyougou-shop-web 工程的 GoodsController 的 add 方法

/**
* 增加
* @param goods
* @return
*/
@RequestMapping("/add")
public Result add(@RequestBody Goods goods){
  //获取登录名
  String sellerId = 
  SecurityContextHolder.getContext().getAuthentication().getName();
  goods.getGoods().setSellerId(sellerId);//设置商家 ID
  try {
    goodsService.add(goods);
    return new Result(true, "增加成功");
  } catch (Exception e) {
    e.printStackTrace();
    return new Result(false, "增加失败");
  }
}

3.前端代码

1.控制层

修改 goodsController.js ，在增加成功后弹出提示，并清空实体（因为编辑页面无列表）

//保存
$scope.save=function(){
  var serviceObject;//服务层对象 
  if($scope.entity.id!=null){//如果有 ID
    serviceObject=goodsService.update( $scope.entity ); 修改 
  }else{
    serviceObject=goodsService.add( $scope.entity );//增加
  }
  serviceObject.success(
    function(response){
      if(response.success){
        alert("保存成功");
        $scope.entity={};
      }else{
        alert(response.message);
      }
  }
  );
}

2.页面

修改 goods_edit.html

引入 JS:

<script type="text/javascript" src="../plugins/angularjs/angular.min.js"> </script>
<script type="text/javascript" src="../js/base.js"> </script>
<script type="text/javascript" src="../js/service/goodsService.js"> </script>
<script type="text/javascript" src="../js/controller/baseController.js"> </script>
<script type="text/javascript" src="../js/controller/goodsController.js"> </script>

定义控制器：

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="goodsController">

表单部分代码：

<div class="col-md-2 title">商品名称</div>
<div class="col-md-10 data">
<input type="text" class="form-control" ng-model="entity.goods.goodsName" 
placeholder="商品名称" value="">
</div>
<div class="col-md-2 title">副标题</div>
<div class="col-md-10 data">
<input type="text" class="form-control" ng-model="entity.goods.caption" 
placeholder="副标题" value="">
</div> 
<div class="col-md-2 title">价格</div>
<div class="col-md-10 data">
<div class="input-group">
<span class="input-group-addon">¥</span>
<input type="text" class="form-control" ng-model="entity.goods.price" 
placeholder="价格" value="">
</div>
</div> 
<div class="col-md-2 title rowHeight2x">包装列表</div>
<div class="col-md-10 data rowHeight2x">
<textarea rows="4" class="form-control" ng-model="entity.goodsDesc.packageList" placeholder="包装列表"></textarea>
</div>
<div class="col-md-2 title rowHeight2x">售后服务</div>
<div class="col-md-10 data rowHeight2x">
<textarea rows="4" class="form-control" ng-model="entity.goodsDesc.saleService" placeholder="售后服务"></textarea>
</div>