智能旅行规划助手：Vue3 前端可视化与服务器部署

写在前面

前几篇记录了智能旅行规划助手的后端接口、工具调用、多 Agent 协作和结构化输出。最后一步是前端可视化和线上部署。

一个 AI 项目如果只能在本地跑通，还不能算真正完成。只有部署到公网，让别人能访问、能填写表单、能生成结果，才更接近真实项目。

前端页面设计

前端使用 Vue3，主要分成两个页面：

• 表单页：收集用户旅行需求
• 结果页：展示结构化旅行计划

表单页重点是让用户输入尽量结构化：

• 目的地
• 出发日期和结束日期
• 交通方式
• 住宿偏好
• 旅行偏好
• 额外要求

这样后端拿到的数据更稳定，也更容易构造 Prompt。

结果页展示

后端返回的是 TripPlan 结构，所以前端可以按模块展示：

• 每日折叠面板
• 景点卡片
• 餐饮安排
• 酒店信息
• 天气建议
• 预算信息

相比直接展示一段模型生成的文本，结构化展示更清晰，也更像一个真正的产品页面。

网络错误处理

部署过程中遇到过一个典型问题：本地开发时接口地址是 localhost，上线后前端如果还请求本地地址，就会出现 network error。

解决方式是区分开发环境和生产环境：

1
2
3

const API_BASE_URL = import.meta.env.PROD
  ? ''
  : (import.meta.env.VITE_API_BASE_URL || '')

生产环境使用相对路径，让 Nginx 统一代理：

1

/api/ -> 127.0.0.1:8000/api/

这样前端和后端部署在同一个域名下，不需要额外处理跨域。

部署结构

最终部署结构是：

1
2
3
4
5
6

Nginx
  ├── /                 -> 博客静态页面
  ├── /projects/        -> 项目展示页
  ├── /trip-planner/    -> Vue3 前端
  ├── /api/             -> FastAPI 后端
  └── /health           -> 后端健康检查

这种方式的好处是：

• 博客和项目共用一个域名
• 项目可以作为作品集直接展示
• 后端接口通过 Nginx 代理
• 后续继续添加项目也比较方便

FastAPI 服务运行

后端通过 systemd 管理，避免手动启动后终端关闭导致服务停止。

服务大致配置如下：

1
2
3
4

[Service]
WorkingDirectory=/opt/helloagents-trip-planner/backend
ExecStart=/usr/bin/python3 -m uvicorn main:app --host 127.0.0.1 --port 8000
Restart=always

这样服务器重启后，后端也可以自动恢复。

博客集成

我把项目接入到个人博客里：

• 导航栏增加“项目展示”
• 项目页增加智能旅行规划助手入口
• 关于页调整为个人方向介绍
• 项目本体部署在 /trip-planner/

这样博客不只是文章列表，也能作为作品集使用。

项目复盘

这个项目从 Demo 到上线，主要解决了几个问题：

• 用户需求结构化
• 第三方工具数据接入
• 多 Agent 任务拆解
• LLM JSON 输出约束
• Pydantic 校验与兜底
• Vue3 前端可视化
• Nginx + systemd 部署

这些内容串起来，才是一个完整的 AI 应用开发流程。

小结

智能旅行规划助手在 5 月 1 日前完成了从开发到部署的主要流程。这个项目让我对 AI 应用开发有了更完整的认识：模型只是核心能力之一，真正落地还需要接口设计、数据治理、异常处理、前端体验和部署运维共同配合。

后续如果继续优化，我会重点考虑：

• 增加多城市路线规划
• 优化预算估算
• 加入地图可视化
• 增加用户历史记录
• 改进 Agent 规划质量