本文详解如何在 react + php 全栈应用中，基于 sessionstorage 存储的用户邮箱，安全、高效地从 mysql 查询对应接待员（receptionist）的姓名等信息，并在前端欢迎页动态显示。重点涵盖 useeffect 数据获取、php 预处理语句防注入及前后端数据结构统一。
本文详解如何在 react + php 全栈应用中，基于 sessionstorage 存储的用户邮箱，安全、高效地从 mysql 查询对应接待员（receptionist）的姓名等信息，并在前端欢迎页动态显示。重点涵盖 useeffect 数据获取、php 预处理语句防注入及前后端数据结构统一。
要在 React 前端准确显示当前登录用户的「姓名」（而非仅邮箱），关键在于：从前端传递邮箱 → 后端安全查询数据库 → 返回结构化用户数据 → 前端更新状态并渲染。以下是完整、安全、可落地的实现方案：
✅ 前端：使用 useEffect 触发异步请求并正确更新状态
import { useState, useEffect } from 'react';
import axios from 'axios';
const Dashboard = () => {
const [receptionist, setReceptionist] = useState({
email: sessionStorage.getItem('activeUser') || '',
name: ''
});
useEffect(() => {
// 确保有邮箱才发起请求
if (!receptionist.email) return;
axios
.post('http://localhost:8888/dbName/getReceptionist.php', {
email: receptionist.email // 显式传参，避免 JSON.stringify 潜在问题
}, {
headers: { 'Content-Type': 'application/json' }
})
.then((res) => {
if (Array.isArray(res.data) && res.data.length > 0) {
const user = res.data[0];
setReceptionist(prev => ({
...prev,
name: user.name || 'User',
email: user.email || prev.email
}));
} else {
console.warn('No user found for email:', receptionist.email);
setReceptionist(prev => ({ ...prev, name: 'Guest' }));
}
})
.catch((err) => {
console.error('Failed to fetch user data:', err);
setReceptionist(prev => ({ ...prev, name: 'Error' }));
});
}, [receptionist.email]); // 依赖邮箱变化，支持登录态更新
return (
<div className='page'>
<div className="leftPage"><Nav /></div>
<div className="middlePage">
<h1>Welcome, <span>{receptionist.name}</span></h1>
{/* 其余 JSX 结构保持不变 */}
</div>
<div className="rightPage"><AppointmentsCom /></div>
</div>
);
};
export default Dashboard;⚠️ 注意事项：
- 不要直接解构 name：原代码中 <span>{name}</span> 会报错，因 name 未声明 —— 应改为 {receptionist.name}；
- 添加空值防护：sessionStorage.getItem('activeUser') || '' 避免 null 导致请求异常；
- 依赖项精准控制：useEffect 的依赖数组写为 [receptionist.email]，确保邮箱变更时自动重载（如登出再登录）。
✅ 后端：使用预处理语句（Prepared Statement）防止 SQL 注入
<?php
include 'db_connection.php';
// 设置 CORS 头（生产环境请限制 Origin）
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');
header('Content-Type: application/json');
// 仅接受 POST 请求
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
http_response_code(405);
echo json_encode(['error' => 'Method not allowed']);
exit;
}
// 解析 JSON 请求体（注意：true → 关联数组）
$input = file_get_contents('php://input');
$data = json_decode($input, true);
if (!isset($data['email']) || !filter_var($data['email'], FILTER_VALIDATE_EMAIL)) {
http_response_code(400);
echo json_encode(['error' => 'Valid email required']);
exit;
}
$email = trim($data['email']);
// ✅ 安全查询：使用 mysqli 预处理语句
$stmt = $conn->prepare("SELECT id, name, email, phone FROM receptionists WHERE email = ?");
$stmt->bind_param("s", $email);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows > 0) {
$user = $result->fetch_assoc();
echo json_encode([$user]); // 返回单元素数组，与前端预期一致
} else {
http_response_code(404);
echo json_encode([]); // 返回空数组，便于前端统一判断
}
$stmt->close();
$conn->close();
?>? 安全要点：
- 绝不拼接 SQL：WHERE email = ? + bind_param 彻底杜绝注入风险；
- 邮箱校验：FILTER_VALIDATE_EMAIL 提前拦截非法输入；
- HTTP 状态码规范：400/404/405 明确反馈错误类型，利于前端调试；
- 字段显式声明：SELECT id, name, email... 避免 SELECT * 暴露敏感字段（如密码哈希）。
✅ 最佳实践总结
- 数据流向清晰：sessionStorage → React state → Axios POST → PHP query → JSON response → React update；
- 错误防御前置：前端空值检查 + 后端参数校验 + 数据库查询结果判空；
- 命名一致性：前后端字段名统一用 email/name（避免 activeUser 这类模糊键名）；
- 扩展友好：后续如需头像、角色等信息，只需在 SELECT 中追加字段，前端无需修改逻辑。
按此方案实施后，欢迎页将稳定显示 Welcome, Sarah（示例），且全程抵御常见 Web 攻击，具备生产可用性。
立即学习“前端免费学习笔记（深入）”；
