前言

來啦老鐵！

筆者學(xué)習(xí)Spring Boot有一段時間了，附上Spring Boot系列學(xué)習(xí)文章，歡迎取閱、賜教：

1. 5分鐘入手Spring Boot;
2. Spring Boot數(shù)據(jù)庫交互之Spring Data JPA;
3. Spring Boot數(shù)據(jù)庫交互之Mybatis;
4. Spring Boot視圖技術(shù);
5. Spring Boot之整合Swagger;
6. Spring Boot之junit單元測試踩坑;
7. 如何在Spring Boot中使用TestNG;
8. Spring Boot之整合logback日志;
9. Spring Boot之整合Spring Batch：批處理與任務(wù)調(diào)度;
10. Spring Boot之整合Spring Security: 訪問認(rèn)證;
11. Spring Boot之整合Spring Security: 授權(quán)管理;
12. Spring Boot之多數(shù)據(jù)庫源：極簡方案;
13. Spring Boot之使用MongoDB數(shù)據(jù)庫源;
14. Spring Boot之多線程、異步：@Async;
15. Spring Boot之前后端分離（一）：Vue前端;
16. Spring Boot之前后端分離（二）：后端、前后端集成;
17. Spring Boot之前后端分離（三）：登錄、登出、頁面認(rèn)證;
18. Spring Boot之面向切面編程：Spring AOP;
19. Spring Boot之集成Redis（一）：Redis初入門;
20. Spring Boot之集成Redis（二）：集成Redis;
21. Spring Boot之集成Redis（三）：Spring Cache + Redis;
22. Spring Boot之文件上傳、下載;
23. Spring Boot中文亂碼問題解決方案：親測有效;
24. Spring Boot之框架應(yīng)用：個人云盤（一）;

在上一篇文章《Spring Boot之框架應(yīng)用：個人云盤（一）》中，我們一起設(shè)計了一個個人云盤，并且完成前端的初步設(shè)計、后端代碼的初步實現(xiàn)，其代碼已上傳Git Hub倉庫，歡迎取閱：

• https://github.com/dylanz666/spring-boot-cloud-storage

但我們?nèi)晕赐瓿汕昂蠖思?，整個云盤還沒有完成，而截止在寫這篇文章時，我已完成了云盤，代碼就大家自己clone下來看吧，這里咱們一起來看看效果吧！

在介紹前，這里稍微做一下說明：

由于我預(yù)計會將該云盤提供給家人使用，而家人更多的是使用手機(jī)來備份照片、文件等，因此我更多從手機(jī)端美觀性、實用性出發(fā)，一定程度上放棄電腦端的美觀性，讀者有將該項目拿去使用，可自行調(diào)整UI哦！

云盤功能介紹

1. 登錄頁面；

登錄頁面

賬號、密碼請看后端代碼內(nèi)的配置，其中一個賬號為：dylanz，密碼為：123；

2.云盤主頁面；

云盤主頁面

標(biāo)識一下做個介紹：

云盤主頁面

1. 用戶名及用戶角色信息和云盤容量信息入口；

點擊標(biāo)記1，彈出云盤容量信息，信息實時反映文件系統(tǒng)真實情況，如：

云盤容量信息

2. 網(wǎng)站登出入口；

注：
1). 點擊該入口會真的登出網(wǎng)站哦，這方面可參考之前的文章《Spring Boot之前后端分離（三）：登錄、登出、頁面認(rèn)證》；
2). 用戶1小時內(nèi)沒有任何操作，會話也會關(guān)閉，這時候也需要再次登錄才能使用云盤哦！

3. 角色切換入口，預(yù)留；

4. 文件選擇、上傳文件入口；

電腦點擊后會直接調(diào)起文件選擇窗口，而手機(jī)點擊后會先選擇瀏覽類型，如：

1). 電腦端：

電腦端上傳文件

2). 手機(jī)端：

手機(jī)端上傳文件

選擇好文件確認(rèn)后，直接開始上傳，速度杠杠滴?。?！

5. 下載文件入口；

選擇完文件，點擊下載文件入口，確認(rèn)后就可以下載了，可以多選，如：

下載文件

注意手機(jī)要關(guān)閉無痕模式哦！

6. 刪除文件入口；

選擇完文件，點擊刪除文件入口，確認(rèn)后就可以刪除了，可以多選！

刪除文件

7. 重命名文件入口；

選擇完文件（一次只能選擇一個文件），點擊重命名入口，輸入文件名（需要帶后綴名），確認(rèn)后就可以更改文件名啦！

重命名文件

8. 新建文件夾入口；

點擊新建文件夾入口，輸入文件夾名，就能在當(dāng)前文件夾下新建文件夾啦！

新建文件夾

9. 刪除文件夾入口；

點擊刪除文件夾入口，在入口內(nèi)選擇當(dāng)前文件夾下的文件夾，確定后就能刪除選中的文件夾啦！

刪除文件夾

10. 取消選擇入口；

取消被選中的內(nèi)容，簡單功能；

11. 搜索文件、文件夾入口，預(yù)留；

12. 當(dāng)前文件夾下的內(nèi)容；

這里頭還有些功能：
1). 點擊文件夾，則會進(jìn)入該文件夾，然后加載該文件夾下的內(nèi)容，操作起來就像在操作文件夾一樣，如點擊“美食”文件夾：

點擊“美食”文件夾

2). 點擊文件，如果該文件為圖片，則會打開預(yù)覽窗口，其他類型文件則信息提示不支持預(yù)覽，如：

預(yù)覽窗口-圖片

13. 返回上一級目錄入口；

點擊該按鈕，返回當(dāng)前目錄的上一級文件夾目錄，并加載其內(nèi)容，與電腦操作文件夾類似！

14. 當(dāng)前文件夾信息展示、刷新當(dāng)前文件夾；

該按鈕展示當(dāng)前文件夾相對路徑，點擊后刷新當(dāng)前文件夾，獲取文件系統(tǒng)中，該文件夾的內(nèi)容；

15. 刷新云盤頁面入口，簡單功能；

云盤訪問介紹

該云盤只供我家自己使用，因此，我在起前端時，hard code了服務(wù)器ip，如： 192.168.0.105，前端端口為：9528，且前端中使用的后端ip也hard code在前端的webpack 配置文件中了，后端ip: 192.168.0.105，后端端口為：8080。

因此，手機(jī)訪問云盤的步驟：

1. 手機(jī)連接無線網(wǎng)，該無線網(wǎng)應(yīng)與服務(wù)器同一個無線網(wǎng)，即同一個局域網(wǎng)！
2. 網(wǎng)絡(luò)連接后，只需要在手機(jī)瀏覽器訪問：http://192.168.0.105:9528/#/login.html，即可！

至此，一個基本的、功能相對完整的云盤就此完成了（沒有考慮太多細(xì)節(jié)哈），有興趣的朋友，可以下載代碼，啟動前端、后端后，直接拿來使用或者稍作修改，擁有一個自己的云盤，也是挺香的，不是嘛？

• 啟動前端：npm start
• 啟動后端：直接運行App.java

當(dāng)然，我們也可以將該云盤部署到云服務(wù)器，綁定個域名啥的，該產(chǎn)品也就能拿去賣了，然后就能財富自由，走上人生巔峰啦（年輕人，耗子尾汁）?。?！

好啦，今天就到這吧！

如果本文對您有幫助，麻煩點贊、關(guān)注！

謝謝！