前言
來啦老鐵卑硫！
筆者學(xué)習(xí)Spring Boot有一段時間了，附上Spring Boot系列學(xué)習(xí)文章，歡迎取閱、賜教：
- 5分鐘入手Spring Boot;
- Spring Boot數(shù)據(jù)庫交互之Spring Data JPA;
- Spring Boot數(shù)據(jù)庫交互之Mybatis;
- Spring Boot視圖技術(shù);
- Spring Boot之整合Swagger;
- Spring Boot之junit單元測試踩坑;
- 如何在Spring Boot中使用TestNG;
- Spring Boot之整合logback日志;
- Spring Boot之整合Spring Batch：批處理與任務(wù)調(diào)度;
- Spring Boot之整合Spring Security: 訪問認(rèn)證;
- Spring Boot之整合Spring Security: 授權(quán)管理;
- Spring Boot之多數(shù)據(jù)庫源：極簡方案;
- Spring Boot之使用MongoDB數(shù)據(jù)庫源;
- Spring Boot之多線程洲尊、異步：@Async;
- Spring Boot之前后端分離（一）：Vue前端;
- Spring Boot之前后端分離（二）：后端、前后端集成;
- Spring Boot之前后端分離（三）：登錄奈偏、登出坞嘀、頁面認(rèn)證;
- Spring Boot之面向切面編程：Spring AOP;
- Spring Boot之集成Redis（一）：Redis初入門;
- Spring Boot之集成Redis（二）：集成Redis;
- Spring Boot之集成Redis（三）：Spring Cache + Redis;
- Spring Boot之文件上傳、下載;
- Spring Boot中文亂碼問題解決方案：親測有效;
- Spring Boot之框架應(yīng)用：個人云盤（一）;
在上一篇文章《Spring Boot之框架應(yīng)用：個人云盤（一）》中惊来，我們一起設(shè)計了一個個人云盤姆吭，并且完成前端的初步設(shè)計、后端代碼的初步實現(xiàn)唁盏，其代碼已上傳Git Hub倉庫，歡迎取閱：
但我們?nèi)晕赐瓿汕昂蠖思杉烀校麄€云盤還沒有完成厘擂，而截止在寫這篇文章時，我已完成了云盤锰瘸，代碼就大家自己clone下來看吧刽严，這里咱們一起來看看效果吧！
在介紹前避凝，這里稍微做一下說明：
由于我預(yù)計會將該云盤提供給家人使用舞萄，而家人更多的是使用手機(jī)來備份照片、文件等管削，因此我更多從手機(jī)端美觀性倒脓、實用性出發(fā)，一定程度上放棄電腦端的美觀性含思，讀者有將該項目拿去使用崎弃，可自行調(diào)整UI哦！
云盤功能介紹
- 登錄頁面含潘；
賬號饲做、密碼請看后端代碼內(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ī)端：
選擇好文件確認(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ù)覽，如：
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ī)訪問云盤的步驟：
- 手機(jī)連接無線網(wǎng)，該無線網(wǎng)應(yīng)與服務(wù)器同一個無線網(wǎng)逝变，即同一個局域網(wǎng)基茵！
- 網(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)注！
謝謝炕檩！
