1. 學習計劃

1、圖片上傳

a) 圖片伺服器FastDFS

b) 圖片上傳功能實現

2、富文本編輯器的使用KindEditor

3、商品添加功能完成

2. 圖片伺服器的安裝

1、存儲空間可擴展。

2、提供一個統一的訪問方式。

使用FastDFS，分散式文件系統。存儲空間可以橫向擴展，可以實現伺服器的高可用。支持每個節點有備份機。

2.1. 什麼是FastDFS？

FastDFS是用c語言編寫的一款開源的分散式文件系統。FastDFS為互聯網量身定製，充分考慮了冗餘備份、負載均衡、線性擴容等機制，並註重高可用、高性能等指標，使用FastDFS很容易搭建一套高性能的文件伺服器集群提供文件上傳、下載等服務。

2.2. FastDFS架構

FastDFS架構包括 Tracker server和Storage server。客戶端請求Tracker server進行文件上傳、下載，通過Tracker server調度最終由Storage server完成文件上傳和下載。

Tracker server作用是負載均衡和調度，通過Tracker server在文件上傳時可以根據一些策略找到Storage server提供文件上傳服務。可以將tracker稱為追蹤伺服器或調度伺服器。

Storage server作用是文件存儲，客戶端上傳的文件最終存儲在Storage伺服器上，Storage server沒有實現自己的文件系統而是利用操作系統 的文件系統來管理文件。可以將storage稱為存儲伺服器。

服務端兩個角色：

Tracker：管理集群，tracker也可以實現集群。每個tracker節點地位平等。

收集Storage集群的狀態。

Storage：實際保存文件

Storage分為多個組，每個組之間保存的文件是不同的。每個組內部可以有多個成員，組成員內部保存的內容是一樣的，組成員的地位是一致的，沒有主從的概念。

2.3. 文件上傳的流程

客戶端上傳文件後存儲伺服器將文件ID返回給客戶端，此文件ID用於以後訪問該文件的索引信息。文件索引信息包括：組名，虛擬磁碟路徑，數據兩級目錄，文件名。

n 組名：文件上傳後所在的storage組名稱，在文件上傳成功後有storage伺服器返回，需要客戶端自行保存。

n 虛擬磁碟路徑：storage配置的虛擬路徑，與磁碟選項store_path*對應。如果配置了store_path0則是M00，如果配置了store_path1則是M01，以此類推。

n 數據兩級目錄：storage伺服器在每個虛擬磁碟路徑下創建的兩級目錄，用於存儲數據文件。

n 文件名：與文件上傳時不同。是由存儲伺服器根據特定信息生成，文件名包含：源存儲伺服器IP地址、文件創建時間戳、文件大小、隨機數和文件拓展名等信息。

2.4. 文件下載

2.5. 最簡單的FastDFS架構

3. 圖片伺服器安裝方法

3.1. 安裝步驟

第一步：把圖片伺服器解壓縮。

第二步：把圖片伺服器添加到Vmware中。

第三步：Vmware的網路配置。

第四步：開機

移動：網路配置不發生變化。要使用圖片伺服器，需要保證網路配置不變。

複製：重新生成一塊網卡mac地址是新地址。

Ip地址：192.168.25.133

用戶名root、itcast

密碼：itcast

4. 圖片伺服器使用

4.1. Java客戶端：

Maven環境：

4.2. 上傳圖片

4.2.1. 上傳步驟

1、載入配置文件，配置文件中的內容就是tracker服務的地址。

配置文件內容：tracker_server=192.168.25.133:22122

2、創建一個TrackerClient對象。直接new一個。

3、使用TrackerClient對象創建連接，獲得一個TrackerServer對象。

4、創建一個StorageServer的引用，值為null

5、創建一個StorageClient對象，需要兩個參數TrackerServer對象、StorageServer的引用

6、使用StorageClient對象上傳圖片。

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

4.2.2. 代碼

public class FastDFSTest {

    @Test
    public void testFileUpload() throws Exception {
        // 1、載入配置文件，配置文件中的內容就是tracker服務的地址。
        ClientGlobal.init("D:/workspaces-itcast/e3-manager-web/src/main/resources/resource/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:/Documents/Pictures/images/200811281555127886.jpg", "jpg", null);
        // 7、返回數組。包含組名和圖片的路徑。
        for (String string : strings) {
            System.out.println(string);
        }
    }
}

4.3. 使用工具類上傳 

因為全路徑包含了擴展名所以可以不指定，但是如果傳位元組數組就要指定擴展名。

@Test
    public void testFastDfsClient() throws Exception {
        FastDFSClient fastDFSClient = new FastDFSClient("D:/workspaces-itcast/e3-manager-web/src/main/resources/resource/client.conf");
        String file = fastDFSClient.uploadFile("D:/Documents/Pictures/images/2f2eb938943d.jpg");
        System.out.println(file);
    }

5. 圖片上傳功能 

5.1. 功能分析

使用的是KindEditor的多圖片上傳插件。

KindEditor 4.x 文檔

http://kindeditor.net/doc.php

請求的url：/pic/upload

參數：MultiPartFile uploadFile

返回值：

可以創建一個pojo對應返回值。可以使用map

業務邏輯：

1、接收頁面傳遞的圖片信息uploadFile

2、把圖片上傳到圖片伺服器。使用封裝的工具類實現。需要取文件的內容和擴展名。

3、圖片伺服器返回圖片的url

4、將圖片的url補充完整，返回一個完整的url。

5、把返回結果封裝到一個Map對象中返回。

1、需要把commons-io、fileupload 的jar包添加到工程中。

2、配置多媒體解析器。

<!-- 定義文件上傳解析器 -->
    <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>

5.2. Controller 

@Controller
public class PictureController {
    
    @Value("${IMAGE_SERVER_URL}")
    private String IMAGE_SERVER_URL;

    @RequestMapping("/pic/upload")
    @ResponseBody
    public Map fileUpload(MultipartFile uploadFile) {
        try {
            //1、取文件的擴展名
            String originalFilename = uploadFile.getOriginalFilename();
            String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
            //2、創建一個FastDFS的客戶端
            FastDFSClient fastDFSClient = new FastDFSClient("classpath:resource/client.conf");
            //3、執行上傳處理
            String path = fastDFSClient.uploadFile(uploadFile.getBytes(), extName);
            //4、拼接返回的url和ip地址，拼裝成完整的url
            String url = IMAGE_SERVER_URL + path;
            //5、返回map
            Map result = new HashMap<>();
            result.put("error", 0);
            result.put("url", url);
            return result;
        } catch (Exception e) {
            e.printStackTrace();
            //5、返回map
            Map result = new HashMap<>();
            result.put("error", 1);
            result.put("message", "圖片上傳失敗");
            return result;
        }
    }
}

5.3. 解決瀏覽器相容性的問題 

KindEditor的圖片上傳插件，對瀏覽器相容性不好。

使用@ResponseBody註解返回java對象，

Content-Type:application/json;charset=UTF-8

返回字元串時：

Content-Type:text/plan;charset=UTF-8

指定響應結果的content-type：

KindEditor的多圖片上傳插件最後響應的content-type是text/plan格式的json字元串。相容性是最好的。

6. 富文本編輯器的使用方法

6.1. 富文本編輯器介紹

KindEditor

http://kindeditor.net/

UEditor：百度編輯器

http://ueditor.baidu.com/website/

CKEditor

http://ckeditor.com/

純js開發，跟後臺語言沒有關係。

6.2. 使用方法

第一步：在jsp中引入KindEditor的css和js代碼。

第二步：在表單中添加一個textarea控制項。是一個富文本編輯器的載體。類似數據源。

第三步：初始化富文本編輯器。使用官方提供的方法初始化。

第四步：取富文本編輯器的內容。

表單提交之前，把富文本編輯器的內容同步到textarea控制項中。

7. 商品添加功能實現

7.1. 功能分析

請求的url：/item/save

參數：表單的數據。可以使用pojo接收表單的數據，要求pojo的屬性和input的name屬性要一致。

使用TbItem對象接收表單的數據。

TbItem item,String desc

返回值：

Json數據。應該包含一個status的屬性。

可以使用E3Result，放到e3-common中。

業務邏輯：

1、生成商品id

實現方案：

a) Uuid，字元串，不推薦使用。

b) 數值類型，不重覆。日期+時間+隨機數20160402151333123123

c) 可以直接去毫秒值+隨機數。可以使用。

d) 使用redis。Incr。推薦使用。

使用IDUtils生成商品id

2、補全TbItem對象的屬性

3、向商品表插入數據

4、創建一個TbItemDesc對象

5、補全TbItemDesc的屬性

6、向商品描述表插入數據

7、E3Result.ok()

7.2. Dao層

向tb_item, tb_item_desc表中插入數據

可以使用逆向工程

7.3. Service層

參數：TbItem item,String desc

業務邏輯：略，參加上面

返回值：E3Result

@Override
    public E3Result addItem(TbItem item, String desc) {
        // 1、生成商品id
        long itemId = IDUtils.genItemId();
        // 2、補全TbItem對象的屬性
        item.setId(itemId);
        //商品狀態，1-正常，2-下架，3-刪除
        item.setStatus((byte) 1);
        Date date = new Date();
        item.setCreated(date);
        item.setUpdated(date);
        // 3、向商品表插入數據
        itemMapper.insert(item);
        // 4、創建一個TbItemDesc對象
        TbItemDesc itemDesc = new TbItemDesc();
        // 5、補全TbItemDesc的屬性
        itemDesc.setItemId(itemId);
        itemDesc.setItemDesc(desc);
        itemDesc.setCreated(date);
        itemDesc.setUpdated(date);
        // 6、向商品描述表插入數據
        itemDescMapper.insert(itemDesc);
        // 7、E3Result.ok()
        return E3Result.ok();
    }

發佈服務 

7.4. 表現層

引用服務

7.4.1. Controller

請求的url：/item/save

參數：TbItem item,String desc

返回值：E3Result

@RequestMapping(value = "/save",method = RequestMethod.POST)
    @ResponseBody
    public E3Result saveItem(TbItem item, String desc) {
        E3Result result = itemService.addItem(item, desc);
        return result;
    }

7.5. 作業 

商品修改、商品刪除、上架下架。