再见，百度云

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

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

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

01.  功能截图

页面布局

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

网盘主页

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

批量操作功能

文件查看 - 列表模式

文件查看 - 网格模式

文件查看 -  时间线模式

创建文件夹

文件图标大小调整

文件移动

文件在线解压缩

文件分片上传

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

拖拽上传

截图粘贴上传

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

文件回收站

文件单个和批量分享

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

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

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

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

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

分享过的文件列表

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

视频在线预览

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

音频在线播放

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

编译及运行

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

• linux 重启脚本：restart.sh

• linux 启动脚本：start.sh   

• linux 停止脚本：stop.sh   

• windows 启动脚本：winstart.bat   
  

windows 环境启动及停止

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

Linux 环境启动及停止

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

前台代码编译

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

npm install

前台开发环境运行

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

npm run serve

前台生产环境运行

执行 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;
        }
    }

浏览器访问

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

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