27分布式电商项目 - 商品录入(基本功能)

1.需求分析

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

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>
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页