商品錄入

課程目標

目標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查詢商品分類列表
   * @param parentId
   * @return
   */public List<TbItemCat>  findByParentId(Long parentId);

修改pinyougou-sellergoods-interface工程ItemCatServiceImpl ，實現方法

@Override
    public List<TbItemCat> findByParentId(Long  parentId) {
//組裝查詢條件TbItemCat  where = new TbItemCat();
  where.setParentId(parentId);
//查詢數據List<TbItemCat>  catList = itemCatMapper.select(where);
return catList;
    }

修改pinyougou-manager-web的ItemCatController.java

/**
   * 跟據父ID查詢商品分類列表
   * @param parentId 父id
   * @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 src="../plugins/angularjs/angular.min.js"></script>

  <script src="../js/base.js"></script>
  <script src="../js/services/itemCatService.js"></script>
  <script src="../js/controller/baseController.js"></script>
  <script src="../js/controller/itemCatController.js"></script>

指令定義

<body class="hold-transition  skin-red sidebar-mini" ng-app="pinyougou" ng-controller="itemCatController" ng-init="findByParentId(0)">

循環列表

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;
//修改當前級別$scope.setGrade=function  (value) {
     $scope.grade=value;
     }

     //麪包屑記錄邏輯
     $scope.selectList=function (p_entity) {
     if($scope.grade == 1){
        $scope.entity_1=null;
        $scope.entity_2=null;
     }else if($scope.grade == 2){
             $scope.entity_1=p_entity;
             $scope.entity_2=null;
         }else if($scope.grade == 3){
             $scope.entity_2=p_entity;
         }
         this.findByParentId(p_entity.id)
     }
綁定麪包屑：
<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>
修改列表的查詢下級按鈕，設定級別值後 顯示列表
<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>               
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

publicclass 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方法

/**
     * 增加
    */
    publicvoid  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.insertSelective(goods.getGoods());

     //設置商品id
     goods.getGoodsDesc().setGoodsId(goods.getGoods().getId());
     goodsDescMapper.insertSelective(goods.getGoodsDesc());
  }

3.2.5控制層

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

/**
   * 增加
   * @param goods
   * @return
   */@RequestMapping("/add")
public Result add(@RequestBody Goods goods){
     try {
        //獲取當前登錄用户的id
        String username = SecurityContextHolder.getContext().getAuthentication().getName();
         goods.getGoods().setSellerId(username);
        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){
                 alert(response.message);
                 if(response.success){
                     //清空實體
                     $scope.entity={};
                 }
             }
         );
     }

3.3.2頁面

修改goods_edit.html 

引入JS:

<script src="../plugins/angularjs/angular.min.js"></script>

  <script src="../js/base.js"></script>
  <script src="../js/services/goodsService.js"></script>
  <script src="../js/controller/baseController.js"></script>
  <script 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服務器在每個虛擬磁盤路徑下創建的兩級目錄，用於存儲數據文件。兩級目錄的範圍都是 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>
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>
fastdfs</artifactId>
         </dependency>
         <dependency>
fileupload</groupId>
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
publicclass  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);
url 和 ip 地址，拼裝成完整的 url
             String url = FILE_SERVER_URL + path;            
             returnnew Result(true,url);           
         } catch (Exception e) {
             e.printStackTrace();
             returnnew 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>