前言
來啦老鐵！
筆者學習Spring Boot有一段時間了，附上Spring Boot系列學習文章，歡迎取閱、賜教：
- 5分鐘入手Spring Boot;
- Spring Boot數據庫交互之Spring Data JPA;
- Spring Boot數據庫交互之Mybatis;
- Spring Boot視圖技術;
- Spring Boot之整合Swagger;
- Spring Boot之junit單元測試踩坑;
- 如何在Spring Boot中使用TestNG;
- Spring Boot之整合logback日志;
- Spring Boot之整合Spring Batch：批處理與任務調度;
- Spring Boot之整合Spring Security: 訪問認證;
- Spring Boot之整合Spring Security: 授權管理;
- Spring Boot之多數據庫源：極簡方案;
- Spring Boot之使用MongoDB數據庫源;
- Spring Boot之多線程、異步：@Async;
- Spring Boot之前后端分離（一）：Vue前端;
- Spring Boot之前后端分離（二）：后端、前后端集成;
- Spring Boot之前后端分離（三）：登錄、登出、頁面認證;
- Spring Boot之面向切面編程：Spring AOP;
- Spring Boot之集成Redis（一）：Redis初入門;
- Spring Boot之集成Redis（二）：集成Redis;
- Spring Boot之集成Redis（三）：Spring Cache + Redis;
- Spring Boot之文件上傳、下載;
- Spring Boot中文亂碼問題解決方案：親測有效;
- Spring Boot之框架應用：個人云盤（一）;
在上一篇文章《Spring Boot之框架應用：個人云盤（一）》中，我們一起設計了一個個人云盤，并且完成前端的初步設計、后端代碼的初步實現，其代碼已上傳Git Hub倉庫，歡迎取閱：
但我們仍未完成前后端集成，整個云盤還沒有完成，而截止在寫這篇文章時，我已完成了云盤，代碼就大家自己clone下來看吧，這里咱們一起來看看效果吧！
在介紹前，這里稍微做一下說明：
由于我預計會將該云盤提供給家人使用，而家人更多的是使用手機來備份照片、文件等，因此我更多從手機端美觀性、實用性出發，一定程度上放棄電腦端的美觀性，讀者有將該項目拿去使用，可自行調整UI哦！
云盤功能介紹
- 登錄頁面；
賬號、密碼請看后端代碼內的配置，其中一個賬號為：dylanz，密碼為：123；
2.云盤主頁面；
標識一下做個介紹：
1. 用戶名及用戶角色信息和云盤容量信息入口；
點擊標記1，彈出云盤容量信息，信息實時反映文件系統真實情況，如：
2. 網站登出入口；
注：
1). 點擊該入口會真的登出網站哦，這方面可參考之前的文章《Spring Boot之前后端分離（三）：登錄、登出、頁面認證》；
2). 用戶1小時內沒有任何操作，會話也會關閉，這時候也需要再次登錄才能使用云盤哦！
3. 角色切換入口，預留；
4. 文件選擇、上傳文件入口；
電腦點擊后會直接調起文件選擇窗口，而手機點擊后會先選擇瀏覽類型，如：
1). 電腦端：
2). 手機端：
選擇好文件確認后，直接開始上傳，速度杠杠滴！??！
5. 下載文件入口；
選擇完文件，點擊下載文件入口，確認后就可以下載了，可以多選，如：
注意手機要關閉無痕模式哦！
6. 刪除文件入口；
選擇完文件，點擊刪除文件入口，確認后就可以刪除了，可以多選！
7. 重命名文件入口；
選擇完文件（一次只能選擇一個文件），點擊重命名入口，輸入文件名（需要帶后綴名），確認后就可以更改文件名啦！
8. 新建文件夾入口；
點擊新建文件夾入口，輸入文件夾名，就能在當前文件夾下新建文件夾啦！
9. 刪除文件夾入口；
點擊刪除文件夾入口，在入口內選擇當前文件夾下的文件夾，確定后就能刪除選中的文件夾啦！
10. 取消選擇入口；
取消被選中的內容，簡單功能；
11. 搜索文件、文件夾入口，預留；
12. 當前文件夾下的內容；
這里頭還有些功能：
1). 點擊文件夾，則會進入該文件夾，然后加載該文件夾下的內容，操作起來就像在操作文件夾一樣，如點擊“美食”文件夾：
2). 點擊文件，如果該文件為圖片，則會打開預覽窗口，其他類型文件則信息提示不支持預覽，如：
13. 返回上一級目錄入口；
點擊該按鈕，返回當前目錄的上一級文件夾目錄，并加載其內容，與電腦操作文件夾類似！
14. 當前文件夾信息展示、刷新當前文件夾；
該按鈕展示當前文件夾相對路徑，點擊后刷新當前文件夾，獲取文件系統中，該文件夾的內容；
15. 刷新云盤頁面入口，簡單功能；
云盤訪問介紹
該云盤只供我家自己使用，因此，我在起前端時，hard code了服務器ip，如： 192.168.0.105，前端端口為：9528，且前端中使用的后端ip也hard code在前端的webpack 配置文件中了，后端ip: 192.168.0.105，后端端口為：8080。
因此，手機訪問云盤的步驟：
- 手機連接無線網，該無線網應與服務器同一個無線網，即同一個局域網！
- 網絡連接后，只需要在手機瀏覽器訪問：http://192.168.0.105:9528/#/login.html，即可！
至此，一個基本的、功能相對完整的云盤就此完成了（沒有考慮太多細節哈），有興趣的朋友，可以下載代碼，啟動前端、后端后，直接拿來使用或者稍作修改，擁有一個自己的云盤，也是挺香的，不是嘛？
- 啟動前端：npm start
- 啟動后端：直接運行App.java
當然，我們也可以將該云盤部署到云服務器，綁定個域名啥的，該產品也就能拿去賣了，然后就能財富自由，走上人生巔峰啦（年輕人，耗子尾汁）?。?！
好啦，今天就到這吧！
如果本文對您有幫助，麻煩點贊、關注！
謝謝！
