目录
前言
因为是根据大佬的项目点滴做起，如果看到此博客侵犯利益，请告知立即删除
商家管理后台-商品录入
第五章 商家管理后台-商品录入(1)(第十一天)
1.商品分类
1.1 需求及表结构分析
1.1.1 需求分析
实现三级商品分类列表查询功能
进入页面首先显示所以一级分类，效果如下：
点击列表行的查询下级按钮，进入下级分类列表，同时更新面包屑导航
再次点击表行的查询下级按钮，进入三级分类列表，因为三级分类属于最后一级，所以在列表中不显示查询下级按钮，同时更新面包屑导航
点击面包屑导航，可以进行返回操作。
1.1.2 表结构分析
tb_item_cat 商品分类表
| 字段 | 类型 | 长度 | 含义 |
| Id | Bigint | 主键 | |
| Parent_Id | Bigint | 上级ID | |
| Name | varchar | 分类名称 | |
| Type_Id | Bigint | 类型模板ID |
1.2 列表实现
1.2.1 后端代码
修改pinyougou-sellergoods-interface工程ItemCatService接口，新增方法定义
/**
* 根据上级ID返回关联的列表
* @return
*/
public List<TbItemCat> findByParentId(Long parentId);
修改pinyougou-sellergoods-interface工程ItemCatServiceImpl ，实现方法
/**
* 根据上级ID查询列表
*/
@Override
public List<TbItemCat> findByParentId(Long parentId) {
TbItemCatExample example1=new TbItemCatExample();
Criteria criteria1 = example1.createCriteria();
criteria1.andParentIdEqualTo(parentId);
return itemCatMapper.selectByExample(example1);
}
修改pinyougou-manager-web的ItemCatController.java
/**
* 根据上级ID查询列表
* @param parentId
* @return
*/
@RequestMapping("/findByParentId")
public List<TbItemCat> findByParentId(Long parentId){
return itemCatService.findByParentId(parentId);
}
1.2.2前端代码
（1）修改itemCatService.js
//根据上级ID查询下级列表
this.findByParentId=function(parentId){
return $http.get('../itemCat/findByParentId.do?parentId='+parentId);
}
（2）修改itemCatController.js
//根据上级ID显示下级列表
$scope.findByParentId=function(parentId){
itemCatService.findByParentId(parentId).success(
function(response){
$scope.list=response;
}
);
}
（3）修改item_cat.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/itemCatService.js"> </script>
<script type="text/javascript" src="../js/controller/baseController.js"> </script>
<script type="text/javascript" src="../js/controller/itemCatController.js"> </script>
指令定义
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="itemCatController" ng-init="findByParentId(0)">
循环列表
<tr ng-repeat="entity in list">
<td><input type="checkbox" ></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.typeId}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" ng-click="findByParentId(entity.id)">查询下级</button>
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>
</td>
</tr>
1.3面包屑导航
我们需要返回上级列表，需要通过点击面包屑来实现
修改itemCatController.js
$scope.grade=1;//默认为1级
//设置级别
$scope.setGrade=function(value){
$scope.grade=value;
}
//读取列表
$scope.selectList=function(p_entity){
if($scope.grade==1){//如果为1级
$scope.entity_1=null;
$scope.entity_2=null;
}
if($scope.grade==2){//如果为2级
$scope.entity_1=p_entity;
$scope.entity_2=null;
}
if($scope.grade==3){//如果为3级
$scope.entity_2=p_entity;
}
$scope.findByParentId(p_entity.id); //查询此级下级列表
}
修改列表的查询下级按钮，设定级别值后 显示列表，每次点击级别加1
<span ng-if="grade!=3">
<button type="button" class="btn bg-olive btn-xs" ng-click="setGrade(grade+1);selectList(entity)">查询下级</button>
</span>
这里我们使用了ng-if指令，用于条件判断，当级别不等于3的时候才显示“查询下级”按钮
绑定面包屑：
<ol class="breadcrumb">
<li><a href="#" ng-click="grade=1;selectList({id:0})">顶级分类列表</a></li>
<li><a href="#" ng-click="grade=2;selectList(entity_1)">{{entity_1.name}}</a></li>
<li><a href="#" ng-click="grade=3;selectList(entity_2)">{{entity_2.name}}</a></li>
</ol>
1.4新增商品分类
实现商品分类，如下图:
当前显示的是哪一分类的列表，我们就将这个商品分类新增到这个分类下。
实现思路：我们需要一个变量去记住上级ID，在保存的时候再根据这个ID来新增分类
修改itemCatController.js, 定义变量
$scope.parentId=0;//上级ID
查询时记录上级ID
//根据上级ID显示下级列表
$scope.findByParentId=function(parentId){
$scope.parentId=parentId;//记住上级ID
itemCatService.findByParentId(parentId).success(
function(response){
$scope.list=response;
}
);
}
保存的时候，用到此变量
//保存
$scope.save=function(){
var serviceObject;//服务层对象
if($scope.entity.id!=null){//如果有ID
serviceObject=itemCatService.update( $scope.entity ); //修改
}else{
$scope.entity.parentId=$scope.parentId;//赋予上级ID
serviceObject=itemCatService.add( $scope.entity );//增加
}
serviceObject.success(
function(response){
if(response.success){
//重新查询
$scope.findByParentId($scope.parentId);//重新加载
}else{
alert(response.message);
}
}
);
}
修改页面item_cat.html
<div class="modal-body">
<table class="table table-bordered table-striped" width="800px">
<tr>
<td>上级商品分类</td>
<td>
{{entity_1.name}} >> {{entity_2.name}}
</td>
</tr>
<tr>
<td>商品分类名称</td>
<td><input class="form-control" ng-model="entity.name" placeholder="商品分类名称"> </td>
</tr>
<tr>
<td>类型模板</td>
<td>
<input ng-model="entity.typeId" placeholder="商品类型模板" class="form-control" type="text"/>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">保存</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
</div>
1.5 修改商品分类
TODO:需自己实现，功能和之前类似，楼主会在之后更新。。。
1.6 删除商品分类
TODO:需自己实现，功能和之前类似，楼主会在之后更新。。。
2.电商概念及表结构分析
2.1电商概念SPU与SKU
SPU = Standard Product Unit （标准产品单位）
SPU是商品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的特性。
通俗点讲，属性值、特性相同的商品就可以称为一个SPU。
例如：
iphone7就是一个SPU，与商家，与颜色、款式、套餐都无关。
SKU=stock keeping unit(库存量单位)
SKU即库存进出计量的单位， 可以是以件、盒、托盘等为单位。
SKU是物理上不可分割的最小存货单元。在使用时要根据不同业态，不同管理模式来处理。在服装、鞋类商品中使用最多最普遍。
例如：
纺织品中一个SKU通常表示：规格、颜色、款式。
2.2表结构分析
Tb_goods 商品表
3.商家后台-商品录入【基本功能】
3.1需求分析
在商家后台实现商品录入功能。包括商品名称、副标题、价格、包装列表、售后服务
3.2后端代码
3.2.1实体类
创建组合实体类goods
public class Goods implements Serializable{
private TbGoods goods;//商品SPU
private TbGoodsDesc goodsDesc;//商品扩展
private List<TbItem> itemList;//商品SKU列表
//getter and setter方法......
}
3.2.2数据访问层
由于我们需要在商品表添加数据后可以得到自增的ID,所以我们需要在TbGoodsMapper.xml中的insert配置中添加如下配置
TODO:待修改
<selectKey resultType="java.lang.Long" order="AFTER" keyProperty="id">
SELECT LAST_INSERT_ID() AS id
</selectKey>
3.2.3服务接口层
修改pinyougou-sellergoods-interface 的GoodsService接口 add方法
/**
* 增加
*/
public void add(Goods goods);
3.2.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());//插入商品扩展数据
}
3.2.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.3前端代码
3.3.1控制层
修改goodsController.js ，在增加成功后弹出提示，并清空实体（因为编辑页面无列表）
//保存
$scope.add=function(){
goodsService.add( $scope.entity ).success(
function(response){
if(response.success){
alert('保存成功');
$scope.entity={};
}else{
alert(response.message);
}
}
);
}
3.3.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>
保存按钮
<button class="btn btn-primary" ng-click="add()"><i class="fa fa-save"></i>保存</button>
4.商家后台-商品录入【商品介绍】
4.1需求分析
实现商品介绍的录入，要求使用富文本编辑器
4.2富文本编辑器介绍
富文本编辑器，Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能。常用的富文本编辑器：
KindEditor http://kindeditor.net/
UEditor http://ueditor.baidu.com/website/
CKEditor http://ckeditor.com/
4.3使用kindeditor完成商品介绍的录入
4.3.1初始化kindeditor编辑器
在页面中添加JS代码，用于初始化kindeditor
<script type="text/javascript">
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowFileManager : true
});
});
</script>
allowFileManager 【是否允许浏览服务器已上传文件】 默认值是：false
4.3.2提取kindeditor编辑器的内容
在goodsController.js中的add()方法中添加,将值赋给实体类introduction
$scope.entity.goodsDesc.introduction=editor.html();
4.3.3清空kindeditor编辑器的内容
修改goodsController.js的add方法
function(response){
if(response.success){
alert("保存成功");
$scope.entity={};
editor.html('');//清空富文本编辑器
}else{
alert(response.message);
}
}
5.分布式文件服务器FastDFS
5.1什么是FastDFS
FastDFS 架构包括 Tracker server 和 Storage server。客户端请求 Tracker server 进行文件上传、下载，通过 Tracker server 调度最终由 Storage server 完成文件上传和下载。
Tracker server 作用是负载均衡和调度，通过 Tracker server 在文件上传时可以根据一些策略找到 Storage server 提供文件上传服务。可以将 tracker 称为追踪服务器或调度服务器。
Storage server 作用是文件存储，客户端上传的文件最终存储在 Storage 服务器上，Storageserver 没有实现自己的文件系统而是利用操作系统 的文件系统来管理文件。可以将storage称为存储服务器。
服务端两个角色：
Tracker：管理集群，tracker 也可以实现集群。每个 tracker 节点地位平等。收集 Storage 集群的状态。
Storage：实际保存文件 Storage 分为多个组，每个组之间保存的文件是不同的。每个组内部可以有多个成员，组成员内部保存的内容是一样的，组成员的地位是一致的，没有主从的概念。
5.2文件上传及下载的流程
5.2.1 文件上传流程
客户端上传文件后存储服务器将文件 ID 返回给客户端，此文件 ID 用于以后访问该文件的索引信息。文件索引信息包括：组名，虚拟磁盘路径，数据两级目录，文件名。
组名：文件上传后所在的 storage 组名称，在文件上传成功后有 storage 服务器返回，需要客户端自行保存。
虚拟磁盘路径：storage 配置的虚拟路径，与磁盘选项 store_path*对应。如果配置了
store_path0 则是 M00，如果配置了 store_path1 则是 M01，以此类推。
数据两级目录：storage 服务器在每个虚拟磁盘路径下创建的两级目录，用于存储数据
文件。
文件名：与文件上传时不同。是由存储服务器根据特定信息生成，文件名包含：源存储
服务器 IP 地址、文件创建时间戳、文件大小、随机数和文件拓展名等信息。
5.2.2 文件下载流程
5.3最简单的 FastDFS 架构
5.4 FastDFS安装
楼主可提供镜像安装方式。。。
6.商家后台-商品录入【商品图片上传】
6.1需求分析
在商品录入界面实现多图片上传
当用户点击新建按钮，弹出上传窗口
6.2后端代码
6.2.1 工具类
（1）pinyougou-common工程pom.xml引入依赖
<!-- 文件上传组件 -->
<dependency>
<groupId>org.csource.fastdfs</groupId>
<artifactId>fastdfs</artifactId>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
</dependency>
（2）将FastDFSClient.java 拷贝到pinyougou-common工程
6.2.2 配置文件
（1）将fdfs_client.conf 拷贝到pinyougou-shop-web工程config文件夹
（2）在pinyougou-shop-web工程application.properties添加配置，FastDfs安装的虚拟机IP
FILE_SERVER_URL=http://192.168.25.133/
（3）在pinyougou-shop-web工程springmvc.xml添加配置：
<!-- 配置多媒体解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8"></property>
<!-- 设定文件上传的最大值5MB，5*1024*1024 -->
<property name="maxUploadSize" value="5242880"></property>
</bean>
6.2.3 控制层
在pinyougou-shop-web新建UploadController.java
/**
* 文件上传Controller
* @author Administrator
*
*/
@RestController
public class UploadController {
//在SpringMVC中已经扫描了属性文件，可以直接将值注入进来
@Value("${FILE_SERVER_URL}")
private String FILE_SERVER_URL;//文件服务器地址
@RequestMapping("/upload")
public Result upload( MultipartFile file){
//1、取文件的扩展名
String originalFilename = file.getOriginalFilename();
String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
try {
//2、创建一个 FastDFS 的客户端
FastDFSClient fastDFSClient
= new FastDFSClient("classpath:config/fdfs_client.conf");
//3、执行上传处理
String path = fastDFSClient.uploadFile(file.getBytes(), extName);
//4、拼接返回的 url 和 ip 地址，拼装成完整的 url
String url = FILE_SERVER_URL + path;
return new Result(true,url);
} catch (Exception e) {
e.printStackTrace();
return new Result(false, "上传失败");
}
}
}
6.3前端代码
6.3.1 服务层
（1）在pinyougou-shop-web工程创建uploadService.js
//文件上传服务层
app.service("uploadService",function($http){
this.uploadFile=function(){
var formData=new FormData();
//文件上传框的ID必须为file
formData.append("file",file.files[0]);
return $http({
method:'POST',
url:"../upload.do",
data: formData,
headers: {'Content-Type':undefined},
transformRequest: angular.identity
});
}
});
anjularjs对于post和get请求默认的Content-Type header 是application/json。通过设置‘Content-Type’: undefined，这样浏览器会帮我们把Content-Type 设置为 multipart/form-data.
通过设置 transformRequest: angular.identity ，anjularjs transformRequest function 将序列化我们的formdata object.
（2）将uploadService服务注入到goodsController 中
//商品控制层（商家后台）
app.controller('goodsController' ,function($scope,$controller ,goodsService,itemCatService,uploadService){
（3）在goods_edit.html引入js
<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/service/itemCatService.js"> </script>
<script type="text/javascript" src="../js/service/uploadService.js"> </script>
<script type="text/javascript" src="../js/controller/baseController.js"> </script>
<script type="text/javascript" src="../js/controller/goodsController.js"> </script>
6.3.2 上传图片
（1）goodsController编写代码
/**
* 上传图片
*/
$scope.uploadFile=function(){
uploadService.uploadFile().success(function(response) {
if(response.success){//如果上传成功，取出url
$scope.image_entity.url=response.message;//设置文件地址
}else{
alert(response.message);
}
}).error(function() {
alert("上传发生错误");
});
};
（2）修改图片上传窗口，调用上传方法，回显上传图片
<div class="modal-body">
<table class="table table-bordered table-striped">
<tr>
<td>颜色</td>
<td><input class="form-control" placeholder="颜色" ng-model="image_entity.color"> </td>
</tr>
<tr>
<td>商品图片</td>
<td>
<table>
<tr>
<td>
<input type="file" id="file" />
<button class="btn btn-primary" type="button" ng-click="uploadFile()">
上传
</button>
</td>
<td>
<img src="{{image_entity.url}}" width="200px" height="200px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
（3）修改新建按钮
<button type="button" class="btn btn-default" title="新建" data-target="#uploadModal" data-toggle="modal"
ng-click="image_entity={}" ><i class="fa fa-file-o"></i> 新建</button>
6.3.3 图片列表
（1）在goodsController.js增加方法
$scope.entity={goods:{},goodsDesc:{itemImages:[]}};//定义页面实体结构
//添加图片列表
$scope.add_image_entity=function(){
$scope.entity.goodsDesc.itemImages.push($scope.image_entity);
}
（2）修改上传窗口的保存按钮
<button class="btn btn-success" ng-click="add_image_entity()" data-dismiss="modal" aria-hidden="true">保存</button>
（3）遍历图片列表
<tr ng-repeat="pojo in entity.goodsDesc.itemImages">
<td>{{pojo.color}}</td>
<td><img alt="" src="{{pojo.url}}" width="100px" height="100px"></td>
<td><button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td>
</tr>
6.3.4 移除图片
在goodsController.js增加代码
//列表中移除图片
$scope.remove_image_entity=function(index){
$scope.entity.goodsDesc.itemImages.splice(index,1);
}
修改列表中的删除按钮
<button type="button" class="btn btn-default" title="删除" ng-click="remove_image_entity($index)">
<i class="fa fa-trash-o"></i> 删除</button>
第六章 商品录入(2)(第十二天)
1.选择商品分类
1.1 需求分析
在商品录入界面实现商品分类的选择（三级分类）效果如下：
当用户选择一级分类后，二级分类列表要相应更新，当用户选择二级分类后，三级列表要相应更新。
1.2 准备工作
（1）在pinyougou-shop-web工程中创建ItemCatController.（可拷贝运营商后台的代码）
（2）创建itemCatService.js （可拷贝运营商后台的代码）
（3）修改goodsController.js，引入itemCatService
（4）修改goods_edit.html，添加引用
<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/service/itemCatService.js"></script>
<script type="text/javascript" src="../js/controller/baseController.js"></script>
<script type="text/javascript" src="../js/controller/goodsController.js"></script>
1.3 代码实现
1.3.1 一级分类下拉框
在goodsController中增加代码
//读取一级分类
$scope.selectItemCat1List=function(){
itemCatService.findByParentId(0).success(
function(response){
$scope.itemCat1List=response;
}
);
}
页面加载调用该方法
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="goodsController"
ng-init="selectItemCat1List()">
修改goods_edit.html一级分类下拉选择框
<select class="form-control" ng-model="entity.goods.category1Id" ng-options="item.id as item.name for item in itemCat1List"></select>
ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。
运行效果如下：
1.3.2二级分类下拉选择框
在goodsController增加代码：
//读取二级分类
$scope.$watch('entity.goods.category1Id', function(newValue, oldValue) {
//根据选择的值，查询二级分类
itemCatService.findByParentId(newValue).success(
function(response){
$scope.itemCat2List=response;
}
);
});
$watch方法用于监控某个变量的值，当被监控的值发生变化，就自动执行相应的函数。
修改goods_edit.html中二级分类下拉框
<select class="form-control select-sm" ng-model="entity.goods.category2Id" ng-options="item.id as item.name for item in itemCat2List"></select>
1.3.3三级分类下拉选择框
在goodsController增加代码：
//读取三级分类
$scope.$watch('entity.goods.category2Id', function(newValue, oldValue) {
//根据选择的值，查询二级分类
itemCatService.findByParentId(newValue).success(
function(response){
$scope.itemCat3List=response;
}
);
});
修改goods_edit.html中三级分类下拉框
<select class="form-control select-sm" ng-model="entity.goods.category3Id" ng-options="item.id as item.name for item in itemCat3List"></select>
1.3.4读取模板ID
在goodsController增加代码：
//三级分类选择后 读取模板ID
$scope.$watch('entity.goods.category3Id', function(newValue, oldValue) {
itemCatService.findOne(newValue).success(
function(response){
$scope.entity.goods.typeTemplateId=response.typeId; //更新模板ID
}
);
});
在goods_edit.html显示模板ID
模板ID:{{entity.goods.typeTemplateId}}
2 品牌选择
2.1 需求分析(第十三天)
在用户选择商品分类后，品牌列表要根据用户所选择的分类进行更新。具体的逻辑是根据用户选择的三级分类找到对应的商品类型模板，商品类型模板中存储了品牌的列表json数据。
2.2 代码实现
（1）在pinyougou-shop-web工程创建TypeTemplateController （可从运营商后台拷贝）
（2）在pinyougou-shop-web工程创建typeTemplateService.js （可从运营商后台拷贝）
（3）在goodsController引入typeTemplateService 并新增代码
//模板ID选择后 更新品牌列表
$scope.$watch('entity.goods.typeTemplateId', function(newValue, oldValue) {
typeTemplateService.findOne(newValue).success(
function(response){
$scope.typeTemplate=response;//获取类型模板
$scope.typeTemplate.brandIds= JSON.parse( $scope.typeTemplate.brandIds);//品牌列表
}
);
});
在页面goods_edit.html 引入js
<script type="text/javascript" src="../js/service/typeTemplateService.js"> </script>
添加品牌选择框
<select class="form-control" ng-model="entity.goods.brandId" ng-options="item.id as item.text for item in typeTemplate.brandIds"></select>
3.扩展属性
3.1 需求分析
3.2 代码实现
修改goodsController.js ，在用户更新模板ID时，读取模板中的扩展属性赋给商品的扩展属性。
//模板ID选择后 更新模板对象
$scope.$watch('entity.goods.typeTemplateId', function(newValue, oldValue) {
typeTemplateService.findOne(newValue).success(
function(response){
$scope.typeTemplate=response;//获取类型模板
$scope.typeTemplate.brandIds= JSON.parse( $scope.typeTemplate.brandIds);//品牌列表
$scope.entity.goodsDesc.customAttributeItems=JSON.parse( $scope.typeTemplate.customAttributeItems);//扩展属性
}
);
});
修改goods_edit.html
<!--扩展属性，在goodsDesc中的customAttributeItems存值是text对应一个value-->
<div class="tab-pane" id="customAttribute">
<div class="row data-type">
<div ng-repeat="pojo in entity.goodsDesc.customAttributeItems">
<div class="col-md-2 title">{{pojo.text}}</div>
<div class="col-md-10 data">
<input class="form-control" ng-model="pojo.value" placeholder="{{pojo.text}}">
</div>
</div>
</div>
</div>
4.规格选择
4.1 需求分析
显示规格及选项列表（复选框）如下图，并保存用户选择的结果
4.2 代码实现
4.2.1 显示规格选项列表
由于我们的模板中只记录了规格名称，而我们除了显示规格名称还是显示规格下的规格选项，所以我们需要在后端扩充方法。
（1）在pinyougou-sellergoods-interface的TypeTemplateService.java新增方法定义
/**
* 返回规格列表
* @return
*/
public List<Map> findSpecList(Long id);
（2）在pinyougou-sellergoods-service的TypeTemplateServiceImpl.java新增方法
@Autowired
private TbSpecificationOptionMapper specificationOptionMapper;
@Override
public List<Map> findSpecList(Long id) {
//查询模板
TbTypeTemplate typeTemplate = typeTemplateMapper.selectByPrimaryKey(id);
//将模板中的规格信息提取出来，并且封装成List<Map>的形式
List<Map> list = JSON.parseArray(typeTemplate.getSpecIds(), Map.class) ;
//循环遍历List中的Map,根据其对应的规格ID，找到对应的规格选项，并将其封装到对应的Map中
for(Map map:list){
//查询规格选项列表
TbSpecificationOptionExample example=new TbSpecificationOptionExample();
com.pinyougou.pojo.TbSpecificationOptionExample.Criteria criteria = example.createCriteria();
criteria.andSpecIdEqualTo( new Long( (Integer)map.get("id") ) );
List<TbSpecificationOption> options = specificationOptionMapper.selectByExample(example);
map.put("options", options);
}
return list;
}
（3）在pinyougou-shop-web的TypeTemplateController.java新增方法
@RequestMapping("/findSpecList")
public List<Map> findSpecList(Long id){
return typeTemplateService.findSpecList(id);
}
测试后端代码：
（4）前端代码：修改pinyougou-shop-web的typeTemplateService.js
//查询规格列表
this.findSpecList=function(id){
return $http.get('../typeTemplate/findSpecList.do?id='+id);
}
（5）修改pinyougou-shop-web的goodsController.js
//模板ID选择后 更新模板对象
$scope.$watch('entity.goods.typeTemplateId', function(newValue, oldValue) {
typeTemplateService.findOne(newValue).success(
function(response){
$scope.typeTemplate=response;//获取类型模板
$scope.typeTemplate.brandIds= JSON.parse( $scope.typeTemplate.brandIds);//品牌列表
$scope.entity.goodsDesc.customAttributeItems=JSON.parse( $scope.typeTemplate.customAttributeItems);//扩展属性
}
);
//查询规格列表
typeTemplateService.findSpecList(newValue).success(
function(response){
$scope.specList=response;
}
);
});
（6）修改goods_edit.html页面
<div ng-repeat="pojo in specList">
<div class="col-md-2 title">{{pojo.text}}</div>
<div class="col-md-10 data">
<span ng-repeat="option in pojo.options">
<input type="checkbox" >{{option.optionName}}
</span>
</div>
</div>
4.2.2 保存选中规格选项
我们需要将用户选中的选项保存在tb_goods_desc表的specification_items字段中，定义json格式如下：
[{“attributeName”:”规格名称”,”attributeValue”:[“规格选项1”,“规格选项2”.... ] } , .... ]
（1）在baseController.js增加代码
//从集合中按照key查询对象
$scope.searchObjectByKey=function(list,key,keyValue){
for(var i=0;i<list.length;i++){
if(list[i][key]==keyValue){
return list[i];
}
}
return null;
}
（2）在goodsController.js增加代码
$scope.entity={ goodsDesc:{itemImages:[],specificationItems:[]} };
$scope.updateSpecAttribute=function($event,name,value){
var object= $scope.searchObjectByKey($scope.entity.goodsDesc.specificationItems ,'attributeName', name);
if(object!=null){
if($event.target.checked ){
object.attributeValue.push(value);
}else{
//取消勾选
object.attributeValue.splice( object.attributeValue.indexOf(value ) ,1);//移除选项
//如果选项都取消了，将此条记录移除
if(object.attributeValue.length==0){
$scope.entity.goodsDesc.specificationItems.splice(
$scope.entity.goodsDesc.specificationItems.indexOf(object),1);
}
}
}else{
$scope.entity.goodsDesc.specificationItems.push(
{"attributeName":name,"attributeValue":[value]});
}
}
（3）在goods_edit.html调用方法
<div ng-repeat="pojo in specList">
<div class="col-md-2 title">{{pojo.text}}</div>
<div class="col-md-10 data">
<span ng-repeat="option in pojo.options">
<input type="checkbox" ng-click="updateSpecAttribute($event,pojo.text,option.optionName)">{{option.optionName}} </span> </div>
</div>
5.商品录入【SKU商品信息】
5.1 需求分析
基于上一步我们完成的规格选择，根据选择的规格录入商品的SKU信息，当用户选择相应的规格，下面的SKU列表就会自动生成，如下图：
实现思路：
（1）我们先定义一个初始的不带规格名称的集合，只有一条记录。
（2）循环用户选择的规格，根据规格名称和已选择的规格选项对原集合进行扩充，添加规格名称和值，新增的记录数与选择的规格选项个数相同
生成的顺序如下图：
5.2前端代码
5.2.1 生成SKU列表(深克隆)
（1）在goodsController.js实现创建sku列表的方法
//创建SKU列表
$scope.createItemList=function(){
$scope.entity.itemList=[{spec:{},price:0,num:99999,status:'0',isDefault:'0' } ];//初始
var items= $scope.entity.goodsDesc.specificationItems;
for(var i=0;i< items.length;i++){
$scope.entity.itemList = addColumn( $scope.entity.itemList,items[i].attributeName,items[i].attributeValue );
}
}
//添加列值
addColumn=function(list,columnName,conlumnValues){
var newList=[];//新的集合
for(var i=0;i<list.length;i++){
var oldRow= list[i];
for(var j=0;j<conlumnValues.length;j++){
var newRow= JSON.parse( JSON.stringify( oldRow ) );//深克隆
newRow.spec[columnName]=conlumnValues[j];
newList.push(newRow);
}
}
return newList;
}
（2）在更新规格属性后调用生成SKU列表的方法
<input type="checkbox" ng-click="updateSpecAttribute($event,pojo.text,option.optionName);createItemList()">{{option.optionName}}
(3）在页面上添加表达式，进行测试
显示效果如下：
5.2.2 显示SKU列表
goods_edit.html页面上绑定SKU列表
<table class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="sorting" ng-repeat="item in entity.goodsDesc.specificationItems">{{item.attributeName}}</th>
<th class="sorting">价格</th>
<th class="sorting">库存</th>
<th class="sorting">是否启用</th>
<th class="sorting">是否默认</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pojo in entity.itemList">
<td ng-repeat="item in entity.goodsDesc.specificationItems">
{{pojo.spec[item.attributeName]}}
</td>
<td>
<input class="form-control" ng-model="pojo.price" placeholder="价格">
</td>
<td>
<input class="form-control" ng-model="pojo.num" placeholder="库存数量">
</td>
<td>
<input type="checkbox" ng-model="pojo.status" ng-true-value="1" ng-false-value="0" >
</td>
<td>
<input type="checkbox" ng-model="pojo.isDefault" ng-true-value="1" ng-false-value="0">
</td>
</tr>
</tbody>
</table>
5.3后端代码(第十四天)
(1).在GoodsServiceImpl添加属性
@Autowired
private TbItemMapper itemMapper;
@Autowired
private TbBrandMapper brandMapper;
@Autowired
private TbItemCatMapper itemCatMapper;
@Autowired
private TbSellerMapper sellerMapper;
（2）修改GoodsServiceImpl的add方法，增加代码，实现对SKU商品信息的保存
@Override
public void add(Goods goods) {
goods.getGoods().setAuditStatus("0");
goodsMapper.insert(goods.getGoods()); //插入商品表
goods.getGoodsDesc().setGoodsId(goods.getGoods().getId());
goodsDescMapper.insert(goods.getGoodsDesc());//插入商品扩展数据
for(TbItem item :goods.getItemList()){
//标题
String title= goods.getGoods().getGoodsName();
Map<String,Object> specMap = JSON.parseObject(item.getSpec());
for(String key:specMap.keySet()){
title+=" "+ specMap.get(key);
}
item.setTitle(title);
item.setGoodsId(goods.getGoods().getId());//商品SPU编号
item.setSellerId(goods.getGoods().getSellerId());//商家编号
item.setCategoryid(goods.getGoods().getCategory3Id());//商品分类编号（3级）
item.setCreateTime(new Date());//创建日期
item.setUpdateTime(new Date());//修改日期
//品牌名称
TbBrand brand = brandMapper.selectByPrimaryKey(goods.getGoods().getBrandId());
item.setBrand(brand.getName());
//分类名称
TbItemCat itemCat = itemCatMapper.selectByPrimaryKey(goods.getGoods().getCategory3Id());
item.setCategory(itemCat.getName());
//商家名称
TbSeller seller = sellerMapper.selectByPrimaryKey(goods.getGoods().getSellerId());
item.setSeller(seller.getNickName());
//图片地址（取spu的第一个图片）
List<Map> imageList = JSON.parseArray(goods.getGoodsDesc().getItemImages(), Map.class) ;
if(imageList.size()>0){
item.setImage ( (String)imageList.get(0).get("url"));
}
itemMapper.insert(item);
}
}
6.商品录入【是否启用规格】
6.1 需求分析
在规格面板添加是否启用规格，当用户没有选择该项，将原来的规格面板和SKU列表隐藏，用户保存商品后只生成一个SKU.
6.2前端代码
goods_add.html添加复选框
<div class="row data-type">
<div class="col-md-2 title">是否启用规格</div>
<div class="col-md-10 data">
<input type="checkbox" ng-model="entity.goods.isEnableSpec" ng-true-value="1" ng-false-value="0">
</div>
</div>
用if指令控制规格面板与SKU列表的显示与隐藏
<div ng-if="entity.goods.isEnableSpec==1">
......SKU表格部分
</div>
6.3后端代码
修改GoodsServiceImpl的add方法
/**
*TODO:待修改
* 增加
*/
@Override
public void add(Goods goods) {
goods.getGoods().setAuditStatus("0");
goodsMapper.insert(goods.getGoods()); //插入商品表
goods.getGoodsDesc().setGoodsId(goods.getGoods().getId());
goodsDescMapper.insert(goods.getGoodsDesc());//插入商品扩展数据
if("1".equals(goods.getGoods().getIsEnableSpec())){
for(TbItem item :goods.getItemList()){
//标题
String title= goods.getGoods().getGoodsName();
Map<String,Object> specMap = JSON.parseObject(item.getSpec());
for(String key:specMap.keySet()){
title+=" "+ specMap.get(key);
}
item.setTitle(title);
setItemValus(goods,item);
itemMapper.insert(item);
}
}else{
TbItem item=new TbItem();
item.setTitle(goods.getGoods().getGoodsName());//商品KPU+规格描述串作为SKU名称
item.setPrice( goods.getGoods().getPrice() );//价格
item.setStatus("1");//状态
item.setIsDefault("1");//是否默认
item.setNum(99999);//库存数量
item.setSpec("{}");
setItemValus(goods,item);
itemMapper.insert(item);
}
}
private void setItemValus(Goods goods,TbItem item) {
item.setGoodsId(goods.getGoods().getId());//商品SPU编号
item.setSellerId(goods.getGoods().getSellerId());//商家编号
item.setCategoryid(goods.getGoods().getCategory3Id());//商品分类编号（3级）
item.setCreateTime(new Date());//创建日期
item.setUpdateTime(new Date());//修改日期
//品牌名称
TbBrand brand = brandMapper.selectByPrimaryKey(goods.getGoods().getBrandId());
item.setBrand(brand.getName());
//分类名称
TbItemCat itemCat = itemCatMapper.selectByPrimaryKey(goods.getGoods().getCategory3Id());
item.setCategory(itemCat.getName());
//商家名称
TbSeller seller = sellerMapper.selectByPrimaryKey(goods.getGoods().getSellerId());
item.setSeller(seller.getNickName());
//图片地址（取spu的第一个图片）
List<Map> imageList = JSON.parseArray(goods.getGoodsDesc().getItemImages(), Map.class) ;
if(imageList.size()>0){
item.setImage ( (String)imageList.get(0).get("url"));
}
扫一扫
3128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
