动态

详情 返回 返回

【輕快圖片管理系統】- 開源圖牀系統 - 动态 详情

輕快圖片管理系統:基於Koa2 + Vue3.x + Vite3.x + typescript開發的輕量級快捷圖片管理系統、圖牀系統

簡介

程序員日常就是寫博客，當然寫博客時就會涉及到在博文中插入圖片，所以往往會使用圖牀來進行圖片資源管理，市面上較流行的圖牀是PicGo，是使用electron-vue開發的桌面應用程序，所以每次需要下載安裝並配置圖牀，比較麻煩。所以開發了這款輕快圖片管理系統，是基於vue3.x + typescript + vite + koa + mysql開發的前後端分離圖牀系統，使用該系統可以不需要每次都配置圖牀。
前端使用 Vue3.x + Vite3.x + typescript + Element-plus, 後端使用 Koa2 + typescript + mysql 進行開發，使用 Jwt + koa-ts-controllers 做登錄驗證和權限校驗。

內置功能

圖片上傳<br/>
支持圖片多圖上傳、拖拽上傳、粘貼上傳、一鍵複製多種格式的圖片外鏈。

圖片管理<br/>
多上傳的圖片進行管理，支持文件重命名、移入指定相冊、刪除圖片、預覽圖片等。

存儲桶管理<br/>
支持多桶儲存，可同時添加多個對象存儲桶管理，上不封頂，例如：七牛雲對象存儲、阿里雲對象存儲、騰訊雲對象存儲等等，系統會統計出每個存儲桶下的圖片數量以及已使用存儲量。同時也支持控制存儲桶是否顯示在上傳區。

相冊管理<br/>
支持相冊管理，可以對圖片進行分組分類管理，便於用户將不同的圖片進行分類掛辦理，同時也支持直接將圖片上傳到相冊中。

操作日誌管理<br/>
完整的可視化日誌功能，記錄用户所有操作，方便事件溯源。普通用户只能查看自己的操作記錄，管理員則能查看所有人員的操作記錄，於此同時數據統計中的貢獻圖的數據來源也是從操作記錄中提取。

個人信息維護<br/>
用户可以對自己的信息管理，如頭像(系統內置4組不同維度的頭像供選擇)、暱稱、職業、性別、個人簡介以及個人登錄密碼進行維護管理。

數據統計<br/>
系統提供了數據統計功能，統計用户的圖片數量、存儲桶數量、總佔用存儲量、相冊數量以及系統貢獻度數據進行統計。

使用習慣配置<br/>
考慮到每個用户的使用習慣不同，系統提供了使用習慣配置中心，可以對默認複製的圖片鏈接格式、自定義鏈接格式、常用快捷鍵配置以及是否開啓上傳成功提示、複製鏈接成功提示等配置。

用户管理<br/>
多用户管理，根據不同的角色可以管理不同的數據，同時用户可以通過自主註冊或者管理員在管理頁面直接創建。

存儲桶源管理<br/>
存儲桶管理是用於管理員對存儲桶源的相關配置進行管理，例如七牛雲對象存儲，需要用户在界面上感知出需要填寫哪些數據、哪些數據時必填項、有哪些數據的智能提示，其實就是對存儲桶擁有哪些元數據進行配置，於此同時還提供了是否啓用或者禁用的功能，比如某一個對象存儲已經從市面上out，則管理員可以進行禁用操作，這樣用户就不能創建該類型的存儲桶。

字典管理<br/>
對系統中經常使用的一些較為固定的數據進行維護，例如個人中心的職業、用户性別、存儲桶頁面不同的存儲桶展示不同的圖標等數據維護。

系統設置<br/>
對系統中一些常用的數據進行維護，包括系統名稱、系統logo、備案信息、更新日誌、系統上所使用的的圖標的來源進行配置。

權限控制<br/>
完整的權限控制功能，不同的角色可分配不同的操作權限，控制對應的刪除及查看。

在線體驗

在線演示
地址：http://picture.itchenliang.club/#/<br/>
賬號：guest@163.com<br/>
密碼：000000

環境

  • Node版本 >= 14.17.6
  • Mysql版本 >= 5.7
  • typescript版本 >= 4.8.4

安裝

安裝步驟

1. 安裝node
前往node官網下載node.exe並安裝或者使用nrm進行安裝。

2. 安裝git
前往Git官網下載git並安裝，此步可忽略。

3. 安裝typescript、nodemon、ts-node
使用下面的命令全局安裝typescript

npm install typescript -g
npm install nodemon -g
npm install ts-node -g

4. 克隆代碼
使用git clone命令將代碼克隆到本地，或者直接下載壓縮包到本地並解壓

5. 依賴安裝

# 前端依賴安裝
cd client
npm install

# 服務端依賴安裝
cd server
npm install

6. 項目啓動

# 前端項目啓動
cd client
npm run dev

# 服務端啓動
cd server
npm run start

控制枱出現如下如所示即代表啓動成功
202211101711526.png<br/>
202211101712519.png

7. 項目打包部署
koa項目可以不用打包部署，直接將server目錄下的內容所有內容拷貝到服務器上然後執行上述的安裝步驟。

# 前端項目打包部署
cd client
npm run build

將打包後生成的dist目錄下的所有內容拷貝到web服務器上。

預覽

登錄

202211101727165.png

註冊

2022111017274810.png

忘記密碼

202211101728063.png

上傳區

202211101718307.png

圖片管理

202211101719274.png

存儲桶管理

202211101719413.png

相冊管理

202211101720094.png

操作日誌

202211101720309.png

個人中心

202211101721163.png
202211101721385.png

使用習慣配置

202211101723388.png

數據統計

202211101724094.png

用户管理

202211101724463.png

存儲桶源管理

202211101725136.png

字典管理

202211101725334.png

系統設置

2022111017260710.png

更新日誌

202211101726356.png

koa2 , vue3 , 開源 , 前端 , typescript
点赞

Add a new 评论

Some HTML is okay.