# FootballInsight Pro - 技术选型文档
FootballInsight Pro 是一个足球数据分析平台，提供球队、球员、联赛等多维度的数据分析功能。本文档重点介绍项目的技术选型和架构设计。
## 技术架构概览
FootballInsight Pro 采用前后端分离的混合架构模式：
- 后端：Python + Django
- 前端：Vue.js 3 + Tailwind CSS
- 数据库：SQLite
- 构建工具：Vite
- 包管理：pip (Python) + npm (JavaScript)
## 后端技术栈
### 核心框架
- **Python 3.8+** - 项目开发语言
- **Django 5.2.6** - Web框架，提供API服务和部分页面渲染
- **SQLite** - 轻量级数据库，存储所有足球数据
### 关键依赖库
- **django-cors-headers 4.8.0** - 处理跨域资源共享(CORS)
- **pandas 2.3.2** - 数据处理和CSV文件解析
- **fuzzywuzzy 0.18.0** - 字符串模糊匹配，用于数据标准化
- **RapidFuzz 3.14.0** - 高性能模糊字符串匹配
### 特色功能
- 实现了自定义的[LoggingMiddleware](file:///C:/Users/jerry/PyCharmProjects/footviz/footviz/views/__init__.py#L28-L47)用于记录请求和响应日志
- 使用原生SQL操作数据库，通过[schema.sql](file:///C:/Users/jerry/PyCharmProjects/footviz/footviz/schema.sql)定义表结构
- 实现了数据导入脚本[db_importer.py](file:///C:/Users/jerry/PyCharmProjects/footviz/footviz/db_importer.py)，将CSV数据导入SQLite数据库
## 前端技术栈
### 核心框架和库
- **Vue 3.5.18** - 渐进式JavaScript框架，构建用户界面
- **Vue Router 4.5.1** - 官方路由管理器
- **Pinia 3.0.3** - Vue的状态管理库
### UI和样式
- **Tailwind CSS 3.4.17** - 实用优先的CSS框架
- **PostCSS 8.5.1** - CSS后处理器
- **Autoprefixer** - 自动添加CSS厂商前缀
### 构建和开发工具
- **Vite 7.0.6** - 新一代前端构建工具，提供快速的开发体验
- **vite-plugin-ssr-ssg** - 支持服务端渲染(SSR)和静态站点生成(SSG)
- **ESLint** - JavaScript/Vue代码质量检查工具
- **Prettier** - 代码格式化工具
### 可视化库
- **ECharts** - 百度开源的可视化图表库
- **Plotly** - 交互式图表和数据可视化库
## 项目架构特点
### 混合渲染模式
项目采用混合渲染模式，结合了服务端渲染和客户端渲染的优点：
- 部分页面使用Django模板引擎进行服务端渲染
- 复杂交互页面使用Vue组件进行客户端渲染
- 通过API接口实现前后端数据交互
### 静态资源管理
- 使用Django的静态文件处理机制
- 前端资源通过Vite构建后放置在[public](file:///C:/Users/jerry/PyCharmProjects/footviz/footviz-vue/public/)目录
- 大量预生成的HTML可视化文件直接存储在项目中
### 响应式设计
- 使用Tailwind CSS实现响应式布局
- 移动端和桌面端适配
- 采用底部导航(移动端)和侧边栏(桌面端)的不同导航模式
## 数据处理和存储
### 数据格式
- 原始数据以CSV格式存储
- 通过pandas进行数据清洗和转换
- 最终存储在SQLite数据库中
### 数据库设计
- 使用SQLite作为轻量级数据库
- 通过[schema.sql](file:///C:/Users/jerry/PyCharmProjects/footviz/footviz/schema.sql)定义表结构
- 包含players, teams, matches, leagues等多个核心表
## 部署和运行
### 开发环境
- 后端：Django开发服务器
- 前端：Vite开发服务器
### 生产环境
- 支持静态站点生成(SSG)
- 可部署到任何支持静态文件托管的平台
- 支持通过Nginx等反向代理进行部署
## 项目目录结构
```
footviz/ # Django后端项目
├── footviz/ # Django应用
│ ├── data/ # 原始数据文件
│ ├── views/ # Django视图和API
│ └── ... # 其他Django配置文件
├── footviz-vue/ # Vue前端项目
│ ├── src/ # Vue源代码
│ ├── public/ # 静态资源
│ └── ... # 配置文件
├── templates/ # Django模板文件
└── ... # 其他配置文件
```
## 技术选型优势
1. **高效开发**：Django提供快速的后端开发能力，Vue 3提供现代化的前端开发体验
2. **性能优秀**：Vite构建工具提供快速的冷启动和热更新
3. **易于部署**：静态站点生成和轻量级数据库使部署变得简单
4. **可视化丰富**：集成ECharts和Plotly提供丰富的数据可视化能力
5. **响应式设计**：Tailwind CSS使响应式设计变得简单高效