商品基本信息\商品介紹

時間 2019-11-19

標籤商品基本信息介紹简体版

原文原文鏈接

商品錄入
javascript

課程目標

目標1：完成商品分類功能html

目標2：瞭解電商概念SPU 和SKU前端

目標3：掌握富文本編輯器的使用java

目標4：掌握上傳服務器FastDFSangularjs

目標5：掌握angularJS圖片上傳web

1.商品分類

1.1需求及表結構分析

1.1.1需求分析

實現三級商品分類列表查詢功能spring

進入頁面首先顯示因此一級分類，效果以下：json

點擊列表行的查詢下級按鈕，進入下級分類列表，同時更新麪包屑導航後端

再次點擊錶行的查詢下級按鈕，進入三級分類列表，由於三級分類屬於最後一級，因此在列表中不顯示查詢下級按鈕，同時更新麪包屑導航數組

點擊麪包屑導航，能夠進行返回操做。

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>

指令定義

循環列表

<td>{{entity.id}}</td>

<td>{{entity.name}}</td>

<td>{{entity.typeId}}</td>

</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

<tr>

<td>上級商品分類</td>

<td>

{{entity_1.name}} >> {{entity_2.name}}

</td>

</tr>

<tr>

<td>商品分類名稱</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</div>

</div>

實現類型模板下拉列表的代碼略

1.5修改商品分類（學員實現）

修改item_cat.html的修改按鈕

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
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>

定義控制器：

表單部分代碼：

</div>

</div>

</div>

</div>

</div>

保存按鈕

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

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中引入

<groupId>org.csource.fastdfs</groupId>

<artifactId>fastdfs</artifactId>

</dependency>

（2）添加配置文件fdfs_client.conf ，將其中的服務器地址設置爲192.168.25.133

//......

tracker_server=192.168.25.133:22122

//......

（2）建立java類，main方法代碼以下：

編碼思路：

一、複製tracker.conf配置文件到resources目錄，而後加載配置文件(ClientGlobal.init方法加載)

二、建立一個TrackerClient對象。直接new一個。

三、使用TrackerClient對象建立鏈接，getConnection得到一個TrackerServer對象。

四、建立一個StorageServer的引用，值爲null，爲接下來建立StorageClient使用

五、建立一個StorageClient對象，直接new一個，須要兩個參數TrackerServer對象、StorageServer的引用

六、使用StorageClient對象upload_file方法上傳圖片，使用3個參數的，擴展名不帶「.」。

七、返回數組。包含組名和圖片的路徑，打印結果。

// 一、加載配置文件，配置文件中的內容就是 tracker 服務的地址。

ClientGlobal.init("D:/maven_work/fastDFS-demo/src/fdfs_client.conf");

// 二、建立一個 TrackerClient 對象。直接 new 一個。

TrackerClient trackerClient = new TrackerClient();

// 三、使用 TrackerClient 對象建立鏈接，得到一個 TrackerServer 對象。

TrackerServer trackerServer = trackerClient.getConnection();

// 四、建立一個 StorageServer 的引用，值爲 null

StorageServer storageServer = null;

// 五、建立一個 StorageClient 對象，須要兩個參數 TrackerServer 對象、StorageServer 的引用

StorageClient storageClient = new StorageClient(trackerServer, storageServer);

// 六、使用 StorageClient 對象上傳圖片。

//擴展名不帶「.」

String[] strings = storageClient.upload_file("D:/pic/benchi.jpg", "jpg",

null);

// 七、返回數組。包含組名和圖片的路徑。

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引入依賴

<groupId>org.csource.fastdfs</groupId>

<artifactId>fastdfs</artifactId>

</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>

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){

//一、取文件的擴展名

String originalFilename = file.getOriginalFilename();

String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);

try {

//二、建立一個 FastDFS 的客戶端

FastDFSClient fastDFSClient

= new FastDFSClient("classpath:config/fdfs_client.conf");

//三、執行上傳處理

String path = fastDFSClient.uploadFile(file.getBytes(), extName);

//四、拼接返回的 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

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）修改圖片上傳窗口，調用上傳方法，回顯上傳圖片

<tr>

</tr>

<tr>

<td>

<table>

<tr>

<td>

上傳

</button>

</td>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

（3）修改新建按鈕

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）修改上傳窗口的保存按鈕

（3）遍歷圖片列表

<td>{{pojo.color}}</td>

</tr>

6.3.4 移除圖片

在goodsController.js增長代碼

//列表中移除圖片

$scope.remove_image_entity=function(index){

$scope.entity.goodsDesc.itemImages.splice(index,1);

}

修改列表中的刪除按鈕

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

商品基本信息\商品介紹

課程目標

1.商品分類

1.1需求及表結構分析

1.1.1需求分析

1.1.2表結構分析

1.2列表實現

1.2.1後端代碼

1.2.2前端代碼

1.3麪包屑導航

修改itemCatController.js

綁定麪包屑：

修改列表的查詢下級按鈕，設定級別值後 顯示列表

這裏咱們可使用ng-if指令，用於條件判斷，當級別不等於3的時候才顯示「查詢下級」按鈕

1.4新增商品分類（學員實現）

1.5修改商品分類（學員實現）

1.6刪除商品分類（學員實現）

2.電商概念及表結構分析

2.1電商概念SPU與SKU

2.2表結構分析

3.商家後臺-商品錄入【基本功能】

3.1需求分析

3.2後端代碼

3.2.1實體類

3.2.3服務接口層

3.2.4服務實現層

3.2.5控制層

3.3前端代碼

3.3.1控制層

3.3.2頁面

4.商家後臺-商品錄入【商品介紹】

4.1需求分析

4.2富文本編輯器介紹

4.3使用kindeditor完成商品介紹的錄入

4.3.1初始化kindeditor編輯器

4.3.2提取kindeditor編輯器的內容

4.3.3清空kindeditor編輯器的內容

5.分佈式文件服務器FastDFS

5.1什麼是FastDFS

5.2文件上傳及下載的流程

5.2.1 文件上傳流程（時序圖）

5.2.2 文件下載流程

5.3最簡單的 FastDFS 架構

5.4 FastDFS安裝

5.5 FastDFS入門小Demo

6.商家後臺-商品錄入【商品圖片上傳】

6.1需求分析

6.2後端代碼

6.2.1 工具類

6.2.2 配置文件

6.2.3 控制層

6.3前端代碼

6.3.1 服務層

6.3.2 上傳圖片

6.3.3 圖片列表

6.3.4 移除圖片

修改列表的查詢下級按鈕，設定級別值後顯示列表