智能协同云图库毕设部分展示

项目介绍

本项目旨在打造一个集用户管理、图库展示与空间管理于一体的智能协同云图库系统。通过前端与后端的紧密配合，实现高效、安全、易用的图库服务。

背景

现时代，我个人认为需要一款云图库去管理自己的照片，支持 jpg，png，jpeg，webp等格式的照片。那有人说，我有手机相册，我有微信 QQ，那不香嘛？

shut，我还说，学生、图书、宿舍都能有那么多的管理系统，我为什么不能有这个嘞？

那我问你，手机相册需不需要内存空间，微信，QQ 相册占不占内存空间，嗯？回答我！look in my eyes，tell me why？我们的这款智能云图库，不需要占用本地内存，直接上传云存储平台。那有人说，我有云空间啊，那好，我可以在图库中进行 编辑，上传，分享图片，支持 ai 扩图，支持颜色搜索，支持批量处理，支持以图搜图。还可以创建团队空间，一起上传编辑图库，管理空间，并对内存，容量进行数据分析，用图表的形式展现在你面前，这难道不香嘛~

技术选型

前端

• 框架：Vue 3，提供现代化的前端开发体验。
• 打包工具：Vite，快速构建与优化前端资源。
• UI组件库：Ant Design Vue，丰富且一致的UI组件，提升开发效率。
• 请求库：Axios，简化HTTP请求处理。
• 全局状态管理：Pinia，轻量级且高效的状态管理方案。
• 可视化组件：ECharts，强大的数据可视化能力。
• 裁切组件：Cropper，满足图片裁切需求。
• 实时通信：WebSocket，实现实时数据交互。

后端

• 框架：Spring Boot，简化企业级应用开发。
• 数据库：MySQL，关系型数据库，稳定可靠。
• ORM框架：MyBatis-Plus，增强MyBatis功能，提高开发效率。
• 插件：MyBatisX，辅助MyBatis开发。
• 分布式缓存：Redis，提升数据访问速度。
• 本地缓存：Caffeine，优化本地数据访问性能。
• 数据抓取：Jsoup，方便从网页抓取数据。
• 云存储：COS（腾讯云对象存储），安全、高效的云存储服务。
• 权限控制：Sa-Token，简洁易用的权限认证框架。
• 实时通信：WebSocket，双向通信，实时响应。
• 高性能队列：Disruptor，无锁队列，提升并发处理能力。
• 并发编程：JUC（Java Util Concurrent），支持并发和异步编程。
• AI绘图模型：接入AI绘图技术，丰富图库内容。

架构设计

本项目采用DDD（领域驱动设计）架构模式，结合多种设计模式（如门面模式、工厂模式、单例模式、策略模式、代理模式、观察者模式、责任链模式、模板模式等），实现模块化的功能划分和高效的代码组织，采用 rbac 权限控制思想更细粒度地进行权限控制

模块功能划分

本项目分为3个模块，分别是用户模块，图库模块和空间模块。

用户模块

对于用户模块，通常要具有以下功能：

• 用户注册：用户可以通过输入账号、密码、确认密码进行注册
• 用户登录：用户可以通过输入账号和密码登录
• 获取当前登录用户：得到当前已经登录的用户信息（不用重复登录）
• 用户注销：用户可以退出登录
• 用户权限控制：用户又分为普通用户和管理员，管理员拥有整个系统的最高权限，比如可以管理其他用户
• 仅管理员可用，可以对整个系统中的用户进行管理，比如搜索用户、删除用户

库表设计如下：

-- 用户表
create table if not exists user
(
	id bigint auto_increment comment 'id' primary key,
    userAccount varchar(256) not null comment '账号',
    userPassword varchar(512) not null comment '密码',
    userName varchar(256) null comment '用户昵称',
    userAvatar varchar(1024) null comment '用户头像',
    userProfile varchar(512) null comment '用户简介',
    userRole varchar(256) default 'user' not null comment '用户角色 user/admin',
    editTime datetime default CURRENT_TIMESTAMP not null comment '编辑时间',
    createTime datetime default CURRENT_TIMESTAMP not null comment '创建时间',
    updateTime datetime default CURRENT_TIMESTAMP not null on update CURRENT_TIMESTAMP comment '更新时间',
    isDelete tinyint default 0 not null comment '是否删除'
    UNIQUE KEY uk_userAccount (userAccount),
    INDEX idx_userName (userName)
) comment '用户' collate = utf8mb4_unicode_ci;

图片模块

在设计图库系统时，要有限确保用户能够查看图片功能的实现，而上传功能暂时仅限管理员使用，以保证系统的安全性和稳定性。
基于这一原则，将实现以下功能，并按优先级排列如下：

1. 管理员功能
   1. 图片上传与创建：仅管理员可用，支持选择本地图片上传，并填写相关信息，如名称、简介、标签、分类等。系统会自动解析图片的基础信息（如宽高和格式等），便于检索。
   2. 图片管理：管理员可以对图库内的图片资源进行管理，包括查询和删除
   3. 图片修改（编辑信息）：管理员可以对图片信息进行编辑，例如修改名称、简介、标签、分类等。
2. ​​​​用户功能
   1. 查看与搜索图片列表（主页）：用户在主页上可按关键词搜索图片，并支持按分类、标签等筛选条件分页查看图片列表。
   2. 查看图片详情（详情页）：用户点击列表中的图片后，可进入详情页，查看图片的大图及相关信息，如名称、简介、分类、标签、其他图片信息（如宽高和格式等）。
   3. 图片下载：用户在详情页可点击下载图片按钮，将图片保存至本地。

库表设计如下：

-- 图片表
create table if not exists picture
(
    id           bigint auto_increment comment 'id' primary key,
    url          varchar(512)                       not null comment '图片 url',
    name         varchar(128)                       not null comment '图片名称',
    introduction varchar(512)                       null comment '简介',
    category     varchar(64)                        null comment '分类',
    tags         varchar(512)                       null comment '标签（JSON数组）',
    picSize      bigint                             null comment '图片体积',
    picWidth     int                                null comment '图片宽度',
    picHeight    int                                null comment '图片高度',
    picScale     double                             null comment '图片宽高比例',
    picFormat    varchar(32)                        null comment '图片格式',

    userId       bigint                             not null comment '创建用户 id',
    createTime   dateTime default CURRENT_TIMESTAMP not null comment '创建时间',
    editTime     dateTime default CURRENT_TIMESTAMP not null comment '编辑时间',
    updateTime   dateTime default CURRENT_TIMESTAMP not null on update CURRENT_TIMESTAMP comment '更新时间',
    isDelete     tinyint  default 0                 not null comment '是否删除',

    INDEX idx_name (name),                -- 提升基于图片名称的查询性能
    INDEX idx_introduction (introduction),-- 用于模糊搜索图片简介
    INDEX idx_category (category),        -- 提升基于分类的查询性能
    INDEX idx_tags (tags),                -- 提升基于标签的查询性能
    INDEX idx_userId (userId)             -- 提升基于用户 ID 的查询性能
) comment '图片' collate = utf8mb4_unicode_ci;

空间模块

为了进一步增加系统的应用价值，可以让每个用户都创建自己的私有空间，打造自己的云图片云盘、个人相册。

对于空间模块，通常要有这些功能：

• 【管理员】管理空间：仅管理员可用，可以对整个系统中的空间进行管理，比如搜索空间、编辑空间、删除空间

• 用户创建私有空间：用户可以创建 最多一个 私有空间，并且在私有空间内自由上传和管理图片

• 私有空间权限控制：用户仅能访问和管理自己的私有空间和其中的图片，私有空间的图片不会展示在公共图库，也不需要管理员审核

• 空间级别和限额控制：每个空间有不同的级别（如普通版和专业版），对应了不同的容量和图片数量限制，如果超出限制则无法继续上传图片

库表设计如下：

-- 空间表
create table if not exists space
(
    id         bigint auto_increment comment 'id' primary key,
    spaceName  varchar(128)                       null comment '空间名称',
    spaceLevel int      default 0                 null comment '空间级别：0-普通版 1-专业版 2-旗舰版',
    maxSize    bigint   default 0                 null comment '空间图片的最大总容量',
    maxCount   bigint   default 0                 null comment '空间图片的最大数量',
    totalSize  bigint   default 0                 null comment '当前空间下的图片总容量',
    totalCount bigint   default 0                 null comment '当前空间下的图片总数量',
    userId     bigint                             not null comment '创建用户 id',
    createTime dateTime default CURRENT_TIMESTAMP not null comment '创建时间',
    editTime   dateTime default CURRENT_TIMESTAMP not null comment '编辑时间',
    updateTime dateTime default CURRENT_TIMESTAMP not null on update CURRENT_TIMESTAMP comment '更新时间',
    isDelete   tinyint  default 0                 not null comment '是否删除',

    -- 索引设计
    index idx_userId (userId),
    index idx_spaceName (spaceName),
    index idx_spaceLevel (spaceLevel)
) comment '空间' collate = utf8mb4_unicode_ci;

项目功能展示：

项目展示中，将以普通用户以及管理员视角分别进行功能展示。

普通用户：

1、用户登录及注册：

用户可以匿名访问该图库，但是查看不了图片详情，会跳转到登录页面

2、查看、上传、编辑、删除图片：

注册并登录后，头像是默认的，昵称也是默认的（后续功能扩展可以让用户自己上传头像以及编辑自己的信息），可以查看主页列表，以及点进图片详情页进行查看。并且左侧出现侧边栏，可以查看公共图库，以及创建并管理自己的空间，可以创建团队空间以及编辑自己的基本信息。

点进图片后，可以了解到这些图片的一个详情，例如简介，创建作者等等。如果非管理员或者非自己创建的图片，只能下载和分享该图片，下载在这里就不演示啦，毕竟就是下载图片嘛

然后，点击分享可以分享该图片，目前未上线，所以路径还是 localhost：

接下来，就演示一下如何上传自己的图片呢？当然支持拖拽式文件上传以及图片连接上传啦，这里演示图片链接上传。

首先，我们先去网上搜一张图片，然后粘贴图片链接，输入 url 上传即可。图片上传成功后，会显示这些图片的信息，可以修改编辑，以及进行 ai 扩图，最后选择标签分类进行提交就好了。大家看大 ai 扩图，是不是两眼放光？别急别急，后面会一一展示~

创建成功后，你就可以看到如下图展示的效果啦，此时，你会不会迫不及待想去主页一览无余呢？当然，别忘记了，我们普通用户上传的图片，是需要管理员审核的。此时在主页是看不到的

左边是管理员哟~此时可以看到，管理员需要通过该图片的审核，才会在大厅展示，右边的图是还没通过呢。通过的在下一张图。

此时，就可以在大厅上展示自己的作品啦。

好，那就来欣赏一下自己的作品叭~ 诶？发现有什么不对劲嘛？不错，图片详情多了编辑和删除！没错，管理员和自己创作的图片才有权限更改自己的图片。

最后最后，让我们来试试 AI 扩图叭~ emmm，等的时间有点久呢，因为是 AI 扩图嘛，还请理解一下，感觉怎么样！是不是很神奇！最后如果满意的话，保存结果就行啦~但是要注意，此时更新图片也是需要管理员审核的，因为还需注意用户做一些坏坏的事情！！！

你以为用户只有这些功能嘛？那就接着往下看叭~

3、空间创建，图片上传，以及管理：

如果用户没有自己的空间，可以创建自己的空间，空间创建完成后，我们就是这个空间的管理员了，可以自行上传图片，编辑和删除图片。

我们可以对图片进行增删改查，并且进行分享哟，支持按照日期和颜色搜索。接下来，跟你们介绍一个厉害的功能，接下来往下看！

当我们点击搜索之后，我们会用到这个以图搜图的功能，返回与原有图片类似的图片，怎么样，还不错叭

此外，作为自己空间的管理者，我们可以实时看到容量的多少，将空间内存和容量以图表的形式进行展示，更加可观。当然，这里简陋当然是因为现在空间内的图片数量比较少了。

4、团队的创建，图片上传，编辑以及管理：

当然，我们还可以创建属于自己的团队空间，让别人也可以看到自己的作品了。这里我就拿另外一个号来演示啦~

此时，我们的团队空间有三种身份，第一种是浏览者，第二种是编辑者，第三种是管理员，也就是创建团队空间的自己啦！

浏览者只能浏览图片，编辑者能增删改查图片，那么管理员呢，当然具备他们所有的权限，并且还具备他们不具有的权限，成员管理啦。

管理员可以通过用户 id 添加用户，可以管理成员的权限啦。既然团队空间，那如果成员多起来了，有好多个编辑者同时编辑，那怎么处理呢？别急，往下看

5、团队实时协同开发：

当你们同时进入编辑图片的时候，其他已经在这个页面中的人是能够实时感知到其他人的进入的。此时，就知道有多少人在看或者要修改这个图片了。那为什么叫要，而不是直接修改呢？因为呀，这个图片只能一个人修改，但是其他人可以实时看到，当一个人进入编辑状态的时候，其他所有人是不可进入编辑状态的，因为没这个按钮给你点，嘿嘿！

当我右边的用户（其实是我自己啦）开始编辑的时候，另外一个人能感知到别人正在编辑，并且做不了任何操作，除非等右边的用户退出编辑，或者关掉编辑框，其他的人才可进入。

神奇的是，当右边的用户（其实是我自己啦）执行右旋操作，左边的用户（其实还是我自己啦）能够立刻看到图片的变化以及操作的消息。

当右边的我退出编辑之后，左右两边的我能够看到消息的通知，此时左边的我就允许进入编辑了。

管理员：

1、用户管理功能：

好啦，终于到我（管理员）的主场了，那么第一个少不了的就是用户管理的功能啦。嗷，对了，需要通知的是，目前管理员只有一个哟，后面会再说！

首先管理员可以看到所有用户的信息，包括自己，可以直接给你号给删咯，那新来的两个没有头像也很正常叭，不必在意。因为他们没有上传头像，而现在让用户上传头像的功能还尚未完善，嘿嘿。

2、图片管理功能

管理员是有权决定别人图片的 “生死” 的，我想让你过你就过，我想让你不过，你就过不了，同样也可以对别人的图片动手动脚的。管理员上传的图片是自动过审的哟，身为管理员的我很是自豪！不过重点还不是这里，看到右上角了没，有两个小按钮，第一个就不多说啦，第二个是啥，批量？咋个批量法

我们可以输入想要的图片的关键词，比如说我想要高清美女头像，选择抓取几张，然后给图片名字一个前缀，然后就可以批量创建啦。

此时，我们就可以看到刚才批量创建的美女图片啦~

3、空间管理功能：

管理员可以看到别人创建的空间，这很正常叭，但是为了保证用户的“隐私”，所以即使是万能的管理员，也是不可以“偷看”别人私人空间中的图片的啦，千万别把照片误上传到团队空间里面去，否则就糗大了~，仔细的应该看到了，按理来说每个人只有有一个私人空间的，为什么无名有两个空间。那咋了，名字还能有重名的呢！“身份证”不一样就行了呗。嘿嘿，看到右上角的了没，可以分析所有用户空间的图片容量和公共图库中的图片内容。

以下是公共图库的分析，那有人问了，主播主播，你的存储空间，图片数量为什么无限制啊。那我问你，身为管理员，我可不可以管理空间的大小和图片的数量，管理员没了谁来管理，回答我！look in my eyes，tell me why！

那还是有人问了，主播主播，虽然其他的数据例如容量和数量都变了，为什么标签分析没变，别问了，问就是主播的爱好！

好啦，至此，部分毕设展示就到这里啦，咱下次再见！

==================================================================================================================================================

=========================================================================

骗你的，作为管理员，我可以管理自己的空间，我可以看空间分析的嘞，虽然不多，但也很少。

好啦，所有（部分）的功能就展示完啦，咱们下次再见！

扩展：

嘿嘿，其实还有，让你不看目录是吧，当然，这部分是我后续应该完成的事，需要对这个项目进行一个归纳总结：

首先已做的优化：

1. 采用 shareshpere 对空间进行动态的分库分表
2. 后端采用多级缓存（caffeine + redis），提升用户的体验。
3. 因内容太多，以免遮住最右边的操作功能，所以给侧边栏加了个隐藏 / 展示按钮。提升整体的布局美观
4. 实时协同编辑的时候，优化了两者编辑冲突的bug，在后端添加一个是否是该图片的编辑者的字段，返回给前端，交给前端做判断

待做的优化：

1. 我在侧边栏以及头像旁边加入了 基本信息 这个菜单选项，用于展示用户的个人信息的，包括头像的展示，编辑等等。用户可以在此界面上传更改自己的头像，可以编辑自己的信息，最重要的，可以看到用户的 id，因为在加入团队空间的时候，是需要用户 id 的，那用户自己都不知道 用户 id，岂不是炸纲了！！！第二个，算了，放下面说叭
2. 第二个，用户可以修改自己的密码
3. 第三个，emmm，暂时想不出来了，那就先这样叭。如果大家有更好的建议，也可以跟我说一下哈~

此项目只是部分功能展示，之后是肯定会对这些功能进行增加并进行优化的！！！

因扩展功能暂未实现，目前就不上线展示了！！！等后续扩展全部做完，再上线进行展示~

致谢：

首先第一个，肯定要感谢的是 鱼皮 啦，他不仅是个小坤子，也是个小黑子，咳咳，是一位宝藏博主啦！我的大体的项目是跟着他去做的，后面自己也做了一些其他的优化，以及自己以后需要优化的点。

第二个，是我一个好朋友，我们一起商量如何对项目进行一个优化，从往今来，给过我不少的帮助！

最后一个，其实是我自己，什么！我做这个项目也是不容易的好吧！只能说，咱三真厉害，嘿嘿结束！