小白从零开始做多模态新生儿疼痛评估系统｜第九篇：前后端联调！让静态页面“活”起来

lmeshy

489人浏览 · 2026-04-14 18:34:37

lmeshy · 2026-04-14 18:34:37 发布

哈喽大家好～上一篇我们放弃了复杂的IDEA Python配置，用CMD命令行一键跑起了Python后端，成功启动了API服务，拿到了可访问的接口地址。

这一篇就是最关键的一步——前后端联调！核心任务很简单：把我们之前写的3个静态前端页面（监控终端、患者列表、患儿详情），对接后端API，从“静态展示假数据”变成“动态调用真实数据”，真正实现数据互通～

全程小白友好，所有JS代码我都已经写好，你只需要复制粘贴、简单检查，就能完成联调，话不多说，直接上实操！

联调前提（必看！）

在开始之前，请务必确认以下2点，否则会联调失败：

✅ 后端服务已启动：CMD中运行 python main.py，能看到“Uvicorn running on http://0.0.0.0:8000”
✅ 后端验证正常：浏览器访问 http://localhost:8000，能看到 {"message":"新生儿疼痛评估系统运行中","status":"ok"}

如果后端没启动、启动报错，先回去看第八篇，解决后端问题再继续哦！

本次联调三大核心任务

我们要完成3个页面的对接，优先级全部拉满，每一个都关乎系统正常使用，逐个突破即可：

任务	说明	优先级
1. 床位列表对接	监控终端页面，显示后端真实的床位、患者数据	⭐⭐⭐ 最高
2. 患者信息对接	患者列表、患儿详情页，显示真实的患者基础信息	⭐⭐⭐ 最高
3. 疼痛评估调用	点击“疼痛评估”按钮，调用后端API，返回真实评估结果	⭐⭐⭐ 最高

实操开始：逐个页面对接（代码直接复制）

所有页面的对接逻辑都是：复制JS代码 → 粘贴到对应页面的<script>标签中 → 检查页面元素ID → 打开页面测试，全程不用手动写一行代码！

这是我的页面，下面只列举部分页面的代码

自己的页面可以像下图一样问ai

页面1：实时监控.html

这个页面是医护人员最常用的监控页面，需要实时显示所有床位的状态、患者信息，支持查看详情和发起评估，对接步骤如下：

打开IDEA，找到你写的 监控终端.html 文件
找到页面中的 <script> 标签（如果没有，就在页面末尾、</body> 前面新增一个 <script></script>）
将下面的JS代码，完整复制粘贴到 <script> 标签内部

const API_BASE = 'http://localhost:8000';

// 加载床位实时状态 async function loadBedsStatus() { try { const response = await fetch(`${API_BASE}/api/beds`); const result = await response.json();    if (result.success) { renderBedsGrid(result.data); } } catch (error) { console.error('加载失败:', error); } }

function renderBedsGrid(beds) { const container = document.getElementById('beds-grid'); if (!container) return;    container.innerHTML = beds.map(bed => ` <div class="bed-card ${bed.status === 'occupied' ? 'occupied' : 'empty'}" style="border-left: 4px solid ${getPainColor(bed.pain_level)}"> <div class="bed-number">${bed.bed_number}</div> <div class="patient-name">${bed.patient_name || '空闲'}</div> <div class="pain-status">${bed.pain_level || '--'}</div> <div class="pain-score">评分: ${bed.pain_score !== null ? bed.pain_score : '--'}</div> <button onclick="quickAssess(${bed.id}, ${bed.patient_id || 0})" ${!bed.patient_id ? 'disabled' : ''}> 快速评估 </button> </div> `).join(''); }

function getPainColor(level) { switch(level) { case '重度疼痛': return '#e74c3c'; case '中度疼痛': return '#f39c12'; case '轻度疼痛': return '#f1c40f'; default: return '#2ecc71'; } }

async function quickAssess(bedId, patientId) { if (!patientId) return alert('该床位暂无患者');    const formData = new URLSearchParams(); formData.append('patient_id', patientId); formData.append('bed_id', bedId); formData.append('nurse_notes', prompt('观察记录:', ''));    const response = await fetch(`${API_BASE}/api/assess`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: formData });    const result = await response.json(); if (result.success) { alert(`评估结果: ${result.pain_level} (${result.pain_score}分)`); loadBedsStatus(); // 刷新 } }

document.addEventListener('DOMContentLoaded', loadBedsStatus); setInterval(loadBedsStatus, 10000); // 每10秒刷新

页面2：患者列表.html（显示所有患者信息）

该页面用于展示所有住院患者的基础信息，支持点击查看详情、发起疼痛评估，对接步骤和上面一致：

打开 IDEA 中的 患者列表.html
找到 <script> 标签（无则新增）
复制粘贴下面的JS代码

const API_BASE = 'http://localhost:8000';

async function loadPatients() { try { const response = await fetch(`${API_BASE}/api/patients`); const result = await response.json();    if (result.success) { renderPatientTable(result.data); } } catch (error) { console.error('加载失败:', error); } }

function renderPatientTable(patients) { const tbody = document.getElementById('patient-tbody'); if (!tbody) return;    tbody.innerHTML = patients.map(p => ` <tr> <td>${p.name}</td> <td>${p.gender || '--'}</td> <td>${p.gestational_weeks || '--'}周</td> <td>${p.bed_number || '未分配'}</td> <td> <button onclick="viewDetail(${p.id})">详情</button> <button onclick="startAssess(${p.id})">评估</button> </td> </tr> `).join(''); }

function viewDetail(id) { window.location.href = `患儿详情.html?id=${id}`; }

async function startAssess(patientId) { // 获取床位 const bedsRes = await fetch(`${API_BASE}/api/beds`); const beds = await bedsRes.json(); const bed = beds.data.find(b => b.patient_id === patientId);    if (!bed) return alert('未找到床位');    const formData = new URLSearchParams(); formData.append('patient_id', patientId); formData.append('bed_id', bed.id); formData.append('nurse_notes', prompt('记录:', ''));    const res = await fetch(`${API_BASE}/api/assess`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: formData });    const result = await res.json(); if (result.success) { alert(`${result.pain_level} (${result.pain_score}分)`); loadPatients(); } }

document.addEventListener('DOMContentLoaded', loadPatients);

📋 联调检查清单（逐一核对，避免踩坑）

代码粘贴完成后，对照下面的清单逐一检查，确保所有配置都正确：

页面	必须存在的元素ID	检查要点
监控终端.html	beds-tbody	表格tbody的ID正确，无拼写错误
患者列表.html	patients-container	患者卡片容器ID正确，能容纳动态渲染的卡片
患儿详情.html	patient-name、patient-gender、patient-birth、patient-weeks、patient-weight、patient-bed、assessment-history	所有ID齐全，无遗漏、无拼写错误

所有代码都粘贴、检查完成后，按照下面的步骤操作，测试联调结果：

确认后端已启动：打开CMD，确保后端服务在运行（不要关闭CMD窗口）
打开 IDEA，找到 监控终端.html
启动页面：用 IDEA 内置浏览器，或者右键选择“Open with Live Server”打开页面
查看效果：
1. 如果页面显示真实的床位数据（和数据库中一致），说明床位列表对接成功
2. 点击“查看详情”，能跳转到患儿详情页并显示对应患者信息，说明患者详情对接成功
3. 点击“疼痛评估”，输入观察记录后，能弹出评估结果，说明评估接口调用成功
检查控制台：按 F12 打开浏览器开发者工具，切换到“Console”（控制台），如果没有红色报错，说明联调无问题；如果有报错，对照下面的报错解决方法排查

正确打开控制台的方法：

方法1：直接按键盘

按 F12 键（或者 Fn + F12）

方法2：右键检查

在页面空白处右键 → 选择检查或 Inspect

方法3：浏览器菜单

Chrome/Edge：右上角三个点 → 更多工具 → 开发者工具

浏览器右边或底部会出现一个面板，有多个标签：点击控制台
Console 标签里输入：

fetch('http://localhost:8000/api/patients')
.then(res => res.json())
.then(data => console.log(data))

按回车执行

❌ 常见联调报错及解决方法（小白必看）

联调过程中可能会遇到以下报错，不用慌，对照解决方案逐一排查即可：

报错：Cannot read properties of null (reading 'innerHTML')
1. 原因：页面中缺少对应的元素ID（比如没加 beds-tbody、patients-container）
2. 解决：回到对应页面，添加缺失的ID，确保和JS代码中的ID完全一致（区分大小写）
报错：Failed to fetch
1. 原因：后端服务未启动，或者API地址错误
2. 解决：检查CMD中的后端是否在运行，确保JS代码中 API_BASE 是 http://localhost:8000（和后端端口一致）
报错：result.success is undefined
1. 原因：后端接口返回格式异常，可能是数据库连接失败
2. 解决：检查CMD后端日志，确认数据库配置正确（database.py中的密码、数据库名），重启后端服务
页面无数据，但控制台无报错
1. 原因：数据库中没有床位、患者数据
2. 解决：打开Navicat，给beds、patients表添加几条测试数据，刷新页面即可