再见，百度云

谁践踏了优雅 2021-09-08 04:48 711阅读 0赞

推荐一个鲜有人知晓的的云盘开源项目，可以作为某度云的替代品。

该项目采用最流行的前后端分离架构进行开发和部署，旨在为用户和企业提供一个简单、方便的文件存储方案，能够以完善的目录结构体系，对文件进行管理 。主要用到以下技术栈：

前端：Element UI、Vue、Node.js、Webpack

后端：** **MySQL、Spring Boot、MyBatis、JPA、JWT

### ***01.  *****功能截图** ###

--------------------

#### **页面布局** ####

页面布局分为三个区域，分别是菜单栏、文件操作、导航区域。

![24486d59b61ef1720bc00606560c21be.png][]

**网盘主页**

左侧菜单栏可折叠，表格操作列可折叠，可控制当前表格中列的显示和隐藏。

![2acc26549763a823eb50b1a2f401c73d.gif][]

#### **批量操作功能** ####

![e1fb914cf6603ea3db044fe80feb4415.gif][]

#### **文件查看 - 列表模式** ####

![da11282bb8e727a5735364aa4faa0dc2.png][]

#### **文件查看 - 网格模式** ####

![68e8e4973db21bde2acb59f51baba71b.png][]

#### **文件查看 -  ****时间线模式** ####

![35efd3a47d5d70e5a2480a6f56212000.png][]

### **创建文件夹** ###

![d388e0b3c42a929bf2099fb5a6d4d654.png][]

### **文件图标大小调整** ###

![69b19058216a4b45546a580c59ccfabe.gif][]

### **文件移动** ###

![0a1b087b7765a4bc23a95b78e8e61010.png][]

### **文件在线解压缩** ###

![d115bc791edc1b0af9b7a96efa399480.png][]

**文件分片上传**

文件采用分片上传，集成了 simiple-uplader 的文件秒传、断点续传功能。

![b54d7eeb7bd852c053d6ab31c2fda769.png][]

#### **拖拽上传** ####

![ec7c833d9e346170079b666f7e8e0302.gif][]

**截图粘贴上传**

直接使用任何截图工具截图后，在拖拽区域使用 Ctrl + V 粘贴图片，点击上传图片即可上传。

![d09563647fe314bb20cee21123f16d31.png][]

### **文件回收站** ###

![7bcef6965b313f63228f6e225123f97f.png][]

### **文件单个和批量分享** ###

![ab5489f2f518fda5a3e43ab1baa2423c.png][]

可以选择过期时间和是否需要提取码：

![30ca392938f18b0792305a6044c46aae.png][]

提供快捷复制链接及提取码给他人：

![4864e0e76c758b07f80b4ecaec22bec9.png][]

粘贴分享链接及提取码效果类似于百度云：

分享链接：https://pan.qiwenshare.com/share/27d9b438019e4f68bcec02f579d163b7
    提取码：356978

他人查看分享内容，并支持保存到网盘功能：

![4f005b93e591b3217b8f968c31e443d5.png][]

**分享过的文件列表**

支持在列表中快捷复制当次的分享链接及提取码，并标注分享时间和过期状态：

![7a3fc71a2729d84af09dc8838319c74c.png][]

### **视频在线预览** ###

文件类型为视频时，点击即可打开预览窗口，展示播放列表，支持快进、后退、暂停、倍速播放、全屏播放、下载视频和折叠播放列表。

![856b20c592e1533e9b27c811f44a49f6.png][]

### **音频在线播放** ###

![3059d8772740395a6019abc0dc3d536e.png][]

***02.  *****如何安装**

--------------------

**环境准备**

源码的编译和运行需要依赖以下开发环境，下面所列的版本号仅供参考：

*  JDK   版本：8 +
 *  MySQL   版本：5+
 *  Node.js   版本：12.12.1
 *  Nginx   版本：1.17.3
 *  Git   版本：2.24.0

**代码下载**

分别下载前后台代码，开源地址可以关注微信公众号「逛逛GitHub」回复「0603」下载。

## **编译及运行** ##

进入后台代码根目录，点击 install.bat 会进行编译，编译完成之后会生成 release 发布包。

![797a2d88f7a395034c00f0ab75f5d754.png][]

该 release 包是独立的，你可以将它拷贝到任何具有 Java 环境的地方进行执行。

![409beca881a470a8643d339f49ddd76f.png][]

进入 bin 目录里，如下图：

![e8305d86bfcc5ea8b8c82d5db2010987.png][]

从上图可以看到出现了4个启动和停止脚本，作用如下：

*  linux 重启脚本：restart.sh
 *  linux 启动脚本：start.sh   
 *  linux 停止脚本：stop.sh   
 *  windows 启动脚本：winstart.bat

### **windows 环境启动及停止** ###

在 windows 环境下点击 winstart.bat 之后会出现 Spring Boot 的启动黑窗口，这个窗口不能关闭，关闭就意味着程序结束，当出现如下字样，说明后台已经启动成功。

![106f9a42dc3bba1cf030a8e50af967b2.png][]

### **Linux 环境启动及停止** ###

在 Linux 环境下，具体的操作这就不描述了可以查看：

https://www.qiwenshare.com/essay/detail/169

https://www.qiwenshare.com/topic/detail/6/1132

### **前台代码编译** ###

首先在前台代码目录下执行如下命令进行编译

npm install

### **前台开发环境运行** ###

此种方式适用于开发，执行命令

npm run serve

运行完成之后，界面上会显示出访问路径，通过浏览器访问即可

![c8f796d5b157da02a743f777b3e5bce1.png][]

### **前台生产环境运行** ###

执行 npm run build 部署: 打包后会生成文件夹 dist，将 dist 文件夹下的文件放置于 nginx/html 目录下，并配置 nginx/conf/nginx.conf，具体配置如下：

server {
            listen       80;
        server_name localhost; #将localhost修改为您证书绑定的域名，例如：www.example.com。
    
            location / {
                root   html;
                index  index.html index.htm;
          try_files  $uri $uri/ /index.html; #可以防止页面刷新404
            }
    
        location /api/{
          #proxy_set_hearder host $host;
          #proxy_set_header X-forwarded-for $proxy_add_x_forwarded_for;
          #proxy_set_header X-real-ip $remote_addr;
          
          # 配置此处用于获取客户端的真实IP
          proxy_set_header Host $http_host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
          proxy_pass  http://localhost:8080/;
        }
           
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }

## **浏览器访问** ##

出现如下界面，说明就已经大功告成

![f7cf2e2f707cd591218f38d806f35e2f.png][]

对了，如果你想使用 MySql 作为项目数据库，可将项目切换为生产环境配置，切换方法请参见：https://www.qiwenshare.com/essay/detail/1132

前端https://gitee.com/qiwen-cloud/qiwen-file-web

后台https://gitee.com/qiwen-cloud/qiwen-file

--------------------

**推荐阅读**

***1. ***[GitHub 上有什么好玩的项目？][GitHub]

***2. ***[这个牛逼哄哄的数据库开源了][Link 1]

***3.****** ***[SpringSecurity + JWT 实现单点登录][SpringSecurity _ JWT]

***4. ***[100 道 Linux 常见面试题][100 _ Linux]

![6d4df720b67007e1d38487120a2ba240.png][]

[24486d59b61ef1720bc00606560c21be.png]: /images/20210730/0510ed67ab474243826938a6ed596f7e.png
[2acc26549763a823eb50b1a2f401c73d.gif]: /images/20210730/6269ba11df23483bb79befe9ad6ef4c4.png
[e1fb914cf6603ea3db044fe80feb4415.gif]: /images/20210730/ef63e7ad7c2e4191853bebbccf055b09.png
[da11282bb8e727a5735364aa4faa0dc2.png]: /images/20210730/b7300b1d99e342609dc2d14a04edf734.png
[68e8e4973db21bde2acb59f51baba71b.png]: /images/20210730/6640cc2e2bee49b396e7bd498ccbdba6.png
[35efd3a47d5d70e5a2480a6f56212000.png]: /images/20210730/6393c3c98f40432491d14939eb005c63.png
[d388e0b3c42a929bf2099fb5a6d4d654.png]: /images/20210730/33911319c16f4fc99d0b6d4022440ed3.png
[69b19058216a4b45546a580c59ccfabe.gif]: /images/20210730/daf56b2f00c54f5a9fe40d9688315580.png
[0a1b087b7765a4bc23a95b78e8e61010.png]: /images/20210730/76252530793f4ef48156137265651f1c.png
[d115bc791edc1b0af9b7a96efa399480.png]: /images/20210730/0a53708374894284ba10274823bc7a24.png
[b54d7eeb7bd852c053d6ab31c2fda769.png]: /images/20210730/ca16e0f245354f8da1a2c747a524150e.png
[ec7c833d9e346170079b666f7e8e0302.gif]: /images/20210730/3af6bd63d96c4813a1c428332ed871bc.png
[d09563647fe314bb20cee21123f16d31.png]: /images/20210730/f848f0206be842b8881901bc44d33db2.png
[7bcef6965b313f63228f6e225123f97f.png]: /images/20210730/e1c5e91ea408462abaf13146a0327cbd.png
[ab5489f2f518fda5a3e43ab1baa2423c.png]: /images/20210730/0cd5b5c490d54102a0e35ba181a1d033.png
[30ca392938f18b0792305a6044c46aae.png]: /images/20210730/5a904810bf62457cb41bbd61cd2589bc.png
[4864e0e76c758b07f80b4ecaec22bec9.png]: /images/20210730/be20b7e9831341cfa090ed03032f5fcc.png
[4f005b93e591b3217b8f968c31e443d5.png]: /images/20210730/3295ac9dd6a8454fb9fd542f755f54a6.png
[7a3fc71a2729d84af09dc8838319c74c.png]: /images/20210730/dc620bed0cf240a8bcad391bdb946fb3.png
[856b20c592e1533e9b27c811f44a49f6.png]: /images/20210730/e480421912fb4dc48430048c50278535.png
[3059d8772740395a6019abc0dc3d536e.png]: /images/20210730/11ef0f28ce464d459ab25abad619181b.png
[797a2d88f7a395034c00f0ab75f5d754.png]: /images/20210730/c6148546c24d41999361d4b58ebc292e.png
[409beca881a470a8643d339f49ddd76f.png]: /images/20210730/5ec6ede2963b47b5a4f94c67b09549cb.png
[e8305d86bfcc5ea8b8c82d5db2010987.png]: /images/20210730/06ae93c4b25649f2a99319d3e9a4ad06.png
[106f9a42dc3bba1cf030a8e50af967b2.png]: /images/20210730/3237f35567a24448b2e8e405dac07e81.png
[c8f796d5b157da02a743f777b3e5bce1.png]: /images/20210730/5289d54b20a94470971e298b6cb335fd.png
[f7cf2e2f707cd591218f38d806f35e2f.png]: /images/20210730/44b22ae58d52495bb5f6488f4d1efc0a.png
[GitHub]: http://mp.weixin.qq.com/s?__biz=MzUxNjg4NDEzNA%3D%3D&chksm=f9a2286fced5a1794eb9a73d0be7c2e16eaceabf3a0420647c40cb4202bd116d9a15dd57c008&idx=1&mid=2247498662&scene=21&sn=0087c4f3b79ba3420e917e9b42d45eda#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=Mzg2MjEwMjI1Mg%3D%3D&chksm=ce0e35e4f979bcf2c7c985dbabfe32f2a5f563e191d12a64325355e1c586853a4ab682077137&idx=1&mid=2247516775&scene=21&sn=43b3c7460718c40539512f56e4dd87fb#wechat_redirect
[SpringSecurity _ JWT]: http://mp.weixin.qq.com/s?__biz=Mzg2MjEwMjI1Mg%3D%3D&chksm=ce0e35bdf979bcabbb75366e1bad32bdbf8f41d1dc80b8be6e39225bd708913ce2c93472f2fc&idx=1&mid=2247516734&scene=21&sn=966d166d3052f10b9310ff4014733669#wechat_redirect
[100 _ Linux]: http://mp.weixin.qq.com/s?__biz=Mzg2MjEwMjI1Mg%3D%3D&chksm=ce0e367bf979bf6dec769decc0194bb36de4caeae7947671aba1852fe6bac8e5dab7d20916a5&idx=1&mid=2247516664&scene=21&sn=0dae1a8cf99c4bde8fd8c9c197769009#wechat_redirect
[6d4df720b67007e1d38487120a2ba240.png]: /images/20210730/bf0e5ff6d651463c87b875f583ff9017.png