旅行分享平台

Discovery 旅行分享平台本文全面介绍Discovery 旅行分享平台的系统架构、核心功能模块与使用方式涵盖前台用户功能、后台管理系统、AI 攻略助手深度解析帮助读者快速了解平台能力与技术实现。一、项目简介Discovery是一个前后端分离的现代化旅行分享社区平台。用户可以发布图文笔记、浏览精美旅行图片、通过AI 攻略助手获取个性化旅行建议还支持点赞 / 收藏 / 评论 / 关注等社交互动。平台配备完善的后台管理系统实现内容审核与用户管控。项目仓库结构如下Discovery-os/ ├── code/ │ ├── springboot-Discovery-os/ # 后端工程Spring Boot 3.5 Java 21 │ └── vue-Discovery-os/ # 前端工程Vue 3 Vite Element Plus └── docker/ ├── postgres-backup.tar # PostgreSQL Docker 镜像已集成 zhparser pg_cron ├── redis-backup.tar # Redis Docker 镜像 ├── postgres-dump.sql # 数据库数据导出文件 └── readme.txt # Docker 操作说明核心价值AI 赋能智能攻略推荐平台深度集成了 DeepSeek 大语言模型用户只需输入旅行目的地关键词AI 便会以 SSE 流式传输实时生成结构化旅行攻略——涵盖推荐路线、必打卡景点、地方美食、注意事项等打字机效果逐字输出体验流畅自然。后端通过 System Prompt 约束 AI 仅回答旅游领域问题非旅游内容礼貌拒绝保证内容专业性。这一功能将大模型的通用能力精准落地到旅行规划场景显著提升了平台的信息价值与用户粘性也是 SSE 流式通信在实际业务中的典型应用案例技术栈主流且较新学习与复用价值高项目采用Spring Boot 3.5 Java 21 Vue 3 Vite作为前后端核心框架搭配PostgreSQL含 zhparser 中文分词扩展作为主数据库、Redis作为分布式缓存、Docker进行容器化部署。这套技术选型既是当前企业级开发的主流组合——Spring Boot Vue Redis PostgreSQL Docker 几乎是中小型 Web 项目的标配五件套又保持了较新的版本号Java 21 LTS、Spring Boot 3.5、Vue 3.5无论是作为学习参考还是二次开发基础都具有很高的通用性和实用价值。前后端分离、JWT 认证、MyBatis 持久层、Caffeine 本地缓存等实践均为企业开发中的标准做法适合作为全栈项目学习模板UI 界面简洁合理注重用户体验前端采用 Element Plus 企业级组件库整体视觉风格清爽现代。发现页面采用响应式瀑布流布局1~6 列自适应屏幕宽度图片懒加载 无限滚动保证浏览流畅AI 攻略区域配备骨架屏加载占位首字到达前不会空白等待笔记详情弹窗集成图片轮播、Markdown 正文渲染、多级评论区用户中心支持头像裁剪上传。每个页面的交互设计都围绕减少操作步骤、提升信息获取效率展开——瀑布流一屏多图、弹窗替代跳页、toggle 接口一键切换状态整体使用体验简洁而不简陋工程化架构设计前后端分离架构、JWT 无状态认证、Redis 缓存降级机制Redis 不可用时自动回退数据库、事务保护回滚图片上传失败自动清理、pg_cron 定时任务清理历史数据、全局异常处理与统一响应格式——每一层都体现了规范的工程化实践具备良好的可维护性与可扩展性完整功能闭环从用户注册登录、内容发布、审核管理、社交互动到 AI 智能推荐平台覆盖了内容社区的完整生命周期形成创作 → 审核 → 展示 → 互动 → 推荐的闭环体验每个环节功能完整、可用全端适配一套代码适配手机、平板、桌面端响应式布局自动适配不同屏幕尺寸后台管理完善的用户管理与内容审核系统支持账号状态管控、帖子审核流、认证达人标识等运营能力中文全文检索PostgreSQL zhparser 中文分词 GIN 索引实现高质量的中文笔记全文搜索二、技术栈总览前端技术栈技术版本说明Vue 33.5.22Composition APIVite7.1.11基于 ESM 的构建工具Vue Router4.6.3SPA 路由管理Element Plus2.11.5企业级 UI 组件库Axios1.13.5HTTP 请求封装Markdown-it14.1.1Markdown 解析渲染Vue Cropper1.1.4头像裁剪组件OpenAI SDK6.29.0AI 能力集成后端技术栈技术版本说明Spring Boot3.5.7核心框架Java21编译与运行环境Spring Security6.x认证与授权MyBatis3.0.5持久层框架PageHelper1.4.6分页插件java-jwt4.3.0JWT 令牌签发与校验Hutool5.8.18Java 工具库OkHttp okhttp-sse4.12.0HTTP 客户端 SSE 流式支持Caffeine3.1.8本地缓存基础设施组件版本说明PostgreSQL12主数据库需zhparser中文分词 pg_cron定时任务扩展Redis6分布式缓存Lettuce 连接池Docker-容器化部署 PG 与 Redis三、系统总体架构Discovery 平台采用经典的前后端分离架构通过 Docker 容器化中间件实现开发环境与生产环境的一致性。┌─────────────────────────────────────────────┐ │ 浏览器客户端 │ │ (手机 / 平板 / 桌面端) │ └──────────────────────┬──────────────────────┘ │ HTTP / SSE ▼ ┌──────────────────────────────────────────────────────────────────────┐ │ 前端层 (Vue 3 Vite) │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────┐ │ │ │ 发现页面 │ │ 收藏页面 │ │ 上传页面 │ │ 用户中心 │ │ 后台管理│ │ │ │ AI 助手 │ │ 浏览历史 │ │ 图片预览 │ │ 头像裁剪 │ │ 审核用户│ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ └────────┘ │ │ │ │ Axios 请求封装 (拦截器 / Token 自动注入 / 401 自动跳转登录) │ └──────────────────────────────┬───────────────────────────────────────┘ │ RESTful API SSE 流 ▼ ┌──────────────────────────────────────────────────────────────────────┐ │ 后端层 (Spring Boot 3.5 Java 21) │ │ │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌──────────┐ │ │ │用户模块 │ │笔记模块 │ │互动模块 │ │评论模块 │ │ AI 助手 │ │ │ │JWT 认证 │ │全文检索 │ │toggle │ │树形结构 │ │DeepSeek │ │ │ │角色控制 │ │审核流 │ │接口 │ │ │ │SSE 流式 │ │ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ └──────────┘ │ │ │ │ Spring Security 认证过滤器 → Controller → Service → MyBatis Mapper │ │ 全局异常处理 统一响应 Result Caffeine 本地缓存 │ └──────────┬─────────────────────────────────┬─────────────────────────┘ │ │ ▼ ▼ ┌─────────────────────┐ ┌─────────────────────┐ │ PostgreSQL 12 │ │ Redis 6 │ │ │ │ │ │ 8 张核心业务表 │ │ 分布式缓存 │ │ zhparser 中文分词 │ │ Lettuce 连接池 │ │ GIN 全文检索索引 │ │ 降级回退 DB 查询 │ │ pg_cron 定时清理 │ │ │ │ UUIDv7 主键 │ │ │ └─────────────────────┘ └─────────────────────┘ │ │ └────────── Docker 容器 ──────────┘架构亮点设计说明前后端分离Vue 前端通过 Vite 代理/api转发至 Spring Boot 后端开发与部署完全解耦JWT 无状态认证登录返回 Token前端 Axios 拦截器自动注入请求头后端过滤器统一校验无需 SessionSSE 流式 AI后端 SseEmitter 转发 DeepSeek 流式响应前端 ReadableStream 逐字读取实现打字机效果缓存降级Redis 不可用时自动回退到数据库查询保障核心功能可用定时任务pg_cron 每日自动清理 30 天前的浏览历史无需额外调度系统容器化PostgreSQL含扩展和 Redis 预构建为 Docker 镜像一条命令启动全套基础设施四、核心功能模块4.1 前台功能发现页面首页/discoveryAI 攻略助手根据搜索关键词生成个性化旅行建议SSE 流式传输 打字机效果全局搜索关键词模糊匹配实时过滤瀑布流展示响应式网格1~6 列自适应无限滚动IntersectionObserver 触底自动加载详情预览图片轮播、Markdown 渲染、点赞 / 评论 / 收藏 / 分享收藏页面/collection我的收藏列表NoteGrid 组件统一展示浏览历史记录与清除点击卡片查看详情上传页面/upload拖拽 / 点击上传图片实时缩略图预览多图上传JPG/PNG/GIF/WebP单张 ≤ 20MB标题 / 位置 / 内容描述元信息编辑上传失败事务回滚用户中心/user头像裁剪上传Vue Cropper个人资料编辑昵称、邮箱、手机号、简介、性别、生日粉丝 / 关注数据统计与列表我的动态NoteGrid 展示密码修改登录 / 注册/login/register手机号 密码登录注册表单验证路由守卫白名单/login、/register、/discovery 免登录4.2 后台管理系统项目包含两套独立布局的后台管理页面直接通过 URL 访问功能访问地址帖子管理内容审核http://localhost:5173/postManagement用户管理账号管控http://localhost:5173/userManagement用户管理功能分页列表、手机号搜索、账号状态管理正常/冻结/永久封禁、密码重置、批量删除、认证达人标识。帖子管理功能待审核笔记列表、图片预览多图轮播、审核通过/拒绝、拒绝理由输入、关键词搜索。【建议截图 9】用户管理后台——展示用户列表表格 状态管理操作。【建议截图 10】帖子管理后台——展示待审核笔记卡片 审核操作按钮。4.3 后端核心能力模块关键能力用户模块JWT 认证、角色控制普通用户 / 审核员 / 管理员笔记模块图文发布、级联删除、审核流、zhparser 中文全文检索互动模块点赞 / 收藏 / 关注统一toggle接口评论模块多级评论树形结构浏览历史去重记录、pg_cron 每日自动清理 30 天前数据AI 助手DeepSeek 旅行规划SSE 流式输出媒体资源图片本地存储、按笔记聚合查询4.4 数据库设计核心数据表UUIDv7 主键表名说明users用户手机号/邮箱唯一含角色、状态、达人标识posts笔记含search_vector全文检索向量触发器维护collections收藏UNIQUE(user_id, post_id)likes点赞UNIQUE(user_id, target_id, target_type)comments评论支持parent_id多级树形follows关注UNIQUE(follower_id, following_id)media_resources媒体资源图片/视频 URLposts_histories浏览历史UNIQUE(user_id, post_id)【建议截图 11】数据库表关系 ER 图——可以用工具如 DataGrip、Navicat导出表关系图帮助读者理解数据模型。4.5 AI 攻略助手深度解析DeepSeek 集成AI 攻略助手是本项目最具亮点的功能模块。平台后端集成了DeepSeek 大语言模型用户在搜索栏输入旅行目的地关键词后AI 会根据关键词生成结构化的个性化旅行攻略包括推荐路线、必打卡景点、地方美食、注意事项等帮助用户快速规划行程。4.5.1 整体架构AI 攻略助手采用“前端流式读取 → 后端 SSE 转发 → DeepSeek API”的三层链路实现实时打字机效果用户输入关键词 云南 │ ▼ ┌──────────────┐ POST /api/AI/travel-advice ┌──────────────────┐ │ Vue 前端 │ ──────────────────────────────────▶ │ Spring Boot │ │ discovery │ fetch ReadableStream │ AiController │ │ .vue │ ◀────────────────────────────────── │ SseEmitter │ │ │ SSE: data: {chunk} 逐段推送 │ │ │ └──────────────┘ └───────┼──────────┘ │ okhttp-sse 流式请求 │ ▼ ┌──────────────────┐ │ DeepSeek API │ │ chat/completions│ │ (stream: true) │ └──────────────────┘为什么不在前端直接调用 DeepSeek密钥安全API Key 保存在后端配置中不暴露给前端灵活控制后端注入 System Prompt 约束 AI 角色为旅游攻略小助手并实现登录校验、重试机制、错误兜底4.5.2 后端实现后端通过AiControllerAiServiceDeepseek两层完成 AI 调用与 SSE 流式转发核心流程如下// Controller 层JWT 校验 → 创建 SseEmitter → 异步调用 ServicePostMapping(value/travel-advice,producesTEXT_EVENT_STREAM_VALUE)publicSseEmittergetTravelAdvice(RequestBodyAiRequestrequest){TokenUtils.getCurrentUserId();// 1. 登录校验SseEmitteremitternewSseEmitter(0L);// 2. 创建不超时的 SSE 流newThread(()-aiServiceDeepseek.getTravelAdviceStream(request.getQuestion(),emitter)).start();// 3. 异步调用returnemitter;}// Service 层okhttp-sse EventSourceListener 监听 DeepSeek 流式响应// → 提取 choices[0].delta.content → emitter.send() 转发给前端关键设计点SseEmitterSpring 原生 SSE 支持produces TEXT_EVENT_STREAM_VALUE声明流式响应okhttp-sseEventSourceListener 监听 DeepSeek 的data:事件逐段提取delta.content转发重试机制遇到 429 速率限制或网络异常时最多重试 30 次间隔 100msSystem Prompt后端注入角色约束AI 仅回答旅游问题非旅游内容礼貌拒绝4.5.3 前端实现前端在discovery.vue中通过fetchReadableStream读取 SSE 流实现打字机效果constresponseawaitfetch(/api/AI/travel-advice,{method:POST,headers:{Content-Type:application/json,Authorization:Bearer${token}},body:JSON.stringify({question:searchKeyword.value}),signal:aiAbortController.signal// 切换关键词时自动取消上一次请求})constreaderresponse.body.getReader()// 逐段读取 SSE 数据 → accumulated 累积拼接 → 实时更新 aiResponse → markdown-it 渲染为富文本关键设计AbortController用户切换关键词时自动取消上一次 AI 请求避免响应错乱骨架屏首字到达前通过el-skeleton展示加载占位消除空白等待Markdown 实时渲染markdown-it将 AI 输出的 Markdown 文本实时渲染为结构化富文本标题、列表、加粗等刷新重生成攻略区域提供刷新按钮可对同一关键词重新获取攻略4.5.4 功能亮点总结特性实现方式效果流式实时输出后端 SseEmitter okhttp-sse前端 fetch ReadableStream打字机效果逐字显示无需等待全部生成Markdown 富文本前端 markdown-it 实时渲染攻略内容结构化展示标题、列表、加粗等角色约束后端注入 System Prompt 限定旅游领域AI 只回答旅游相关问题非旅游内容礼貌拒绝登录校验Controller 层 JWT 校验未登录用户无法使用保障 API 安全请求取消前端 AbortController 后端独立线程用户切换关键词时自动取消上一次请求自动重试后端最多 30 次重试100ms 间隔应对 DeepSeek API 429 速率限制和网络波动错误兜底后端 try-catch SSE error前端 ElMessage 提示网络异常或 AI 不可用时用户友好提示骨架屏加载Element Plus el-skeleton首字到达前展示加载占位提升体验刷新重生成刷新按钮重新调用 AI对同一关键词可重新获取攻略配置说明DeepSeek 参数在application.yml中配置api-key、model、temperature: 1.3、stream: trueAPI Key 前往 DeepSeek 开放平台 申请新用户有免费额度。【建议截图 AI-1】在此处放置一张完整的 AI 交互流程图帮助读者理解数据流向。【建议截图 AI-2】用 Postman 或 curl 调用接口展示 SSE 原始数据流。【建议截图 AI-3】后端控制台 AI 调用日志截图。【建议截图 AI-4】DeepSeek 开放平台控制台截图——展示 API Key 创建页面和余额信息。【建议截图 AI-5】在发现页面输入旅行目的地如云南截图展示 AI 生成的完整攻略内容Markdown 渲染后的效果。【建议截图 AI-6】AI 打字机效果动图/GIF——录制逐字输出的动态过程。【建议截图 AI-7】可选输入非旅游关键词截图展示 AI 礼貌拒绝的回答。五、项目结构5.1 前端结构vue-Discovery-os/ ├── public/ # 静态资源 ├── src/ │ ├── assets/ # 样式与图片资源 │ ├── components/ # 公共组件 │ │ ├── LazyImage.vue # 图片懒加载IntersectionObserver │ │ ├── NoteGrid.vue # 瀑布流卡片网格 │ │ └── PostDetailDialog.vue # 帖子详情弹窗 │ ├── router/index.js # 路由定义与守卫 │ ├── utils/request.js # Axios 请求封装拦截器/重试/Token │ ├── views/ │ │ ├── layout/index.vue # 主布局导航 侧边栏 │ │ ├── discovery/discovery.vue # 首页 AI 助手 │ │ ├── collection/collection.vue # 收藏与历史 │ │ ├── upload/upload.vue # 内容发布 │ │ ├── user/user.vue # 用户中心 │ │ ├── login/login.vue # 登录 │ │ ├── register/register.vue # 注册 │ │ ├── postManagement/ # 后台帖子审核独立布局 │ │ └── userManagement/ # 后台用户管理独立布局 │ ├── App.vue │ └── main.js ├── .env # 环境变量VITE_API_BASE_URL ├── vite.config.js # Vite 配置代理 /api → 后端 └── package.json5.2 后端结构springboot-Discovery-os/ ├── src/main/java/com/travel/ │ ├── SpringbootTravelApplication.java # 启动类MapperScan EnableCaching │ ├── common/ # CORS、JWT 过滤器、统一响应 Result │ ├── config/ # Redis、Security 配置类 │ ├── controller/ # REST API 控制器 │ ├── entity/ # 实体类与 DTO │ ├── exception/ # 自定义异常 全局异常处理 │ ├── mapper/ # MyBatis Mapper 接口 │ ├── service/ # 业务逻辑层 │ └── utils/ # 本地文件存储、Token 工具 ├── src/main/resources/ │ ├── mapper/ # MyBatis XML 映射文件 │ └── application.yml # 应用配置 ├── src/sql/ # 建表与扩展初始化脚本 └── pom.xml六、API 接口速览认证方式除公开接口外所有接口需在请求头携带 JWT TokenAuthorization: Bearer token公开接口免 TokenPOST /users/login、POST /users/register、GET /posts/searchByKeyword、GET /media/selectPostPhotos、GET /comments/selectByPostId核心接口模块方法路径说明用户POST/users/login登录获取 Token用户POST/users/register注册笔记POST/posts/upload发布笔记笔记GET/posts/searchByKeyword中文全文检索收藏POST/collections/toggle切换收藏点赞POST/likes/toggle切换点赞关注POST/follows/toggle切换关注评论POST/comments/add发表评论媒体POST/media/uploadPhotos上传图片AIPOST/AI/travel-adviceAI 旅行建议SSE 流式历史GET/postsHistories/getByUserId浏览历史统一响应格式{code:200,message:success,data:{}}七、功能使用指南7.1 用户注册与登录访问http://localhost:5173系统默认进入发现页面免登录浏览点击右上角「登录」按钮进入登录页面新用户点击「注册」链接填写手机号、密码等信息完成注册已有账号直接输入手机号 密码登录登录成功后自动跳转回发现页面右上角显示用户头像路由白名单/login、/register、/discovery三个页面无需登录即可访问其余页面需要登录后才能进入。7.2 发现与浏览浏览笔记发现页面以瀑布流形式展示所有已审核通过的旅行笔记向下滚动自动加载更多搜索笔记在顶部搜索框输入关键词如城市名、景点名实时过滤匹配的笔记查看详情点击任意笔记卡片弹出详情弹窗展示完整图片轮播、正文内容、评论区浏览历史系统自动记录你浏览过的笔记可在收藏页面的「浏览历史」标签页查看7.3 AI 攻略助手在发现页面搜索框中输入旅行目的地关键词如云南“成都”“三亚”点击搜索后AI 攻略助手区域自动激活AI 会以打字机效果逐字输出个性化旅行攻略内容包括推荐游览路线必打卡景点介绍地方特色美食推荐旅行注意事项与建议攻略内容以Markdown 富文本格式渲染结构清晰可读点击攻略区域右上角的刷新按钮可对同一关键词重新生成攻略切换关键词搜索时系统自动取消上一次 AI 请求使用提示AI 攻略助手需要登录后才能使用AI 仅回答旅游相关问题输入非旅游关键词会收到礼貌拒绝如果网络不稳定后端会自动重试最多 30 次7.4 发布笔记登录后点击导航栏的「上传」按钮进入上传页面上传图片将图片拖拽到上传区域或点击区域选择文件支持 JPG / PNG / GIF / WebP 格式单张图片不超过 20MB可上传多张图片已上传的图片显示缩略图预览填写信息标题必填位置旅行地点内容描述支持 Markdown 格式点击「发布」按钮提交笔记提交后进入待审核状态需管理员审核通过后才会在发现页面展示事务保护如果图片上传成功但笔记创建失败系统会自动回滚已上传的图片避免产生孤立文件。7.5 互动功能在笔记详情弹窗中可以进行以下互动操作说明点赞点击爱心图标再次点击取消点赞收藏点击收藏图标收藏的笔记在「我的收藏」页面可查看评论在评论区输入文字并发表支持多级回复树形结构关注作者在详情弹窗中点击作者头像旁的「关注」按钮分享点击分享图标可复制笔记链接7.6 个人中心登录后点击右上角头像 → 进入用户中心/user编辑资料修改昵称、邮箱、手机号、简介、性别、生日头像设置点击头像区域使用 Vue Cropper 裁剪并上传新头像修改密码在安全设置中修改登录密码关注/粉丝查看关注列表和粉丝列表数据统计一目了然我的动态查看自己发布的所有笔记NoteGrid 展示7.7 后台管理管理员和审核员可通过以下地址访问后台管理页面帖子审核/postManagement打开http://localhost:5173/postManagement页面展示所有待审核的笔记卡片点击卡片可预览笔记详情含多图轮播审核通过点击「通过」按钮笔记即可在前台展示审核拒绝点击「拒绝」按钮输入拒绝理由笔记作者将收到反馈搜索筛选通过关键词搜索特定待审核笔记用户管理/userManagement打开http://localhost:5173/userManagement页面展示所有注册用户的分页列表搜索用户通过手机号精确查找用户账号状态管理正常用户可正常登录使用冻结临时封禁用户无法登录永久封禁永久封禁账号密码重置为用户重置默认密码批量删除勾选多个用户进行批量删除认证达人为用户设置/取消「认证达人」标识八、常见问题Q1AI 攻略助手无法使用A检查application.yml中deepseek.api-key是否已填写、网络是否通畅、API 额度是否充足。AI 不可用不影响平台其他功能。Q2图片上传失败A确认file.upload.dir目录存在且有写权限磁盘空间充足单文件 ≤ 20MB。Q3前端页面白屏 / 接口 404A检查.env中VITE_API_BASE_URL是否指向正确的后端地址默认http://localhost:8090确认后端服务已启动。Q4Token 过期怎么处理A前端响应拦截器会自动检测 401/403 状态码清除 LocalStorage 并跳转登录页。Token 有效期 10 小时过期后重新登录即可。Q5发布的笔记在发现页面看不到A新发布的笔记需要经过管理员审核通过后才会展示在前台。请前往/postManagement查看审核状态。Q6Redis 连接报错A后端有降级逻辑——即使 Redis 不可用也会自动回退到数据库查询不影响核心功能。九、总结本项目展示了如何使用Spring Boot Vue Docker构建一个完整的旅行分享社区平台。平台涵盖发现浏览、AI 攻略助手、内容发布、社交互动、后台管理等完整功能闭环并通过 DeepSeek 大模型集成实现了智能化的旅行攻略推荐。技术选型上Spring Boot 3.5 Java 21 Vue 3 PostgreSQL Redis Docker 的组合既是当前企业级开发的主流方案又保持了较新的版本兼顾了学习参考价值与工程实用性。AI 攻略助手通过后端 SSE 转发 前端流式读取的方式实现了打字机效果是 SSE 流式通信在实际项目中的典型应用案例。核心功能一览功能模块核心能力发现页面瀑布流展示、全局搜索、无限滚动、笔记详情AI 攻略助手DeepSeek 集成、SSE 流式输出、打字机效果、Markdown 渲染内容发布拖拽上传、多图预览、事务保护、审核流程社交互动点赞、收藏、评论多级树形、关注作者用户中心资料编辑、头像裁剪、关注/粉丝、我的动态后台管理帖子审核、用户管理、状态管控、密码重置数据检索zhparser 中文分词、GIN 索引全文检索浏览历史自动记录、pg_cron 定时清理、去重存储作者Yu邮箱Yuan.jiajun2020outlook.com如果这个项目对你有帮助欢迎点赞收藏