一款专为女性设计的月经周期管理应用，帮助用户记录、追踪和预测月经周期，关注女性健康。
项目地址：https://gitee.com/xiao-zheng666/menstruation-app
项目概述
本项目是一个全栈 Web 应用，采用前后端分离架构开发。用户可以记录每次月经的开始日期、持续时间、痛经程度、情绪变化和身体症状等信息，系统会自动计算周期天数并预测下次月经日期，同时提供直观的日历视图和数据统计分析功能。
技术栈
后端技术
前端技术
功能特性
核心功能
用户认证：支持用户注册、登录，基于 JWT 的身份验证机制
记录管理：完整记录每次月经信息，包括开始日期、持续天数、痛经程度、心情标签、症状等
症状追踪：预设 13 种常见症状模板，分为身体症状和情绪症状两大类
周期预测：根据历史记录采用加权平均算法预测下次月经日期和排卵期
规律评分：计算周期规律性评分（0-100分）
数据展示
首页仪表盘：展示总记录数、平均周期、平均行经天数、规律评分等关键指标
日历视图：在日历上直观展示行经期、排卵期和预测期，支持月/周视图切换
统计分析：周期趋势折线图、行经天数分布柱状图
历史时间线：精美的时间线展示历史记录
用户设置
头像上传：支持自定义头像上传
昵称修改：个性化昵称设置
密码修改：安全的密码修改功能
数据导出：支持导出 Excel 格式的记录数据
其他功能
访问统计：记录页面访问量(PV)和独立访客数(UV)
深色模式：支持明暗主题切换
响应式设计：完美适配桌面端和移动端设备
精美动画：骨架屏加载、成功动画、悬浮效果等
项目结构
menstruation-app/
├── backend/ # 后端项目
│ ├── pom.xml # Maven 配置文件
│ └── src/main/
│ ├── java/com/period/
│ │ ├── common/ # 通用类
│ │ │ ├── Result.java # 统一响应结果
│ │ │ ├── BusinessException.java
│ │ │ └── GlobalExceptionHandler.java
│ │ ├── config/ # 配置类
│ │ │ ├── SecurityConfig.java
│ │ │ ├── JwtAuthenticationFilter.java
│ │ │ ├── JwtUtils.java
│ │ │ └── WebConfig.java
│ │ ├── controller/ # 控制器层
│ │ │ ├── AuthController.java
│ │ │ ├── RecordController.java
│ │ │ ├── SymptomController.java
│ │ │ ├── UploadController.java
│ │ │ ├── ExportController.java
│ │ │ └── VisitController.java
│ │ ├── dto/ # 数据传输对象
│ │ ├── entity/ # 实体类
│ │ ├── mapper/ # 数据访问层
│ │ └── service/ # 业务逻辑层
│ └── resources/
│ └── schema.sql # 数据库初始化脚本
│
├── frontend/ # 前端项目
│ ├── package.json
│ ├── index.html
│ └── src/
│ ├── main.js # 入口文件
│ ├── App.vue # 根组件
│ ├── router/ # 路由配置
│ ├── stores/ # Pinia 状态管理
│ ├── api/ # API 接口封装
│ │ ├── request.js # Axios 封装
│ │ ├── auth.js
│ │ ├── record.js
│ │ ├── symptom.js
│ │ └── visit.js
│ ├── components/ # 公共组件
│ │ ├── Timeline.vue # 历史时间线
│ │ └── RecordForm.vue # 记录表单
│ ├── views/ # 页面组件
│ │ ├── Login.vue # 登录注册
│ │ ├── MainLayout.vue # 主布局
│ │ ├── Home.vue # 首页
│ │ ├── Calendar.vue # 日历
│ │ ├── Statistics.vue # 统计
│ │ └── Settings.vue # 设置
│ └── styles/ # 样式文件
│
└── README.md
数据库设计
用户表 (user)
月经记录表 (period_record)
症状模板表 (symptom_template)
访问明细表 (visit_log)
访问统计表 (visit_stats)
总访问量表 (total_visits)
快速开始
环境要求
JDK 1.8+
Node.js 16+
MySQL 5.7+
Maven 3.6+
后端启动
创建数据库并导入初始化脚本：
CREATE DATABASE period_tracker DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
然后执行 backend/src/main/resources/schema.sql 初始化表结构。
修改数据库配置
application.yml：
spring:
datasource:
url: jdbc:mysql://localhost:3306/period_tracker?useSSL=false&serverTimezone=Asia/Shanghai
username: your_username
password: your_password
jwt:
secret: your-secret-key-must-be-at-least-256-bits-long-for-hs256
expiration: 604800000
upload:
path: /your/upload/path
url-prefix: /uploads
启动后端服务：
cd backend
mvn spring-boot:run
后端服务默认运行在 http://localhost:8088
前端启动
安装依赖：
cd frontend
npm install
启动开发服务器：
npm run dev
构建生产版本：
npm run build
前端服务默认运行在 http://localhost:5173
API 接口
认证相关
记录相关
症状相关
上传相关
访问统计相关
预设症状
身体症状 (Physical)
腹痛、腰酸、头痛、疲劳
乳房胀痛、食欲改变、失眠、痤疮
情绪症状 (Emotional)
情绪波动、焦虑、抑郁、易怒、哭泣
周期预测算法
系统采用加权平均算法预测下次月经日期：
最新一次记录权重：40%
倒数第二、三次各占：15%
其余记录平分：30%
同时计算周期规律性评分，帮助用户了解自身周期健康状况。
参考项目
UI 设计参考: keeleycenc/menstruation
许可证
MIT License
贡献指南
欢迎提交 Issue 和 Pull Request 参与项目开发。
评论