JAVAEE——宜立方商城04：圖片服務器FastDFS、富文本編輯器KindEditor、商品添加功能完成

1. 學習計劃

一、圖片上傳

a) 圖片服務器FastDFS

b) 圖片上傳功能實現

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

三、商品添加功能完成

 

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. 上傳步驟

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

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

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

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

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

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

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

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

 

4.2.2. 代碼

public class FastDFSTest {

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

 

 

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

二、配置多媒體解析器。

<!-- 定義文件上傳解析器 -->
    <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 {
            //一、取文件的擴展名
            String originalFilename = uploadFile.getOriginalFilename();
            String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
            //二、建立一個FastDFS的客戶端
            FastDFSClient fastDFSClient = new FastDFSClient("classpath:resource/client.conf");
            //三、執行上傳處理
            String path = fastDFSClient.uploadFile(uploadFile.getBytes(), extName);
            //四、拼接返回的url和ip地址，拼裝成完整的url
            String url = IMAGE_SERVER_URL + path;
            //五、返回map
            Map result = new HashMap<>();
            result.put("error", 0);
            result.put("url", url);
            return result;
        } catch (Exception e) {
            e.printStackTrace();
            //五、返回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中。

 

業務邏輯：

一、生成商品id

實現方案：

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

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

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

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

使用IDUtils生成商品id

二、補全TbItem對象的屬性

三、向商品表插入數據

四、建立一個TbItemDesc對象

五、補全TbItemDesc的屬性

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

七、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) {
        // 一、生成商品id
        long itemId = IDUtils.genItemId();
        // 二、補全TbItem對象的屬性
        item.setId(itemId);
        //商品狀態，1-正常，2-下架，3-刪除
        item.setStatus((byte) 1);
        Date date = new Date();
        item.setCreated(date);
        item.setUpdated(date);
        // 三、向商品表插入數據
        itemMapper.insert(item);
        // 四、建立一個TbItemDesc對象
        TbItemDesc itemDesc = new TbItemDesc();
        // 五、補全TbItemDesc的屬性
        itemDesc.setItemId(itemId);
        itemDesc.setItemDesc(desc);
        itemDesc.setCreated(date);
        itemDesc.setUpdated(date);
        // 六、向商品描述表插入數據
        itemDescMapper.insert(itemDesc);
        // 七、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. 做業 

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