商品录入
课程目标
目标1：完成商品分类功能
目标2：了解电商概念SPU 和SKU
目标3：掌握富文本编辑器的使用
目标4：掌握上传服务器FastDFS
目标5：掌握angularJS图片上传
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接口，新增方法定义
| /**
|
修改pinyougou-sellergoods-interface工程ItemCatServiceImpl ，实现方法
| @Override
|
修改pinyougou-manager-web的ItemCatController.java
| /** |
1.2.2前端代码
（1）修改itemCatService.js
| //跟据父ID查询商品分类列表 |
（2）修改itemCatController.js
| //跟据父ID查询商品分类列表 |
（3）修改item_cat.html
引入JS
| <script src="../plugins/angularjs/angular.min.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
| //面包屑当前级别 |
绑定面包屑：
| <ol class="breadcrumb"> |
修改列表的查询下级按钮，设定级别值后 显示列表
| <button type="button" class="btn bg-olive btn-xs" ng-click="setGrade(grade+1);selectList(entity)">查询下级</button> |
这里我们可以使用ng-if指令，用于条件判断，当级别不等于3的时候才显示“查询下级”按钮
<span ng-if="grade!=3">
<button type="button" class="btn bg-olive btn-xs" ng-click="setGrade(grade+1);selectList(entity)">查询下级</button>
</span>
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修改商品分类（学员实现）
修改item_cat.html的修改按钮
| <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)">修改</button> |
1.6删除商品分类（学员实现）
核心思想，有下级分类的，要么一起删除，要么不准删除。
（代码略）
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.3服务接口层
修改pinyougou-sellergoods-interface 的GoodsService接口 add方法
| /** * 增加 */ public void add(Goods goods); |
3.2.4服务实现层
修改pinyougou-sellergoods-service的GoodsServiceImpl.java
| @Autowired
|
3.2.5控制层
修改pinyougou-shop-web工程的GoodsController的add方法
| /**
|
3.3前端代码
3.3.1控制层
修改goodsController.js ，在增加成功后弹出提示，并清空实体（因为编辑页面无列表）
| //保存商品
|
3.3.2页面
修改goods_edit.html
引入JS:
| <script src="../plugins/angularjs/angular.min.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()方法中添加
| $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 是用 c 语言编写的一款开源的分布式文件系统。FastDFS 为互联网量身定制，充分考虑了冗余备份、负载均衡、线性扩容等机制，并注重高可用、高性能等指标，使用 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服务器在每个虚拟磁盘路径下创建的两级目录，用于存储数据文件。两级目录的范围都是 00~FF，备注(16进制中FF等于255，加上从00开始，也就是说第一级目录可以放255+1个目录，二级目录可放个数为：256*256 =65,536个文件夹目录，为保证文件访问速度，粗略按照一个目录2,000个文件存放<00-FF>总共可保存文件: 131,072,000个)。
- 文件名：与文件上传时不同。是由存储服务器根据特定信息生成，文件名包含：源存储服务器IP地址、文件创建时间戳、文件大小、随机数和文件拓展名等信息。
5.2.2 文件下载流程
5.3最简单的 FastDFS 架构
5.4 FastDFS安装
FastDFS 安装步骤非常繁琐，我们在课程中不做要求。已经提供单独的《FastDFS安装部署文档》供学员们课后阅读。
为了能够快速的搭建FastDFS环境进行代码开发，我们这里提供了安装好的镜像。
解压“资源/Linux镜像/fastDFS/pinyougou-image-server.zip”,双击vmx文件，然后启动。
注意：遇到下列提示选择“我已移动该虚拟机”！
IP地址已经固定为192.168.25.133 ，请设置你的仅主机网段为25。
登录名为root 密码为itcast
5.5 FastDFS入门小Demo
需求：将本地图片上传至图片服务器，再控制台打印url
（1）创建Maven工程fastDFSdemo
由于FastDFS客户端jar包并没有在中央仓库中，所以需要使用下列命令手动安装jar包到Maven本地仓库（将jar包放到d盘setup目录）课程配套的本地仓库已经有此jar包，此步可省略。
| mvn install:install-file -DgroupId=org.csource.fastdfs -DartifactId=fastdfs -Dversion=1.2 -Dpackaging=jar -Dfile=d:\setup\fastdfs_client_v1.20.jar |
pom.xml中引入
| <dependency> <groupId>org.csource.fastdfs</groupId> <artifactId>fastdfs</artifactId> <version>1.2</version> </dependency> |
（2）添加配置文件fdfs_client.conf ，将其中的服务器地址设置为192.168.25.133
| //...... tracker_server=192.168.25.133:22122 //...... |
（2）创建java类，main方法代码如下：
编码思路：
1、复制tracker.conf配置文件到resources目录，然后加载配置文件(ClientGlobal.init方法加载)
2、创建一个TrackerClient对象。直接new一个。
3、使用TrackerClient对象创建连接，getConnection获得一个TrackerServer对象。
4、创建一个StorageServer的引用，值为null，为接下来创建StorageClient使用
5、创建一个StorageClient对象，直接new一个，需要两个参数TrackerServer对象、StorageServer的引用
6、使用StorageClient对象upload_file方法上传图片，使用3个参数的， 扩展名不带“.”。
7、返回数组。包含组名和图片的路径，打印结果。
| // 1、加载配置文件，配置文件中的内容就是 tracker 服务的地址。 ClientGlobal.init("D:/maven_work/fastDFS-demo/src/fdfs_client.conf"); // 2、创建一个 TrackerClient 对象。直接 new 一个。 TrackerClient trackerClient = new TrackerClient(); // 3、使用 TrackerClient 对象创建连接，获得一个 TrackerServer 对象。 TrackerServer trackerServer = trackerClient.getConnection(); // 4、创建一个 StorageServer 的引用，值为 null StorageServer storageServer = null; // 5、创建一个 StorageClient 对象，需要两个参数 TrackerServer 对象、StorageServer 的引用 StorageClient storageClient = new StorageClient(trackerServer, storageServer); // 6、使用 StorageClient 对象上传图片。 //扩展名不带“.” String[] strings = storageClient.upload_file("D:/pic/benchi.jpg", "jpg", null); // 7、返回数组。包含组名和图片的路径。 for (String string : strings) { System.out.println(string); } |
控制台输出如下结果：
| group1 M00/00/00/wKgZhVkMP4KAZEy-AAA-tCf93Fo973.jpg |
在浏览器输入：
http://192.168.25.133/group1/M00/00/00/wKgZhVkMP4KAZEy-AAA-tCf93Fo973.jpg
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）将“资源/fastDFS/工具类”的FastDFSClient.java 拷贝到pinyougou-common工程
6.2.2 配置文件
（1）将“资源/fastDFS/配置文件”文件夹中的 fdfs_client.conf 拷贝到pinyougou-shop-web工程config文件夹
（2）在pinyougou-shop-web工程application.properties添加配置
| 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
| package com.pinyougou.shop.controller; import org.springframework.beans.factory.annotation.Value; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import entity.Result; import util.FastDFSClient; /** * 文件上传Controller * @author Administrator * */ @RestController public class UploadController {
@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(); 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> |