線上圖床管理系統基于Vue3+ts+koa2

前言：市面上較流行的桌面應用程式圖床是

PicGo

，使用

electron-vue

開發，需要下載下傳安裝并配置圖床，略微麻煩。故而開發了線上的輕快圖檔管理系統，基于

vue3.x + typeScript + Vite + Koa2 + Mysql

開發的前後端分離圖床系統，使用該系統可以不需要每次都配置圖床。

使用技術：

前端: Vue3.x + Vite3.x + typeScript + Element-plus,

後端: Koa2 + typeScript + Mysql

鑒權：Jwt + koa-ts-controllers ，主要是登入驗證和權限校驗。

線上示範

• 系統位址：http://picture.itchenliang.club/#/
• 系統登入賬号：[email protected]
• 系統登入密碼：000000
• 項目源碼位址
  • Gitee：https://gitee.com/itchenliang/quickly-picture-bed
  • Github：https://github.com/ischenliang/quickly-picture-bed

上傳首頁示範

系統環境

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

下載下傳安裝教程

安裝node

前往node官網下載下傳

node.exe

并安裝或者使用

nrm

進行安裝管理。

安裝git

前往Git官網下載下傳git并安裝，此步可忽略。

安裝

typescript

、

nodemon

、

ts-node

使用下面的指令全局安裝typescript

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

克隆代碼

使用

git clone

指令将代碼克隆到本地，或者直接下載下傳壓縮包到本地并解壓

依賴安裝

# 前端依賴安裝
cd client
npm install
           

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

項目啟動

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

# 服務端啟動
cd server
npm run start
           

項目打包部署

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

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

将打包後生成的dist目錄下的所有内容拷貝到web伺服器上。

部分功能示範

上傳區

圖檔管理

存儲桶管理

存儲桶源管理

相冊管理

使用習慣配置、使用分析

資料統計