旅行分享平台

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 索引，实现高质量的中文笔记全文搜索

二、技术栈总览

前端技术栈

后端技术栈

基础设施

三、系统总体架构

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 容器 ──────────┘

架构亮点

四、核心功能模块

4.1 前台功能

发现页面（首页）/discovery

• AI 攻略助手：根据搜索关键词生成个性化旅行建议，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 访问：

用户管理功能：分页列表、手机号搜索、账号状态管理（正常/冻结/永久封禁）、密码重置、批量删除、认证达人标识。

帖子管理功能：待审核笔记列表、图片预览（多图轮播）、审核通过/拒绝、拒绝理由输入、关键词搜索。

【建议截图 9】：用户管理后台——展示用户列表表格 + 状态管理操作。

【建议截图 10】：帖子管理后台——展示待审核笔记卡片 + 审核操作按钮。

4.3 后端核心能力

4.4 数据库设计

核心数据表（UUIDv7 主键）：

【建议截图 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？

1. 密钥安全：API Key 保存在后端配置中，不暴露给前端
2. 灵活控制：后端注入 System Prompt 约束 AI 角色为"旅游攻略小助手"，并实现登录校验、重试机制、错误兜底

4.5.2 后端实现

后端通过AiController+AiServiceDeepseek两层完成 AI 调用与 SSE 流式转发，核心流程如下：

// Controller 层：JWT 校验 → 创建 SseEmitter → 异步调用 Service@PostMapping(value="/travel-advice",produces=TEXT_EVENT_STREAM_VALUE)publicSseEmittergetTravelAdvice(@RequestBodyAiRequestrequest){TokenUtils.getCurrentUserId();// 1. 登录校验SseEmitteremitter=newSseEmitter(0L);// 2. 创建不超时的 SSE 流newThread(()->aiServiceDeepseek.getTravelAdviceStream(request.getQuestion(),emitter)).start();// 3. 异步调用returnemitter;}// Service 层：okhttp-sse EventSourceListener 监听 DeepSeek 流式响应// → 提取 choices[0].delta.content → emitter.send() 转发给前端

关键设计点：

• SseEmitter：Spring 原生 SSE 支持，produces = TEXT_EVENT_STREAM_VALUE声明流式响应
• okhttp-sse：EventSourceListener 监听 DeepSeek 的data:事件，逐段提取delta.content转发
• 重试机制：遇到 429 速率限制或网络异常时，最多重试 30 次，间隔 100ms
• System Prompt：后端注入角色约束，AI 仅回答旅游问题，非旅游内容礼貌拒绝

4.5.3 前端实现

前端在discovery.vue中通过fetch+ReadableStream读取 SSE 流，实现打字机效果：

constresponse=awaitfetch('/api/AI/travel-advice',{method:'POST',headers:{'Content-Type':'application/json','Authorization':`Bearer${token}`},body:JSON.stringify({question:searchKeyword.value}),signal:aiAbortController.signal// 切换关键词时自动取消上一次请求})constreader=response.body.getReader()// 逐段读取 SSE 数据 → accumulated 累积拼接 → 实时更新 aiResponse → markdown-it 渲染为富文本

关键设计：

• AbortController：用户切换关键词时自动取消上一次 AI 请求，避免响应错乱
• 骨架屏：首字到达前通过el-skeleton展示加载占位，消除空白等待
• Markdown 实时渲染：markdown-it将 AI 输出的 Markdown 文本实时渲染为结构化富文本（标题、列表、加粗等）
• 刷新重生成：攻略区域提供刷新按钮，可对同一关键词重新获取攻略

4.5.4 功能亮点总结

配置说明：DeepSeek 参数在application.yml中配置（api-key、model、temperature: 1.3、stream: true），API 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.json

5.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 Token：

Authorization: Bearer <token>

公开接口（免 Token）：POST /users/login、POST /users/register、GET /posts/searchByKeyword、GET /media/selectPostPhotos、GET /comments/selectByPostId

核心接口

统一响应格式

{"code":"200","message":"success","data":{}}

七、功能使用指南

7.1 用户注册与登录

1. 访问http://localhost:5173，系统默认进入发现页面（免登录浏览）
2. 点击右上角「登录」按钮，进入登录页面
3. 新用户点击「注册」链接，填写手机号、密码等信息完成注册
4. 已有账号直接输入手机号 + 密码登录
5. 登录成功后自动跳转回发现页面，右上角显示用户头像

路由白名单：/login、/register、/discovery三个页面无需登录即可访问，其余页面需要登录后才能进入。

7.2 发现与浏览

• 浏览笔记：发现页面以瀑布流形式展示所有已审核通过的旅行笔记，向下滚动自动加载更多
• 搜索笔记：在顶部搜索框输入关键词（如城市名、景点名），实时过滤匹配的笔记
• 查看详情：点击任意笔记卡片，弹出详情弹窗，展示完整图片轮播、正文内容、评论区
• 浏览历史：系统自动记录你浏览过的笔记，可在收藏页面的「浏览历史」标签页查看

7.3 AI 攻略助手

1. 在发现页面搜索框中输入旅行目的地关键词（如"云南"“成都”“三亚”）
2. 点击搜索后，AI 攻略助手区域自动激活
3. AI 会以打字机效果逐字输出个性化旅行攻略，内容包括：
   • 推荐游览路线
   • 必打卡景点介绍
   • 地方特色美食推荐
   • 旅行注意事项与建议
4. 攻略内容以Markdown 富文本格式渲染，结构清晰可读
5. 点击攻略区域右上角的刷新按钮，可对同一关键词重新生成攻略
6. 切换关键词搜索时，系统自动取消上一次 AI 请求

使用提示：

• AI 攻略助手需要登录后才能使用
• AI 仅回答旅游相关问题，输入非旅游关键词会收到礼貌拒绝
• 如果网络不稳定，后端会自动重试最多 30 次

7.4 发布笔记

1. 登录后点击导航栏的「上传」按钮，进入上传页面
2. 上传图片：将图片拖拽到上传区域，或点击区域选择文件
   • 支持 JPG / PNG / GIF / WebP 格式
   • 单张图片不超过 20MB
   • 可上传多张图片，已上传的图片显示缩略图预览
3. 填写信息：
   • 标题（必填）
   • 位置（旅行地点）
   • 内容描述（支持 Markdown 格式）
4. 点击「发布」按钮提交
5. 笔记提交后进入待审核状态，需管理员审核通过后才会在发现页面展示

事务保护：如果图片上传成功但笔记创建失败，系统会自动回滚已上传的图片，避免产生孤立文件。

7.5 互动功能

在笔记详情弹窗中可以进行以下互动：

7.6 个人中心

登录后点击右上角头像 → 进入用户中心/user：

• 编辑资料：修改昵称、邮箱、手机号、简介、性别、生日
• 头像设置：点击头像区域，使用 Vue Cropper 裁剪并上传新头像
• 修改密码：在安全设置中修改登录密码
• 关注/粉丝：查看关注列表和粉丝列表，数据统计一目了然
• 我的动态：查看自己发布的所有笔记（NoteGrid 展示）

7.7 后台管理

管理员和审核员可通过以下地址访问后台管理页面：

帖子审核/postManagement

1. 打开http://localhost:5173/postManagement
2. 页面展示所有待审核的笔记卡片
3. 点击卡片可预览笔记详情（含多图轮播）
4. 审核通过：点击「通过」按钮，笔记即可在前台展示
5. 审核拒绝：点击「拒绝」按钮，输入拒绝理由，笔记作者将收到反馈
6. 搜索筛选：通过关键词搜索特定待审核笔记

用户管理/userManagement

1. 打开http://localhost:5173/userManagement
2. 页面展示所有注册用户的分页列表
3. 搜索用户：通过手机号精确查找用户
4. 账号状态管理：
   • 正常：用户可正常登录使用
   • 冻结：临时封禁，用户无法登录
   • 永久封禁：永久封禁账号
5. 密码重置：为用户重置默认密码
6. 批量删除：勾选多个用户进行批量删除
7. 认证达人：为用户设置/取消「认证达人」标识

八、常见问题

Q1：AI 攻略助手无法使用？
A：检查application.yml中deepseek.api-key是否已填写、网络是否通畅、API 额度是否充足。AI 不可用不影响平台其他功能。

Q2：图片上传失败？
A：确认file.upload.dir目录存在且有写权限，磁盘空间充足，单文件 ≤ 20MB。

Q3：前端页面白屏 / 接口 404？
A：检查.env中VITE_API_BASE_URL是否指向正确的后端地址（默认http://localhost:8090），确认后端服务已启动。

Q4：Token 过期怎么处理？
A：前端响应拦截器会自动检测 401/403 状态码，清除 LocalStorage 并跳转登录页。Token 有效期 10 小时，过期后重新登录即可。

Q5：发布的笔记在发现页面看不到？
A：新发布的笔记需要经过管理员审核通过后才会展示在前台。请前往/postManagement查看审核状态。

Q6：Redis 连接报错？
A：后端有降级逻辑——即使 Redis 不可用，也会自动回退到数据库查询，不影响核心功能。

九、总结

本项目展示了如何使用Spring Boot + Vue + Docker构建一个完整的旅行分享社区平台。平台涵盖发现浏览、AI 攻略助手、内容发布、社交互动、后台管理等完整功能闭环，并通过 DeepSeek 大模型集成实现了智能化的旅行攻略推荐。

技术选型上，Spring Boot 3.5 + Java 21 + Vue 3 + PostgreSQL + Redis + Docker 的组合既是当前企业级开发的主流方案，又保持了较新的版本，兼顾了学习参考价值与工程实用性。AI 攻略助手通过后端 SSE 转发 + 前端流式读取的方式实现了打字机效果，是 SSE 流式通信在实际项目中的典型应用案例。

核心功能一览：

作者：Yu
邮箱：Yuan.jiajun2020@outlook.com

如果这个项目对你有帮助，欢迎点赞收藏！