Spring Boot之框架应用：个人云盘（二）

前言

来啦老铁！

笔者学习Spring Boot有一段时间了，附上Spring Boot系列学习文章，欢迎取阅、赐教：

1. 5分钟入手Spring Boot;
2. Spring Boot数据库交互之Spring Data JPA;
3. Spring Boot数据库交互之Mybatis;
4. Spring Boot视图技术;
5. Spring Boot之整合Swagger;
6. Spring Boot之junit单元测试踩坑;
7. 如何在Spring Boot中使用TestNG;
8. Spring Boot之整合logback日志;
9. Spring Boot之整合Spring Batch：批处理与任务调度;
10. Spring Boot之整合Spring Security: 访问认证;
11. Spring Boot之整合Spring Security: 授权管理;
12. Spring Boot之多数据库源：极简方案;
13. Spring Boot之使用MongoDB数据库源;
14. Spring Boot之多线程、异步：@Async;
15. Spring Boot之前后端分离（一）：Vue前端;
16. Spring Boot之前后端分离（二）：后端、前后端集成;
17. Spring Boot之前后端分离（三）：登录、登出、页面认证;
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之框架应用：个人云盘（一）;

在上一篇文章《Spring Boot之框架应用：个人云盘（一）》中，我们一起设计了一个个人云盘，并且完成前端的初步设计、后端代码的初步实现，其代码已上传Git Hub仓库，欢迎取阅：

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

但我们仍未完成前后端集成，整个云盘还没有完成，而截止在写这篇文章时，我已完成了云盘，代码就大家自己clone下来看吧，这里咱们一起来看看效果吧！

在介绍前，这里稍微做一下说明：

由于我预计会将该云盘提供给家人使用，而家人更多的是使用手机来备份照片、文件等，因此我更多从手机端美观性、实用性出发，一定程度上放弃电脑端的美观性，读者有将该项目拿去使用，可自行调整UI哦！

云盘功能介绍

1. 登录页面；

登录页面

账号、密码请看后端代码内的配置，其中一个账号为：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。

因此，手机访问云盘的步骤：

1. 手机连接无线网，该无线网应与服务器同一个无线网，即同一个局域网！
2. 网络连接后，只需要在手机浏览器访问：http://192.168.0.105:9528/#/login.html，即可！

至此，一个基本的、功能相对完整的云盘就此完成了（没有考虑太多细节哈），有兴趣的朋友，可以下载代码，启动前端、后端后，直接拿来使用或者稍作修改，拥有一个自己的云盘，也是挺香的，不是嘛？

• 启动前端：npm start
• 启动后端：直接运行App.java

当然，我们也可以将该云盘部署到云服务器，绑定个域名啥的，该产品也就能拿去卖了，然后就能财富自由，走上人生巅峰啦（年轻人，耗子尾汁）！！！

好啦，今天就到这吧！

如果本文对您有帮助，麻烦点赞、关注！

谢谢！