特价机票发现平台 - 飞常省

聚合全网航班数据，智能分析价格走势，让用户轻松发现特价机票

---

⚠️ Demo 说明

这是一个展示型 Demo，用于演示机票比价搜索平台的核心功能。由于是 Demo 展示，部分数据使用了模拟数据：

数据类型	来源	说明
热门目的地图片	真实图片	压缩为 WebP 格式
社区帖子/评论	Mock 模拟数据	固定数据，不涉及真实用户
航班搜索结果	来自爬虫	真实数据，通过 Playwright 爬取
多平台比价	基于爬虫数据模拟	展示比价功能逻辑
价格走势图	基于历史模拟	演示价格趋势展示

界面展示

首页

好价

搜索

监控

社区

为什么选择爬虫而非官方 API？

1. 成本考虑：各大 OTA（携程、去哪儿、飞猪等）官方 API 通常需要商务合作才能接入，且有严格的调用频率限制
2. 数据完整性：爬虫可以直接获取页面上的全部航班信息，包括第三方代理商的优惠价格
3. Demo 演示：在无商务合作条件下，爬虫是最快速的数据获取方案

注意：本项目仅供学习交流，爬虫仅在本地运行，不进行大规模采集，尊重各平台 robots.txt 协议。

---

功能特性

模块	功能
首页	Hero 搜索框、旅行主题、热门目的地、发现灵感、特价推荐
搜索	多平台比价（美团、携程、去哪儿、飞猪、智行）
特价	瀑布流展示特价航班、筛选功能
价格走势	30/60 天价格历史图表
低价日期	月度日历视图，推荐最优出行日期
价格监控	设置心理价位，降价提醒
社区	用户分享购票经验、帖子详情、互动评论

---

技术架构

┌─────────────────────────────────────────────────────────┐
│                      前端 (React)                        │
│   React 18 + TypeScript + Vite + TailwindCSS v4         │
│   状态管理: Zustand | 路由: React Router v7              │
└─────────────────────────────────────────────────────────┘
                            │
                            ▼ HTTP
┌─────────────────────────────────────────────────────────┐
│                    后端 API (FastAPI)                    │
│   FastAPI + Playwright 爬虫                             │
│   端口: 8000                                           │
└─────────────────────────────────────────────────────────┘

前端技术选型

技术	选型理由
React 18	生态成熟，组件化开发效率高
TypeScript	类型安全，降低运行时错误
Vite	极速开发体验，热更新快
TailwindCSS v4	原子化 CSS，开发效率高
Zustand	轻量状态管理，比 Redux 简单
Recharts	图表库，支持价格走势可视化
React Masonry	瀑布流布局，展示特价信息

后端技术选型

技术	选型理由
FastAPI	异步高性能，文档自动生成
Playwright	可绕过反爬机制，稳定抓取动态页面

---

目录结构

├── frontend/                 # 前端项目
│   ├── public/              # 静态资源
│   │   ├── *.webp          # 城市图片、背景图
│   │   └── *.png           # 平台 Logo
│   ├── src/
│   │   ├── components/     # 公共组件（Header、Layout）
│   │   ├── features/       # 功能模块
│   │   │   ├── search/     # 搜索相关（SearchForm、FlightCard）
│   │   │   ├── deals/      # 特价相关（DealsGrid、DealCard）
│   │   │   └── price-history/  # 价格走势
│   │   ├── pages/          # 页面组件
│   │   ├── mock/           # 模拟数据
│   │   ├── services/       # API 服务
│   │   ├── stores/         # Zustand 状态管理
│   │   └── types/          # TypeScript 类型定义
│   └── package.json
├── backend/                 # 后端项目
│   └── fliggy_scraper.py  # 爬虫脚本
├── requirements.txt         # Python 依赖
├── .venv/                  # Python 虚拟环境
├── package.json            # 根目录脚本
├── start.bat              # Windows 一键启动脚本
└── stop.bat               # Windows 停止脚本

---

环境要求

• Node.js 18+
• Python 3.10+
• Windows 系统（本项目使用 .bat 脚本）

---

快速启动

1. 克隆项目

git clone <your-repo-url>
cd DADP

2. 虚拟环境激活、安装前端依赖

uv venv --python 3.11.9
source .venv/Scripts/activate
cd frontend
npm install
cd ..

3. 安装后端依赖

uv pip install -r requirements.txt
playwright install chromium

4. 一键启动

npm install
npm run dev

会自动启动：

• 后端 API 服务（端口 8000）- Playwright 爬虫
• 前端开发服务器（端口 5173）

启动脚本

• start.bat - 一键启动前后端（直接双击）
• stop.bat - 停止所有服务

---

数据流程

用户搜索 → 前端请求 → FastAPI (8000) → Playwright 爬取目标网站
                                              ↓
                                        返回航班数据
                                              ↓
                                        前端展示

---

常见问题

Q: 启动报端口占用？

# 查找占用端口的进程
netstat -ano | findstr :8000   # 后端
netstat -ano | findstr :5173   # 前端

# 结束进程（替换 PID）
taskkill //F //PID <PID>

Q: 爬虫启动失败？

确保已安装 Playwright 浏览器驱动：

playwright install chromium

Q: 如何只启动前端预览？

cd frontend
npm run dev

（数据会使用 Mock 模拟数据）

---

未来优化方向

• 接入真实 OTA API（需商务合作）
• 添加数据库存储历史价格
• 实现用户认证系统
• 添加邮件/短信通知
• Docker 容器化部署

---

致谢

• 平台 Logo 归各公司所有，仅用于 Demo 展示