文件管理系统（仿百度网盘）

演示网站

网站地址 介绍说明

介绍

基于springboot + vue 框架开发的Web文件系统，旨在为用户提供一个简单、方便的文件存储方案，目前已经完成了主要的基础功能，能够以完善的目录结构体系，对文件进行管理 。

您可以在其基础上继续进行开发来完善其功能，成为本项目的贡献者之一

您也可以以该项目作为脚手架，进行其他项目的开发

功能

用户操作

1. 用户的登录和注册

文件操作

1. 用户可对目录结构进行增加，删除，修改
2. 提供文件的上传，下载，部分文件可在线预览
3. 支持对zip文件的在线解压缩
4. 支持文件和目录的移动和复制
5. 多文件格式分类查看
6. 图片预览支持放大、缩小、旋转，提供列表视图、网格视图、时间线视图三种查看模式
7. ...

软件架构

该项目采用前后端分离的方式进行开发和部署,主要用到以下关键技术

前台：elementui，vue, swipper， nodejs， webpack

后台框架：springboot mybatis jpa

数据结构：递归算法，树的遍历和插入...

安装教程

1. 拉取代码: git clone https://gitee.com/qiwen-cloud/qiwen-file-web.git 或下载 zip 包，master 分支现在功能可用（lombok-web 分支现为开发阶段，尚不可用）
2. 依赖安装：npm install
3. 运行: npm run serve 浏览器中输入localhost: 8080(端口若已被占用，自动加1，即8081)即可看到界面了
4. 打包: 打开 /public/config.json，修改 baseUrl 为后台服务器的IP+端口，保存，执行 npm run build
5. 部署: 打包后会生成文件夹 dist，将 dist 文件夹下的文件放置于 nginx/html 目录下，并配置 nginx/conf/nginx.conf，具体配置如下（不明白的小伙伴可以加入 奇文社区QQ群：586207287 共同探讨）：

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

6. 文件默认保存位置：如果你是用IDEA启动的，默认保存位置在 target 下的 upload；如果是打包成jar部署在服务器，默认保存位置在根目录的release/static/upload 下

使用说明

本项目仅为前端代码，运行时需要启动后台程序 后台可以访问该地址进行拉取,后端代码源码：源码

部分功能演示截图

主页

创建文件夹 操作列展示

文件的复制和移动 文件在线解压缩 图片提供多种查看模式，列表、网格、时间线试图。可在线预览、保存、旋转、放大、缩小

联系我

各种问题可扫描加入QQ群进行咨询

QQ交流群请扫描下面二维码

微信公众号请扫描下面二维码

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

码云特技

1. 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
2. 码云官方博客 blog.gitee.com
3. 你可以 https://gitee.com/explore 这个地址来了解码云上的优秀开源项目
4. GVP 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5. 码云官方提供的使用手册 https://gitee.com/help
6. 码云封面人物是一档用来展示码云会员风采的栏目 https://gitee.com/gitee-stars/