輕快圖片管理系統:基於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 -g4. 克隆代碼
使用git clone命令將代碼克隆到本地，或者直接下載壓縮包到本地並解壓
5. 依賴安裝
# 前端依賴安裝
cd client
npm install
# 服務端依賴安裝
cd server
npm install6. 項目啓動
# 前端項目啓動
cd client
npm run dev
# 服務端啓動
cd server
npm run start控制枱出現如下如所示即代表啓動成功
7. 項目打包部署
koa項目可以不用打包部署，直接將server目錄下的內容所有內容拷貝到服務器上然後執行上述的安裝步驟。
# 前端項目打包部署
cd client
npm run build將打包後生成的dist目錄下的所有內容拷貝到web服務器上。
預覽
登錄
註冊
忘記密碼
上傳區
圖片管理
存儲桶管理
相冊管理
操作日誌
個人中心
