一、项目介绍 - 鱼图图

基于 Vue 3 + Spring Boot + COS + WebSocket 的 企业级智能协同云图库平台。

平台的核心功能可分为 4 大类：4wYcIrFsGRfsAG69iwgDTRz7WD7yXp2uhr9plK6qQJI=

1）所有用户都可以在平台公开上传和检索图片素材，快速找到需要的图片。可用作表情包网站、设计素材网站、壁纸网站等：

2）管理员可以上传、审核和管理图片，并对系统内的图片进行分析：ud2lbaaQgA7asbuFx2zyocayHo3nTFq9mWD3LwoaYCg=

3）对于个人用户，可将图片上传至私有空间进行批量管理、检索、编辑和分析，用作个人网盘、个人相册、作品集等：

4）对于企业，可开通团队空间并邀请成员，共享图片并实时协同编辑图片，提高团队协作效率。可用于提供商业服务，如企业活动相册、企业内部素材库等：

该项目功能丰富，涉及文件存管、内容检索、权限控制、实时协同等企业主流业务场景，并运用多种编程思想、架构设计方法和优化策略来保证项目的高速迭代和稳定运行。hh8kZr5oIIWSNoQ431Z2is4P7tu+SuQnXPZz37lHT1E=

有业务、有技术，从 0 到 1 的真实企业级（商业级）项目设计开发，绝对让你收获满满！

项目三大阶段

为了帮大家循序渐进地学习，鱼皮将项目设计为三个阶段，可以根据自己的时间和水平按需学习。HjpOe/rdEcCehdPVL1u7j0N2XeKJoa/vakFU+1wtsMo=

1）第一阶段，开发公共的图库平台。实战 Vue 3 + Spring Boot 图片素材网站的快速开发，学习文件存管业务的开发和优化技巧。

成果：可用作表情包网站、设计素材网站、壁纸网站等

2）第二阶段，对项目 C 端功能进行大量扩展。用户可开通私有空间，并对空间图片进行多维检索、扫码分享、批量管理、快速编辑、用量分析。该阶段涉及大量主流业务功能开发，能学到很多业务知识和开发经验。

成果：可用作个人网盘、个人相册、作品集等

3）第三阶段，对项目 B 端功能进行大量扩展。企业可开通团队空间，邀请和管理空间成员，团队内共享图片并实时协同编辑图片。该阶段涉及大量商业项目的应用场景，能学到很多架构设计和项目优化的技巧。

成果：可用于提供商业服务，如企业活动相册、企业内部素材库等

二、项目优势

项目收获

本项目选题新颖、功能丰富、业务真实、应用广泛。区别于增删改查的 “烂大街” 项目，鱼皮会带你实战大量新技术和商业应用场景，掌握层层递进的系统设计、项目扩展和优化方案，给你的简历大幅增加竞争力。Ny8IKBIOsoTTCgTymQbjLul9Gmod0P0TJLzDMNBV70g=

鱼皮给大家讲的都是 通用的项目开发方法和架构设计套路，从这个项目中你可以学到：

• 如何拆解复杂业务，从 0 开始设计实现企业级系统？
• 如何巧用 RBAC 权限模型和框架实现复杂权限控制？
• 如何结合 Redis + Caffeine 构建高性能多级缓存？
• 如何实现文件的高效存储，并通过十几种策略进行优化？
• 如何使用高级数据结构 Disruptor 无锁队列提升并发性能？
• 如何使用 ShardingSphere 实现动态扩容的分库分表？
• 如何使用 WebSocket 多端通信，实现企业级实时协作功能？
• 如何接入 AI 绘图大模型，实现更多高级图片处理能力？
• 如何使用 DDD 架构实现大型企业级项目？
• 如何快速部署上线项目？

此外，还能学会很多作图、思考问题、对比方案的方法，提升排查问题、自主解决 Bug 的能力。鱼皮还给大家提供了大量的项目扩展点，有能力的同学可以进一步拉开和别人的区分度，无限进步！HjpOe/rdEcCehdPVL1u7j0N2XeKJoa/vakFU+1wtsMo=

鱼皮系列项目优势

鱼皮原创项目系列以 实战 为主，用 全程直播 的方式，从 0 到 1+4c8/N1p1ks+s/Pymte9p3eVkNVOHiOfNo0FGyT9zow= 带大家学习技术知识，并立即实践运用到项目中，做到学以致用。

此外，还提供如下服务：ud2lbaaQgA7asbuFx2zyocayHo3nTFq9mWD3LwoaYCg=

• 详细的文字教程或直播笔记
• 完整的项目源码
• 1 对 1 答疑解惑
• 专属项目交流群
• ⭐️ 现成的简历写法（直接写满简历）
• ⭐️ 项目的扩展思路（拉开和其他人的差距）
• ⭐️ 项目相关面试题、题解和真实面经（提前准备，面试不懵逼）
• ⭐️ 前端 + Java 后端万用项目模板（快速创建项目）

比起看网上的教程学习，鱼皮项目系列的优势：从学知识 => 实践项目 => 复习笔记 => 项目答疑 => 简历写法 => 面试题解的一条龙服务

从需求分析、技术选型、项目设计、项目初始化、Demo 编写、前后端开发实现、项目优化、部署上线等，每个环节我都 从理论到实践 给大家讲的明明白白、每个细节都不放过！Ny8IKBIOsoTTCgTymQbjLul9Gmod0P0TJLzDMNBV70g=

HjpOe/rdEcCehdPVL1u7j0N2XeKJoa/vakFU+1wtsMo=ud2lbaaQgA7asbuFx2zyocayHo3nTFq9mWD3LwoaYCg=+4c8/N1p1ks+s/Pymte9p3eVkNVOHiOfNo0FGyT9zow=hh8kZr5oIIWSNoQ431Z2is4P7tu+SuQnXPZz37lHT1E=+4c8/N1p1ks+s/Pymte9p3eVkNVOHiOfNo0FGyT9zow=8fu8cDJmfdpbl/kjna5xbFRq8brk2wHoCLXGDPF6jqA=HjpOe/rdEcCehdPVL1u7j0N2XeKJoa/vakFU+1wtsMo=ud2lbaaQgA7asbuFx2zyocayHo3nTFq9mWD3LwoaYCg=sETFLiz5z9hWsGMqkEZF5CeQ5DuZsw1zk9awkuImoc0=sETFLiz5z9hWsGMqkEZF5CeQ5DuZsw1zk9awkuImoc0=hh8kZr5oIIWSNoQ431Z2is4P7tu+SuQnXPZz37lHT1E=4wYcIrFsGRfsAG69iwgDTRz7WD7yXp2uhr9plK6qQJI=8fu8cDJmfdpbl/kjna5xbFRq8brk2wHoCLXGDPF6jqA=ud2lbaaQgA7asbuFx2zyocayHo3nTFq9mWD3LwoaYCg=ud2lbaaQgA7asbuFx2zyocayHo3nTFq9mWD3LwoaYCg=HjpOe/rdEcCehdPVL1u7j0N2XeKJoa/vakFU+1wtsMo=aS5CfKr07L5zWtS4lLRbsniG3CEXadUg2Unqe5CHpjo=

对比维度	跟学鱼皮项目	自学网上免费项目 meP/WqR3MNkD1e0lYI0pAe/471MZOw9VR3IEl1E79H4=	⭐️ 鱼皮项目优势
项目选题	✅ 选题新颖，刻意避开网上热门项目	传统项目场景（博客、商城、管理系统）HjpOe/rdEcCehdPVL1u7j0N2XeKJoa/vakFU+1wtsMo=	增加区分度，提高简历通过率
学习人数	✅ 少，不容易撞车	百万以上，烂大街 8fu8cDJmfdpbl/kjna5xbFRq8brk2wHoCLXGDPF6jqA=	增加区分度，提高简历通过率
教学方式	✅ 全程直播，带你敲每一行代码、带你踩坑和解决 Bug，不漏过每一个细节	录制课程，视频虽然看起来简短、一帆风顺，但你遇到错误无从下手 ud2lbaaQgA7asbuFx2zyocayHo3nTFq9mWD3LwoaYCg=	降低学习门槛，减少学习时长
直播笔记	✅ 详细的官方笔记 + 精选学员优质笔记	有笔记，但未经筛选 +4c8/N1p1ks+s/Pymte9p3eVkNVOHiOfNo0FGyT9zow=	学到更多知识细节
视频内容	✅ 项目教程 + 经验分享	项目教程 aS5CfKr07L5zWtS4lLRbsniG3CEXadUg2Unqe5CHpjo=	学到更多编程经验
项目源码	✅ 完整源码仓库 + 每章的提交记录 + 定期更新	只有代码包、不更新 sETFLiz5z9hWsGMqkEZF5CeQ5DuZsw1zk9awkuImoc0=	节省时间，避免踩坑
项目答疑	✅ 各项目交流群 + 答疑解惑 + 常见问题整理	无免费的答疑服务，遇到问题自行解决 meP/WqR3MNkD1e0lYI0pAe/471MZOw9VR3IEl1E79H4=	节省时间
简历写法	✅ 现成的简历写法	无 HjpOe/rdEcCehdPVL1u7j0N2XeKJoa/vakFU+1wtsMo=	节省时间、提高简历通过率
项目扩展	✅ 给出扩展思路 + 学员作品共享	无 HjpOe/rdEcCehdPVL1u7j0N2XeKJoa/vakFU+1wtsMo=	开拓思路、拉开和其他人的差距
项目面试	✅ 项目相关面试题、题解和真实面经	无 sETFLiz5z9hWsGMqkEZF5CeQ5DuZsw1zk9awkuImoc0=	提前准备，面试不懵逼

编程导航已有 **10 多套项目教程！** 每个项目的学习重点不同，几乎全都是前端 + 后端的 全栈项目 。

详细请见：https://codefather.cn/course（在该页面右侧有教程推荐和学习建议）+4c8/N1p1ks+s/Pymte9p3eVkNVOHiOfNo0FGyT9zow=

往期项目介绍视频：https://bilibili.com/video/BV1YvmbYbEgS

三、核心业务流程

第一阶段 - 公共图库平台

第二阶段 - 用户私有图库

第三阶段 - 团队共享图库

四、项目功能梳理

第一阶段 - 公共图库平台

用户模块

• 用户登录
• 用户注册
• 用户注销
• 用户权限控制
• 【管理员】管理用户

图片模块

• 【管理员】上传创建图片

• 【管理员】图片信息编辑（标签 / 分类等）

• 【管理员】管理图片

• 查看和搜索图片列表

• 查看图片详情（进入图片详情页）

• 图片下载

• 用户上传创建图片

• 【管理员】审核图片

• 导入图片

• • 通过 URL 导入图片
  • 【管理员】批量抓取和创建图片

• 【优化】图片查询优化 - 分布式缓存、本地缓存、多级缓存

• 【优化】图片上传优化 - 压缩、秒传、分片上传、断点续传

• 【优化】图片加载优化 - 懒加载、缩略图、CDN 加速、浏览器缓存

• 【优化】图片存储优化 - 降频存储（冷热数据分离）、清理策略

第二阶段 - 用户私有图库

空间模块

• 【管理员】管理空间

• 用户开通私有空间

• 私有空间权限控制

• 空间级别和限额控制

• 空间图库分析

• • 用户空间图库分析
  • 【管理员】全空间分析

图片模块

• 图片搜索

• • 基础属性搜索
  • 以图搜图
  • 颜色搜索

• 图片分享

• • 链接分享
  • 扫码分享

• 图片批量管理

• • 批量修改信息
  • 批量重命名

• 图片编辑

• • 基础图片编辑
  • AI 图片编辑

第三阶段 - 团队共享图库

空间模块

• 创建团队共享空间

• 空间成员管理

• • 成员邀请
  • 设置权限

• 空间成员权限控制

图片模块

• 图片协同编辑

五、技术选型

后端

• Java Spring Boot 框架
• MySQL 数据库 + MyBatis-Plus 框架 + MyBatis X
• Redis 分布式缓存 + Caffeine 本地缓存
• Jsoup 数据抓取
• ⭐️ COS 对象存储
• ⭐️ ShardingSphere 分库分表
• ⭐️ Sa-Token 权限控制
• ⭐️ DDD 领域驱动设计
• ⭐️ WebSocket 双向通信
• ⭐️ Disruptor 高性能无锁队列
• ⭐️ JUC 并发和异步编程
• ⭐️ AI 绘图大模型接入
• ⭐️ 多种设计模式的运用
• ⭐️ 多角度项目优化：性能、成本、安全性等

前端

• Vue 3 框架
• Vite 打包工具
• Ant Design Vue 组件库
• Axios 请求库
• Pinia 全局状态管理
• 其他组件：数据可视化、图片编辑等
• ⭐️ 前端工程化：ESLint + Prettier + TypeScript
• ⭐️ OpenAPI 前端代码生成

六、架构设计

新建代码仓库

搭建仓库，点 star 的都是精神股东 hh8kZr5oIIWSNoQ431Z2is4P7tu+SuQnXPZz37lHT1E=

代码仓库：https://github.com/liyupi/yu-picture

教程计划

第一阶段 - 公共图库平台

第 1 期：项目介绍。包括介绍项目背景、项目优势、核心业务流程、项目功能、技术选型、架构设计、教程计划等。

第 2 期：项目初始化

• 后端项目初始化
• 前端项目初始化

第 3 期：用户模块开发（前后端）

• 用户登录
• 用户注册
• 用户注销
• 用户权限控制
• 用户管理

第 4 期：图片模块开发（前后端）Ny8IKBIOsoTTCgTymQbjLul9Gmod0P0TJLzDMNBV70g=

• 【管理员】图片上传和创建
• 【管理员】管理图片
• 【管理员】图片信息编辑（标签 / 分类等）
• 查看和搜索图片列表
• 查看图片详情（进入图片详情页）
• 图片下载

第 5 期：用户上传图片模块（前后端）

• 用户上传创建图片

• 【管理员】审核图片

• 导入图片

• • 通过 URL 导入图片
  • 【管理员】批量抓取和创建图片

第 6 期：图片优化

• 图片查询优化 - 分布式缓存、本地缓存、多级缓存
• 图片上传优化 - 压缩、秒传、分片上传、断点续传
• 图片加载优化 - 懒加载、缩略图、CDN 加速、浏览器缓存
• 图片存储优化 - 降频存储（冷热数据分离）、清理策略

第二阶段 - 用户私有图库

第 7 期：空间模块开发

• 【管理员】管理空间
• 用户开通私有空间
• 私有空间权限控制
• 空间级别和限额控制

第 8 期：图片功能扩展 HjpOe/rdEcCehdPVL1u7j0N2XeKJoa/vakFU+1wtsMo=

• 图片搜索

• • 基础属性搜索
  • 以图搜图
  • 颜色搜索

• 图片分享

• • 链接分享
  • 扫码分享

• 图片批量管理

• • 批量修改信息
  • 批量重命名

第 9 期：图片编辑能力

• 图片编辑

• • 基础图片编辑
  • AI 图片编辑

第 10 期：空间图片分析

• 空间图库分析

• • 用户空间图库分析
  • 【管理员】全空间分析

第三阶段 - 团队共享图库

第 11 期：团队共享空间

• 创建团队共享空间

• 空间成员管理

• • 成员邀请
  • 设置权限

• 空间成员权限控制

第 12 期：图片协同编辑 hh8kZr5oIIWSNoQ431Z2is4P7tu+SuQnXPZz37lHT1E=

第 13 期：DDD 项目改造

第 14 期：项目部署上线

sETFLiz5z9hWsGMqkEZF5CeQ5DuZsw1zk9awkuImoc0=