課程目标
目标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接口，新增方法定義
/**
* 根據上級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); //查詢此級下級清單
} 修改清單的查詢下級按鈕，設定級别值後 顯示清單
查詢下級
這裡我們使用了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修改商品分類（學員實作）
修改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.2資料通路層
由于我們需要在商品表添加資料後可以得到自增的ID,是以我們需要在TbGoodsMapper.xml中的insert配置中添加如下配置
<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()方法中添加
$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 伺服器在每個虛拟磁盤路徑下建立的兩級目錄，用于存儲資料
檔案。
檔案名：與檔案上傳時不同。是由存儲伺服器根據特定資訊生成，檔案名包含：源存儲
伺服器 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 -Dversinotallow=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
//...... （3）建立java類，main方法代碼如下：
// 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> //清單中移除圖檔
$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>