代码拉取完成，页面将自动刷新
程序员日常就是写博客，在撰写博文时常常需要插入一些图片来丰富内容，为了更好地管理这些图片资源，我选择使用了图床系统，在众多的图床工具中，PicGo成为了我的首选，但由于它是一个基于electron-vue开发的桌面应用程序，为用户提供了便捷的图片上传和管理功能。然而每次当我更换电脑或重新安装操作系统时，都需要重新下载和配置PicGo，这无疑增加了我的工作负担。为了减少麻烦，故开发了这款轻快图片管理系统。
轻快图片管理系统顾名思义是一个做图片管理的系统，和现在市面上很火的Picgo类似，但是由于Picgo是本地版的，即需要自己安装桌面端应用后才能使用，每次换一台电脑都需要重新安装一次，然后再安装指定的图床插件并配置插件，十分麻烦。为了解决上面问题的问题，故诞生了这个轻快图片管理系统，这个是一个在线版的BS系统，只需要安装部署一次后就可以反复使用，只需要你使用浏览器访问安装部署地址即可，如果你不想安装部署也可以直接在演示环境上操作。
通过本系统，在安装部署完成后，同样需要安装指定的【图床插件】后才能创建存储桶，和picgo的差异在于，picgo安装图床插件后，每个插件只能配置一个存储桶，当想要配置多个时也无法实现，但在本系统上是可以同一个存储桶插件配置多个存储桶，然后将图片上传到指定的存储桶中，同时本系统也新增了相册管理功能，你可以将不同类别的图片进行分组管理。
在线演示(新版本)
地址：http://v2.picture.itchenliang.club/
账号：guest@163.com
密码：000000
仓库地址:
- Gitee: https://gitee.com/itchenliang/quickly-picture-bed
- Github: https://github.com/ischenliang/quickly-picture-bed
文档: https://ejq9qy8emd.feishu.cn/docx/Eo1HdFD7noXoSlxfRfWcYyzJnpf
在线演示(老版本)
地址：http://picture.itchenliang.club/
账号：guest@163.com
密码：000000
仓库地址:
- Gitee: https://gitee.com/itchenliang/quickly-picture-bed/tree/koa-controller
- Github: https://github.com/ischenliang/quickly-picture-bed/tree/koa-controller
文档: https://gitee.com/itchenliang/quickly-picture-bed/tree/koa-controller/doc
目前插件功能是采用拔插式的方式实现，完全脱离于本系统的，我们在新增插件时不会影响系统的使用，这种方式也方便了后续扩展新的插件。
此外本系统除了【上传插件】外，还额外新增了【主题插件】和【工具箱插件】:
目前内置的插件如下:
图片上传
图片管理
存储桶管理
相册管理
插件市场
为了解决老版本系统的图片上传跨域、无法进行主题切换等问题，本次则是直接重构了插件系统。
数据统计
知识库管理
操作日志
偏好设置
用户管理
插件管理
字典管理
系统设置
权限控制
代码仓库地址:
如果你觉得项目不错，还望动动你的手指给点点star，让更多人看到优秀的项目！！！
为了便于部署，这里提供了docker-compose一键部署前端和服务端的方式。
系统提供默认初始化数据库sql文件，进入到
server/sql目录下找到init.sql，在navicat或者其他工具中执行该sql文件。该sql文件中默认提供了一个管理员账号，方便用户初次使用时登录。
管理员账号: admin@163.com
管理员密码: 000000
修改
server/.env文件中的数据库配置
先将完整项目拷贝到服务器上，然后再命令行终端执行如下命令
docker compose up -d
部署完成后会出现如下结果:
然后就可以通过http://youip:port直接访问到系统了。
这里需要注意的是: 本地存储桶里的图片位于
server部署目录下的public目录下，若需要重新部署时还请提前将其文件拷贝备份。 并且这里的后端接口是采用的nginx的代理方式来配置，同时也使用了自定义网络的方式来实现直接通过容器名访问到部署的server应用。
除了使用上面的docker-compose一键部署方式，也可以一步一步的部署。
请确保严格按照下列的步骤执行，否则会出现问题，其原因在于
client和server应用都依赖了pic-net自定义网络，并且client应用中的nginx.conf配置文件中也配置了接口代理，其代理方式是采用容器名来访问。
为了能够便于快捷访问到接口地址，需要使用自定义网络的方式来访问server应用
docker network create pic-net
构建server镜像并创建picServerV2容器
# 进入到server目录
cd server
# 构建镜像
docker build -t pic-server .
# 启动并创建容器
docker run -d --name picServerV2 -p 4000:4000 --network pic-net pic-server
http://youip:4000访问，如果出现如下输出结果表示server部署成功
构建client镜像并创建picClientV2容器
client/public/global.config.js中的window.uploader_ip = ''为空client单页面应用
cd client
npm install
npm run build
# 进入到client目录
cd client
# 构建镜像
docker build -t pic-client .
# 启动并创建容器
docker run -d --name picClientV2 -p 80:80 --network pic-net pic-client
http://youip:80访问，如果出现如下输出结果表示client部署成功
为了便于部署，本系统将构建的itchenliang/pic-server-v2和itchenliang/pic-client-v2镜像推送到了DockerHub，可以直接拉取远程镜像来部署。
为了能够便于快捷访问到接口地址，需要使用自定义网络的方式来访问server应用
docker network create pic-net
.env文件来配置数据库
# mysql用户名，默认是root
DB_USERNAME=xxx
# mysql密码
DB_PASSWORD=xxx
# 数据库ip，不要使用localhost和127.0.0.1
DB_HOST=xxx.xxx.xxx.xxx
# 数据库端口，默认3306
DB_PORT=3306
# 数据库
DB_DATABASE=xxx
# 程序占用端口
APP_PORT=4000
# npm镜像源仓库，末尾不要加斜杆/，常见的是npm官方镜像源，淘宝镜像源
# unpkg: https://unpkg.com/@itchenliang/picture-rollup-mdnice-plugin@1.0.2/dist/index.umd.js
# 淘宝: https://registry.npmmirror.com/@itchenliang/picture-rollup-oss-plugin/1.0.12/files/dist/index.js
NPM_REGISTRY=https://registry.npmmirror.com
docker run -d --name picServerV2 -p 4000:4000 --env-file .env --network pic-net itchenliang/pic-server-v2
--env-file是指定环境变量文件，而且.env文件实则是在当目录下的.env文件，等同于./.env。
确保上面命令中的
picServerV2名称，因为client会通过该名称来访问后台接口。
执行如下构建命令
docker run -d --name picClientV2 -p 80:80 --network pic-net itchenliang/pic-client-v2
前往node官网下载
node.exe并安装或者使用nrm进行安装。 请确保安装的node版本为: 18.16.0
前往Git官网下载
git并安装，此步可忽略。
使用
git clone命令将代码克隆到本地，或者直接下载压缩包到本地并解压。
系统提供默认初始化数据库sql文件，进入到
server/sql目录下找到init.sql，在navicat或者其他工具中执行该sql文件。该sql文件中默认提供了一个管理员账号，方便用户初次使用时登录。
管理员账号: admin@163.com
管理员密码: 000000
修改
server/.env文件，将数据库连接服务修改成自己的数据库ip、用户名、密码等。 如果是本地调试则只需要修改.env.dev文件。
# mysql用户名，默认是root
DB_USERNAME=xxx
# mysql密码
DB_PASSWORD=xxx
# 数据库ip，不要使用localhost和127.0.0.1
DB_HOST=xxx.xxx.xxx.xxx
# 数据库端口，默认3306
DB_PORT=3306
# 数据库
DB_DATABASE=xxx
# 程序占用端口
APP_PORT=4000
# npm镜像源仓库，末尾不要加斜杆/，常见的是npm官方镜像源，淘宝镜像源
# unpkg: https://unpkg.com/@itchenliang/picture-rollup-mdnice-plugin@1.0.2/dist/index.umd.js
# 淘宝: https://registry.npmmirror.com/@itchenliang/picture-rollup-oss-plugin/1.0.12/files/dist/index.js
NPM_REGISTRY=https://registry.npmmirror.com
# 前端依赖安装
cd client
npm install
# 服务端依赖安装
cd server
npm install
cd server
npm run dev
在运行前端代码前还需要做一步操作，打开
client/public/global.config.js文件，修改window.uploader_ip，将下面的http://locahost:3002改成你本地启动的server的ip和端口(如果是部署上线时需进行此步，本地调试可跳过)。
window.uploader_ip = 'http://localhost:3002'
# 前端项目启动
cd client
npm run dev
控制台出现如下如所示即代表启动成功
我们服务端采用的是nestjs + typescript开发的，需要打包成js文件
# 服务端构建
cd server
npm run build
# 将server/dist目录下的所有文件拷贝服务器上，然后执行启动命令
node main.js
我们前端采用的是vite + vue3 + typescript开发单页面应用，需要打包，并将打包后的dist结果目录下的所有文件拷贝到web服务器上。
# 前端构建
cd client
npm run build
dist目录下的所有内容拷贝到web服务器上。接口文档：接口文档是采用swagger自动生成的，目前是通过后端访问http://ip:端口/swagger访问，其效果如下:
后期待开发的功能列表/优化部分展示
Email: itchenliang@163.com
如果您认可我的作品，并且觉得对你有所帮助我愿意接受来自各方面的捐赠。
| 支付宝 | 微信 |
|
|
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。