乳腺癌预测项目接入 MySQL 数据库

2025-04-24

字数：936字 | 预计阅读时长：4分钟

我在做一个乳腺癌预测全栈项目，前后端完全分离，使用机器学习模型（Random Forest）进行预测。原始功能仅返回结果，无数据持久化，无法记录用户、无法查看历史。于是我决定为项目接入 MySQL 数据库，记录每一次预测的特征值与结果，并能在前端用户中心页面回显。

项目技术栈：Next.js + Flask + MySQL
本机开发环境：macOS 14.5，Apple M1 Pro，Python 环境通过 Anaconda 管理

🧩 步骤一：配置本地 MySQL

我本地已安装 MySQL（非 Homebrew 安装），验证方式如下：

1	mysql -u root -p

进入后创建数据库：

1 2	CREATE DATABASE breast_cancer; USE breast_cancer;

🛠️ 步骤二：设计数据表结构

用户表：

CREATE TABLE IF NOT EXISTS users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(50) NOT NULL UNIQUE,
  password VARCHAR(255) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

预测记录表：

CREATE TABLE IF NOT EXISTS predictions (
  id INT AUTO_INCREMENT PRIMARY KEY,
  user_id INT,
  features_json TEXT NOT NULL,
  result VARCHAR(20) NOT NULL,
  accuracy FLOAT NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (user_id) REFERENCES users(id)
);

20250424172900

我插入了一个测试用户：

1	INSERT INTO users (username, password) VALUES ('admin', '123456');

20250424172937

🧬 步骤三：后端 Flask 集成数据库逻辑

安装依赖：

1	pip install pymysql

在 `app.py` 中加入数据库写入逻辑：

✅ 写入预测结果：

conn = pymysql.connect(host='localhost', user='root', password='123456789', database='breast_cancer', charset='utf8mb4')
cursor = conn.cursor()
sql = "INSERT INTO predictions (user_id, features_json, result, accuracy) VALUES (%s, %s, %s, %s)"
cursor.execute(sql, (1, json.dumps(data), output, accuracy))
conn.commit()
cursor.close()
conn.close()

✅ 获取历史记录：

conn = pymysql.connect(
    host='localhost',
    user='root',
    password='123456789',
    database='breast_cancer',
    charset='utf8mb4',
    cursorclass=pymysql.cursors.DictCursor
)
with conn.cursor() as cursor:
    cursor.execute("SELECT id, features_json, result, accuracy, created_at FROM predictions WHERE user_id=%s ORDER BY created_at DESC", (1,))
    data = cursor.fetchall()
conn.close()
return jsonify(data)

📡 前端如何调用后端历史记录 API

为了解耦前后端，避免 CORS 问题，我在 Next.js 项目中采用了 API 路由中转方式 来请求 Flask 后端的 /history 接口。

📁 `frontend/src/services/api.ts`

封装 API 调用函数：

export const fetchPredictionHistory = async () => {
  const response = await fetch('/api/history');
  if (!response.ok) {
    throw new Error('获取历史记录失败');
  }
  return response.json();
};

📁 `frontend/src/app/api/history/route.ts`

export async function GET() {
  const res = await fetch('http://localhost:5001/history');
  const data = await res.json();
  return Response.json(data);
}

📌 调用链：

[前端页面 Profile.tsx]
   ⬇ fetch('/api/history')
[Next.js API 中转 route.ts]
   ⬇ fetch('http://localhost:5001/history')
[Flask 后端接口]
   ⬇ 查询数据库并返回 JSON

💻 步骤四：前端个人中心页面展示历史记录

在 /profile 页面中展示历史记录，使用 Ant Design List + Avatar，并将时间格式转换为 YYYY-MM-DD HH:mm:ss 中文风格：

time: new Date(item.created_at).toLocaleString('zh-CN', {
  hour12: false,
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
}).replace(/\//g, '-')

20250424173025

🎉 成果总结

✅ 所有预测记录已入库（包括时间、特征、结果）
✅ 前端展示历史记录 + 正确格式化时间与中文映射
✅ 数据安全存储，可拓展为“点击查看特征”或“再次发送至 AI 模型分析”

💡 下一步计划（可选拓展）

🔐 接入用户登录功能，实现用户与记录真正绑定
📊 可视化分析用户历史准确率变化趋势
🤖 基于历史记录的智能推荐或解释（结合本地 LLaMA2）

📁 项目结构参考

📁 frontend/
  └── src/
      ├── app/profile/         # 个人中心页面
      ├── services/api.ts      # API 请求封装
      └── app/api/history/     # Next.js API 路由中转

📁 backend/
  └── app.py                   # Flask 主入口，含模型调用与数据库逻辑

如果你喜欢这篇实战记录，可以点赞 / 收藏，也欢迎留言交流部署、模型接入、数据库优化等技术问题～ 💬💡

-------------本文结束感谢您的阅读-------------

本文作者： 金金
本文链接： http://example.com/2025/04/24/乳腺癌预测项目接入-MySQL-数据库/
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！