随着科技的不断发展，陪诊小程序作为医患沟通的新工具逐渐成为关注焦点。本文将带领你通过使用React和Node.js技术栈，构建一个功能强大且用户友好的陪诊小程序，实现医患互动的便捷和高效。
1. 准备工作
确保你的开发环境中已安装了Node.js和npm。在终端中执行以下命令初始化项目：
npx create-react-app patient-companion-app
cd patient-companion-app
npm install express body-parser
2. 后端开发
创建一个名为 server.js 的后端文件，使用Express和body-parser搭建服务器：
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3001;app.use(bodyParser.json());app.post('/api/consult', (req, res) => {const symptoms = req.body.symptoms;// 在实际应用中，这里应该有一个智能导诊系统的算法来匹配医生和科室// 模拟返回医生信息const doctorInfo = {name: 'Dr. Smith',specialty: 'Internal Medicine',contact: 'dr.smith@example.com',};res.json(doctorInfo);
});app.listen(port, () => {console.log(`陪诊小程序后端正在监听端口 ${port}`);
});
3. 前端开发
使用React创建一个简单的陪诊小程序前端。替换 src/App.js 文件的内容：
import React, { useState } from 'react';
import './App.css';function App() {const [symptoms, setSymptoms] = useState('');const [doctorInfo, setDoctorInfo] = useState(null);const consultDoctor = async () => {try {const response = await fetch('http://localhost:3001/api/consult', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({ symptoms }),});const data = await response.json();setDoctorInfo(data);} catch (error) {console.error('Error consulting doctor:', error);}};return (<div className="App"><h1>陪诊小程序</h1><form><label htmlFor="symptoms">输入症状：</label><inputtype="text"id="symptoms"name="symptoms"value={symptoms}onChange={(e) => setSymptoms(e.target.value)}required/><button type="button" onClick={consultDoctor}>咨询医生</button></form>{doctorInfo && (<div className="doctor-info"><h3>医生信息：</h3><p>姓名：{doctorInfo.name}</p><p>专业：{doctorInfo.specialty}</p><p>联系方式：{doctorInfo.contact}</p></div>)}</div>);
}export default App;
4. 运行应用
在终端中分别运行前端和后端：
# 在项目根目录下运行前端
npm start# 在项目根目录下运行后端
node server.js
打开浏览器，访问 http://localhost:3000/，你将看到一个交互式的陪诊小程序。用户可以输入症状，点击按钮咨询医生，并显示医生的相关信息。
这个示例演示了如何使用React和Node.js构建一个实用的陪诊小程序，通过前后端分离的架构，实现了医患沟通的高效和便捷。在实际开发中，你可以进一步扩展功能，优化用户体验，加强安全性，以满足更多医疗场景的需求。
