--- title: "01-项目总览" created: 2025-12-02 tags: - 项目 aliases: - 项目总览 --- # 项目总览 ## 一、项目介绍 - 鱼图图 基于 Vue 3 + Spring Boot + COS + WebSocket 的 **企业级智能协同云图库平台**。 平台的核心功能可分为 4 大类： 1）所有用户都可以在平台公开上传和检索图片素材，快速找到需要的图片。可用作表情包网站、设计素材网站、壁纸网站等： ![[rwN0ueItVjwgP8BC-9b1c988e.webp]] 2）管理员可以上传、审核和管理图片，并对系统内的图片进行分析： ![[vjorA40uOaf8IrES-32c27ab5.webp]] 3）对于个人用户，可将图片上传至私有空间进行批量管理、检索、编辑和分析，用作个人网盘、个人相册、作品集等： ![[dXt3bfD2zgCSDyqU-889d96a5.webp]] 4）对于企业，可开通团队空间并邀请成员，共享图片并实时协同编辑图片，提高团队协作效率。可用于提供商业服务，如企业活动相册、企业内部素材库等： ![[fJcbyE0T9HAmJ9EW-50b676d1.webp]] 该项目功能丰富，涉及文件存管、内容检索、权限控制、实时协同等企业主流业务场景，并运用多种编程思想、架构设计方法和优化策略来保证项目的高速迭代和稳定运行。 有业务、有技术，从 0 到 1 的真实企业级（商业级）项目设计开发，绝对让你收获满满！ ### 项目三大阶段 为了帮大家循序渐进地学习，鱼皮将项目设计为三个阶段，可以根据自己的时间和水平按需学习。 1）第一阶段，开发公共的图库平台。实战 Vue 3 + Spring Boot 图片素材网站的快速开发，学习文件存管业务的开发和优化技巧。 成果：可用作表情包网站、设计素材网站、壁纸网站等 ![[Idf82XIX3NA3DZ64-6809d2fe.webp]] 2）第二阶段，对项目 C 端功能进行大量扩展。用户可开通私有空间，并对空间图片进行多维检索、扫码分享、批量管理、快速编辑、用量分析。该阶段涉及大量主流业务功能开发，能学到很多业务知识和开发经验。 成果：可用作个人网盘、个人相册、作品集等 ![[2Sr1JrsGLafkkPD1-24bb5601.webp]] 3）第三阶段，对项目 B 端功能进行大量扩展。企业可开通团队空间，邀请和管理空间成员，团队内共享图片并实时协同编辑图片。该阶段涉及大量商业项目的应用场景，能学到很多架构设计和项目优化的技巧。 成果：可用于提供商业服务，如企业活动相册、企业内部素材库等 ![[284MzilnMyCRTN3Y-70bdb281.webp]] ## 二、项目优势 ### 项目收获 本项目选题新颖、功能丰富、业务真实、应用广泛。区别于增删改查的 “烂大街” 项目，鱼皮会带你实战大量新技术和商业应用场景，掌握层层递进的系统设计、项目扩展和优化方案，给你的简历大幅增加竞争力。 鱼皮给大家讲的都是 **通用的项目开发方法和架构设计套路**，从这个项目中你可以学到： - 如何拆解复杂业务，从 0 开始设计实现企业级系统？ - 如何巧用 RBAC 权限模型和框架实现复杂权限控制？ - 如何结合 Redis + Caffeine 构建高性能多级缓存？ - 如何实现文件的高效存储，并通过十几种策略进行优化？ - 如何使用高级数据结构 Disruptor 无锁队列提升并发性能？ - 如何使用 ShardingSphere 实现动态扩容的分库分表？ - 如何使用 WebSocket 多端通信，实现企业级实时协作功能？ - 如何接入 AI 绘图大模型，实现更多高级图片处理能力？ - 如何使用 DDD 架构实现大型企业级项目？ - 如何快速部署上线项目？ 此外，还能学会很多作图、思考问题、对比方案的方法，提升排查问题、自主解决 Bug 的能力。鱼皮还给大家提供了大量的项目扩展点，有能力的同学可以进一步拉开和别人的区分度，无限进步！ ### 鱼皮系列项目优势 鱼皮原创项目系列以 **实战** 为主，用 **全程直播** 的方式，**从 0 到 1** 带大家学习技术知识，并立即实践运用到项目中，做到学以致用。 此外，还提供如下服务： - 详细的文字教程或直播笔记 - 完整的项目源码 - 1 对 1 答疑解惑 - 专属项目交流群 - ⭐️ 现成的简历写法（直接写满简历） - ⭐️ 项目的扩展思路（拉开和其他人的差距） - ⭐️ 项目相关面试题、题解和真实面经（提前准备，面试不懵逼） - ⭐️ 前端 + Java 后端万用项目模板（快速创建项目） 比起看网上的教程学习，鱼皮项目系列的优势：从学知识 => 实践项目 => 复习笔记 => 项目答疑 => 简历写法 => 面试题解的一条龙服务 从需求分析、技术选型、项目设计、项目初始化、Demo 编写、前后端开发实现、项目优化、部署上线等，每个环节我都 **从理论到实践** 给大家讲的明明白白、每个细节都不放过！ | 对比维度 | 跟学鱼皮项目 | 自学网上免费项目 | ⭐️ 鱼皮项目优势 | | --- | --- | --- | --- | | 项目选题 | ✅ 选题新颖，刻意避开网上热门项目 | 传统项目场景（博客、商城、管理系统） | 增加区分度，提高简历通过率 | | 学习人数 | ✅ 少，不容易撞车 | 百万以上，烂大街 | 增加区分度，提高简历通过率 | | 教学方式 | ✅ 全程直播，带你敲每一行代码、带你踩坑和解决 Bug，不漏过每一个细节 | 录制课程，视频虽然看起来简短、一帆风顺，但你遇到错误无从下手 | 降低学习门槛，减少学习时长 | | 直播笔记 | ✅ 详细的官方笔记 + 精选学员优质笔记 | 有笔记，但未经筛选 | 学到更多知识细节 | | 视频内容 | ✅ 项目教程 + 经验分享 | 项目教程 | 学到更多编程经验 | | 项目源码 | ✅ 完整源码仓库 + 每章的提交记录 + 定期更新 | 只有代码包、不更新 | 节省时间，避免踩坑 | | 项目答疑 | ✅ 各项目交流群 + 答疑解惑 + 常见问题整理 | 无免费的答疑服务，遇到问题自行解决 | 节省时间 | | 简历写法 | ✅ 现成的简历写法 | 无 | 节省时间、提高简历通过率 | | 项目扩展 | ✅ 给出扩展思路 + 学员作品共享 | 无 | 开拓思路、拉开和其他人的差距 | | 项目面试 | ✅ 项目相关面试题、题解和真实面经 | 无 | 提前准备，面试不懵逼 | 编程导航已有 **10 多套项目教程！**每个项目的学习重点不同，几乎全都是前端 + 后端的 **全栈项目** 。 详细请见：[https://codefather.cn/course](https://www.codefather.cn/course)（在该页面右侧有教程推荐和学习建议） 往期项目介绍视频：[https://bilibili.com/video/BV1YvmbYbEgS](https://www.bilibili.com/video/BV1YvmbYbEgS/) ## 三、核心业务流程 ### 第一阶段 - 公共图库平台 ![[Azv14HDTAx7LHaR3-d5f96a80.webp]] ### 第二阶段 - 用户私有图库 ![[hhXfk5ybOWguDR6h-aa1a4cc5.webp]] ### 第三阶段 - 团队共享图库 ![[LnhweNpxB2q9zG5U-6ac57da4.webp]] ## 四、项目功能梳理 ### 第一阶段 - 公共图库平台 #### 用户模块 - 用户登录 - 用户注册 - 用户注销 - 用户权限控制 - 【管理员】管理用户 #### 图片模块 - 【管理员】上传创建图片 - 【管理员】图片信息编辑（标签 / 分类等） - 【管理员】管理图片 - 查看和搜索图片列表 - 查看图片详情（进入图片详情页） - 图片下载 - 用户上传创建图片 - 【管理员】审核图片 - 导入图片 - - 通过 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 前端代码生成 ## 六、架构设计 ![[EgAmpl2keFkqj8q5-1f2d9b37.webp]] ## 新建代码仓库 搭建仓库，点 star 的都是精神股东 代码仓库： ## 教程计划 ### 第一阶段 - 公共图库平台 第 1 期：项目介绍。包括介绍项目背景、项目优势、核心业务流程、项目功能、技术选型、架构设计、教程计划等。 第 2 期：项目初始化 - 后端项目初始化 - 前端项目初始化 第 3 期：用户模块开发（前后端） - 用户登录 - 用户注册 - 用户注销 - 用户权限控制 - 用户管理 第 4 期：图片模块开发（前后端） - 【管理员】图片上传和创建 - 【管理员】管理图片 - 【管理员】图片信息编辑（标签 / 分类等） - 查看和搜索图片列表 - 查看图片详情（进入图片详情页） - 图片下载 第 5 期：用户上传图片模块（前后端） - 用户上传创建图片 - 【管理员】审核图片 - 导入图片 - - 通过 URL 导入图片 - 【管理员】批量抓取和创建图片 第 6 期：图片优化 - 图片查询优化 - 分布式缓存、本地缓存、多级缓存 - 图片上传优化 - 压缩、秒传、分片上传、断点续传 - 图片加载优化 - 懒加载、缩略图、CDN 加速、浏览器缓存 - 图片存储优化 - 降频存储（冷热数据分离）、清理策略 ### 第二阶段 - 用户私有图库 第 7 期：空间模块开发 - 【管理员】管理空间 - 用户开通私有空间 - 私有空间权限控制 - 空间级别和限额控制 第 8 期：图片功能扩展 - 图片搜索 - - 基础属性搜索 - 以图搜图 - 颜色搜索 - 图片分享 - - 链接分享 - 扫码分享 - 图片批量管理 - - 批量修改信息 - 批量重命名 第 9 期：图片编辑能力 - 图片编辑 - - 基础图片编辑 - AI 图片编辑 第 10 期：空间图片分析 - 空间图库分析 - - 用户空间图库分析 - 【管理员】全空间分析 ### 第三阶段 - 团队共享图库 第 11 期：团队共享空间 - 创建团队共享空间 - 空间成员管理 - - 成员邀请 - 设置权限 - 空间成员权限控制 第 12 期：图片协同编辑 第 13 期：DDD 项目改造 第 14 期：项目部署上线 --- **项目分区导航**：⬅️ [[19-API 开放平台问题答疑 - API 开放项目项目教程 - 编程导航教程|19-API 开放平台问题答疑 - API 开放项目项目教程 - 编程导航教程]] | 01-项目总览 | ➡️ [[2-Learning/05-项目/07-实战项目/01-课程复刻/04-协调云图库/02-项目初始化|02-项目初始化]]