7.8k Star! 推薦一款分布式檔管理系統

2024-06-02碼農

一、計畫介紹

計畫是一款基於 Spring Boot 2 + VUE CLI@3（Vue2）框架開發的分布式檔管理系統，旨在為使用者和企業提供一個簡單、方便的檔儲存方案，能夠以完善的目錄結構體系，對檔進行管理。計畫使用前後台分離的模式進行開發和部署，對於開發者，前後台職責劃分的比較清晰，對於使用者，可以將前後台部署到不同的機器上。

二、系統架構

後端技術棧

平台框架：SpringBoot

Java持久層API :JPA

JSON網路令牌:JWT

資料庫:MySql

計畫管理框架: Maven 3.6

持久層框架:Mybatis

前端技術棧

Element UI

Vue CLI@3

Node.js

Webpack

開發環境

JDK:JDK 1.8

資料庫:Mysql8

Node.js:v12.13.1

Maven:最新版本

分布式架構

分布式的架構設計，可以為你的網盤開啟無限的擴充套件空間，網路拓撲圖如下：

三、功能概覽

基礎操作（√ 支持 ⚪ 不支持）

操作	檔	資料夾	單個	批次	備註
建立	√	√	√	⚪	建立 Word、Excel、PowerPoint 線上檔
刪除	√	√	√	√
上傳	√	√	√	√	拖拽上傳、貼上截圖上傳
重新命名	√	√	√	⚪
移動	√	√	√	√
復制	√	⚪	√	⚪
解壓縮	√	⚪	√	⚪	支持解壓縮 ZIP、RAR、7Z、TAR 格式的檔
預覽	√	⚪	√	⚪	支持圖片、視訊、音訊線上預覽支持 PDF、JSON、TXT、HTML 等常用文字檔案支持 Office 檔線上預覽
分享	√	√	√	√	支持有效期、提取碼
搜尋	√	√	⚪	⚪	支持 ElasticSearch 檔名稱模糊搜尋

特色功能

功能	描述
office 線上編輯	Word、Excel、PowerPoint 文件的線上建立、預覽、線上編輯功能 (opens new window)
markdown 線上編輯	支持 markdown 檔線上預覽、編輯、保存功能整合 mavon-editor (opens new window) ，已內建到前端工程中
程式碼線上編輯	支持 C、C++、C#、Java、JavaScript、HTML、CSS、Less、Sass、Stylus 等常用程式碼類檔的線上預覽、編輯、保存整合 vue-codemirror (opens new window) ，已內建到前端工程中，可參考 codemirror (opens new window) 官網說明添加更多語言
檔分類檢視	圖片、視訊、音樂、文件、其他，分類檢視更快捷
多種檢視模式	支持網格模式、列表模式、時間線模式網格模式下圖示支持手動控制顯示大小
資源回收桶	刪除檔自動移入資源回收桶，支持在資源回收桶中徹底刪除、還原檔
多種儲存方式	基於奇文社群自研框架 UFOP (opens new window) ，實作檔多樣化儲存。支持本地磁盤、阿裏雲 OSS 物件儲存、 FastDFS 儲存、 MinIO 儲存、七牛雲 KODO 物件儲存，點選檢視配置方式儲存方式配置
支持分片上傳	基於奇文社群自研框架 UFOP (opens new window) , 實作檔分片上傳。整合優秀開源計畫 vue-simple-uploader (opens new window)
支持極速秒傳	計算檔 MD5，實作極速秒傳效果，提高上傳效率
支持斷點續傳	同一個檔，當上傳過程中網路中斷，可以從斷點處繼續上傳
即時進度顯示	頁面即時顯示上傳檔進度、速度、結果等資訊
儲存容量顯示	可即時顯示檔儲存占用情況及總儲存容量

四、下載編譯

後台

git clone https://gitee.com/qiwen-cloud/qiwen-file.git

本計畫是本質上是一個maven工程，因此，在命令列執行普通的maven編譯命令即可編譯。編譯命令如下：

mvn install

因為依賴比較多，我一般使用阿裏的maven映像庫進行下載, 如果你也想透過該方式進行編譯，可直接雙擊根路徑下的 install.bat 指令碼。

前端

git clone https://gitee.com/qiwen-cloud/qiwen-file-web.git

# 進入計畫目錄

cd qiwen-file-web

# 安裝依賴

npm install

# 編譯

npm run build

五、開發環境執行

後台

將 qiwen-file 計畫載入到 Intellj IDEA 中, 開啟 FileApplication.java 類，執行其中的main 方法：

前端

修改根目錄下 vue.config.js 中 devServer.proxy.target 的埠修改為後台計畫的埠（例如前述的 8081 埠），然後啟動：

# 本地開發啟動計畫

npm run serve

警告

每次修改完 vue.config.js 中的配置項，都需要重新啟動計畫才會生效

啟動完成後會自動開啟瀏覽器存取 ‍ http://localhost:8081 (opens new window) ， ‍ 你看到下面的頁面就代表操作成功了。

六、產品頁面

1.1 網盤主頁

1.2 布局調整功能

左側選單欄可折疊，可控制當前表格中列的顯示和隱藏

1.3 檔圖示大小調整

在網格模式和時間線模式下，支持手動調整圖示大小：

2. 路徑導航

點選目錄跳轉到該資料夾內部，在麵包屑導航欄後面空白處點選，可以輸入路徑，快速到達指定路徑（此功能僅支持在我的檔 - 全部分類下使用）

3. 三種檢視模式

檔檢視支持三種展示模式：列表、網格和時間線模式

3.1 列表模式

3.2 網格模式

3.3 時間線模式

時間線模式目前僅在左側分類欄選擇圖片時才支持，我們會盡快支持其他型別的檔

4. 檔操作

檔操作結合了電腦客戶端的操作方式，支持任何檔右鍵喚起操作列表，或勾選檔並點選頂部相關批次操作按鈕。

4.1 新建資料夾

4.2 檔移動

支持檔單個和批次移動，選擇目錄後，點選確定即可移動檔到目標路徑，同時在彈框中提供新建資料夾功能。

4.3 檔線上解壓縮

支持 ZIP 和 RAR 格式的檔線上解壓縮，支持三種解壓方式：

解壓到當前資料夾
解壓到以當前壓縮檔命名的資料夾內
解壓到指定資料夾

4.4 檔搜尋

支持檔名搜尋檔，搜尋功能後台配置請檢視頂部導航欄 配置-後台計畫配置-檔搜尋配置

4.5 批次操作功能

在列表和網格模式下，提供了批次操作功能，可以對檔進行批次刪除、移動和下載。

5. 三種檔上傳方式

5.1 檔 & 資料夾分片上傳

支持檔和資料夾上傳。檔采用分片上傳，整合了 simiple-uplader 的檔秒傳、斷點續傳功能，此外掛程式的具體配置項可以檢視該計畫的官方文件。

5.2 拖拽上傳

支持全螢幕區域拖拽上傳檔。

5.3 截圖貼上上傳

直接使用任何剪取工具截圖後，在拖拽區域使用 Ctrl + V 貼上圖片，點選上傳圖片即可上傳。

6. 檔資源回收桶

提供檔資源回收桶功能，支持徹底刪除和還原檔。

7. 檔分享

7.1 單個或批次檔分享

支持單個和批次分享檔給他人：
可以選擇過期時間和是否需要提取碼：
提供快捷復制連結及提取碼給他人：
貼上分享連結及提取碼效果：
分享連結：http://localhost:8080/share/363196ac9fd94371b9f47cb24f042d9f
提取碼：967617
復制連結到瀏覽器中並輸入提取碼即可檢視檔
他人檢視分享內容，並支持保存到網盤功能：