同步操作将从 itchenliang/quickly-picture-bed 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
程序员日常就是写博客,当然写博客时就会涉及到在博文中插入图片,所以往往会使用图床来进行图片资源管理,市面上较流行的图床系统是PicGo
,是使用electron-vue
开发的桌面应用程序,每次换电脑或者重装系统后都需要重新下载安装并配置图床,比较麻烦。所以开发了这款轻快图片管理系统,是基于vue3.x + typescript + vite + koa + mysql开发的前后端分离图床系统,使用该系统可以不需要每次都配置图床。
前端使用 Vue3.x + Vite3.x + typescript + Element-plus, 后端使用 Koa2 + typescript + mysql 进行开发,使用 Jwt + koa-ts-controllers 做登录验证和权限校验。
图片上传
支持图片多图上传、拖拽上传、粘贴上传、一键复制多种格式的图片外链。
图片管理
多上传的图片进行管理,支持文件重命名、移入指定相册、删除图片、预览图片等。
存储桶管理
支持多桶储存,可同时添加多个对象存储桶管理,上不封顶,例如:七牛云对象存储、阿里云对象存储、腾讯云对象存储等等,系统会统计出每个存储桶下的图片数量以及已使用存储量。同时也支持控制存储桶是否显示在上传区。
相册管理
支持相册管理,可以对图片进行分组分类管理,便于用户将不同的图片进行分类挂办理,同时也支持直接将图片上传到相册中。
操作日志管理
完整的可视化日志功能,记录用户所有操作,方便事件溯源。普通用户只能查看自己的操作记录,管理员则能查看所有人员的操作记录,于此同时数据统计中的贡献图的数据来源也是从操作记录中提取。
个人信息维护
用户可以对自己的信息管理,如头像(系统内置4组不同维度的头像供选择)、昵称、职业、性别、个人简介以及个人登录密码进行维护管理。
数据统计
系统提供了数据统计功能,统计用户的图片数量、存储桶数量、总占用存储量、相册数量以及系统贡献度数据进行统计。
使用习惯配置
考虑到每个用户的使用习惯不同,系统提供了使用习惯配置中心,可以对默认复制的图片链接格式、自定义链接格式、常用快捷键配置以及是否开启上传成功提示、复制链接成功提示等配置。
用户管理
多用户管理,根据不同的角色可以管理不同的数据,同时用户可以通过自主注册或者管理员在管理页面直接创建。
存储桶插件管理
存储桶管理,是由管理员进行在线开发的插件,用于管理员对存储桶插件的相关配置,需要做什么前置处理或者后置处理等进行管理,例如七牛云对象存储,需要用户在界面上感知出需要填写哪些数据、哪些数据时必填项、有哪些数据的智能提示,需要前置操作则是获取上传认证,其实就是对存储桶拥有哪些元数据进行配置,于此同时还提供了是否启用或者禁用的功能,比如某一个对象存储已经从市面上out,则管理员可以进行禁用操作,这样用户就不能创建该类型的存储桶。
字典管理
对系统中经常使用的一些较为固定的数据进行维护,例如个人中心的职业、用户性别、存储桶页面不同的存储桶类别展示不同的图标等数据维护。
系统设置
对系统中一些常用的数据进行维护,包括系统名称、系统logo、备案信息、更新日志、系统上所使用的的图标的来源进行配置。
权限控制
完整的权限控制功能,不同的角色可分配不同的操作权限,控制对应的删除及查看。
在线演示
地址:http://picture.itchenliang.club/#/
账号:guest@163.com
密码:000000
后期待开发的功能列表/优化部分展示
Ctrl + Shift + P
,需要自动进入到个人中心页面。typora
,然后直接在typora
整合picgo
实现图片上传功能,所以其实大多数都不会单独上传图片,故本系统需增加一项文档管理
功能,可以对文章进行管理。大致界面设计如下:
主要包括的功能项:
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. 执行sql文件
系统提供默认初始化数据库sql
文件,打开并复制sql/picture-bed-backup.sql
,在navicat
或者其他工具中执行该sql文件。该sql文件中默认提供了一个管理员账号,方便用户初次使用时登录
管理员账号: admin@163.com
管理员密码: 000000
6. 修改数据库连接
打开server/src/global.config.ts
文件,将数据库连接服务修改成自己的数据库ip、用户名、密码等
/**
* mysql数据库配置
*/
export const databaseConfig = {
host: 'localhost', // 数据库ip,默认是localhost
port: 3306, // 数据库端口,默认3306
database: 'picture-bed-backup', // 数据库
username: 'root', // mysql用户名,默认是root
password: 'xxxx' // mysql密码
}
7. 依赖安装
# 前端依赖安装
cd client
npm install
# 服务端依赖安装
cd server
npm install
8. 项目启动
首先将后端服务启动
# 服务端启动
cd server
npm run start
在运行前端代码前还需要做一步操作,打开client/public/global.config.js
文件,修改window.uploader_ip
,将下面的locahost:3002
改成你本地启动的server
的ip和端口(如果是部署上线时需进行此步,本地调试可跳过)。
window.uploader_ip = 'localhost:3002'
然后执行下面命令运行前端代码
# 前端项目启动
cd client
npm run dev
控制台出现如下如所示即代表启动成功
9. 配置邮箱服务和ip定位服务
使用系统提供的默认管理员账号admin@163.com
登录系统,点击左侧菜单栏上的系统配置
菜单,进入系统配置页面,然后点击顶部的系统配置
tab栏,找到ip定位服务配置
以及邮件服务配置
填写相关数据即可。
注意:
ip定位服务
qq邮件服务
,故需要配置qq邮件服务
的相关数据
QQ邮箱
,点击设置 -> 账号
,找到POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务
在POP3/SMTP服务
一栏,必须是上图所示的,已开启状态,开启后会拿到对应的授权码,将授权码填写到邮件服务配置
一栏中的邮件授权码
输入框中,并且填写发件人邮箱地址(即您启用授权码的qq邮箱)
9. 项目打包部署
koa项目可以不用打包部署,直接将server
目录下的内容所有内容拷贝到服务器上然后执行上述的安装步骤。
# 前端项目打包部署
cd client
npm run build
将打包后生成的dist
目录下的所有内容拷贝到web服务器上。
为了方便拓展,存储桶以插件的形式开发,由管理员直接在系统上进行在线开发,并且支持插件版本管理(版本回退、版本对比)。
存储桶插件列表
存储桶插件开发
存储桶插件开发预览
存储桶插件版本管理
存储桶插件版本对比
Email: itchenliang@163.com
如果您认可我的作品,并且觉得对你有所帮助我愿意接受来自各方面的捐赠。
支付宝 | 微信 |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。