Uma Fan 数据可视化平台

面向赛马娘同好构建的粉丝数据分析面板，提供目录切换、社团筛选、日期聚合与趋势展示能力。

功能亮点

• 可配置数据源：在界面右上角设置 JSON 数据目录，后端即时切换。
• 多维筛选：按照社团与日期范围筛选，指标和图表实时刷新。
• 趋势与明细：展示累计粉丝与当日新增曲线，并生成成员增长表格。
• 轻量部署：前端使用 Vite + Vue 3，后端基于 Spring Boot 3，均支持本地快速启动。

目录结构

• backend/：Spring Boot 3 后端（Java 17，Maven 构建）。
• frontend/：Vite 4 + Vue 3 单页应用。
• Club_fans_data/：示例 JSON 数据快照。
• docs/：本地配置说明等补充文档。
• 设计计划表.md：最新的技术设计与迭代规划。

环境要求

• JDK 17（建议 Temurin 17.0.12）。
• Maven 3.9+。
• Node.js 16 及以上（推荐 18），npm 8+。

快速启动

1. 启动后端

   cd backend
   set JAVA_HOME="C:\Program Files\Eclipse Adoptium\jdk-17.0.12.7-hotspot"
   mvn spring-boot:run

2. 启动前端

   cd frontend
   npm install
   npm run dev

3. 打开浏览器访问 http://localhost:5173，前端会通过 /api 代理访问 http://localhost:8080。

若端口 8080 已被占用，可在 backend/src/main/resources/application.yml 中调整 server.port。

常用命令

• 后端打包：cd backend && mvn clean package
• 前端打包：cd frontend && npm run build
• 后端测试：cd backend && mvn test

技术栈摘要

• 后端：Spring Boot 3、Jackson、Maven；通过 REST API 提供社团列表与统计数据。
• 前端：Vue 3、Pinia、Axios、ECharts；实现筛选工具栏、指标卡、趋势图与数据表。
• 数据：读取 Club_fans_data 目录下以 yyyyMMdd.json 命名的快照文件。

数据目录切换

1. 点击右上角“设置”按钮。
2. 输入包含 JSON 快照的目录绝对路径（可使用自定义数据集）。
3. 保存后前端会自动刷新可选社团、日期与指标。

故障排查

• 500 错误 / 数据为空：确认目录下存在所选社团的 JSON 文件，并且文件名符合 yyyyMMdd.json。
• 端口冲突：结束占用 8080 的进程或修改 application.yml 中的端口配置。
• JDK 版本不匹配：确保命令行环境的 JAVA_HOME 指向 JDK 17。

更多实现细节与后续规划请阅读 设计计划表.md。