大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

# React+PHP+MySQL 全栈开发样板项目

本项目是一个完整的全栈 Web 开发示例，前端使用 React，后端采用 PHP，数据层基于 MySQL。

📁 项目结构

.
├── frontend/                 # React 前端项目
│   ├── public/
│   │   └── index.html       # HTML 模板
│   ├── src/
│   │   ├── components/      # React 组件
│   │   │   ├── Header.js    # 头部导航组件
│   │   │   ├── Login.js     # 登录表单组件
│   │   │   └── UserList.js  # 用户列表组件
│   │   ├── services/        # API 服务
│   │   │   └── api.js       # HTTP 请求封装
│   │   ├── App.js           # 主应用组件
│   │   └── index.js         # 应用入口
│   └── package.json         # 前端依赖配置
│
├── backend/                  # PHP 后端项目
│   ├── api/
│   │   ├── auth.php         # 认证 API（登录/注册）
│   │   └── user.php         # 用户管理 API（CRUD）
│   ├── config/
│   │   ├── database.php     # 数据库连接配置
│   │   └── init.sql         # 数据库初始化脚本
│   ├── index.php            # 后端入口文件
│   └── start-server.php     # 服务器启动脚本
│
└── README.md                # 项目说明文档

🚀 快速开始

环境要求

• Node.js: v18+ (前端)
• PHP: v7.4+ (后端)
• MySQL: v5.7+ 或 MariaDB
• npm: v6+ (Node 包管理器)

1. 安装前端依赖

cd frontend npm install 

2. 配置数据库

方式一：使用 MySQL 命令行

# 登录 MySQL mysql -u root -p # 执行初始化脚本 source backend/config/init.sql 

方式二：使用 phpMyAdmin

1. 打开 phpMyAdmin
2. 导入 backend/config/init.sql 文件

3. 启动后端服务

# 在项目根目录执行 php -S localhost:8000 -t backend 

或者使用启动脚本：

php backend/start-server.php 

4. 启动前端服务

cd frontend npm start 

前端服务将在 http://localhost:3000 运行

🔧 配置说明

后端数据库配置

编辑 backend/config/database.php 修改数据库连接信息：

$host = 'localhost'; $dbname = 'react_php_mysql'; $username = 'root'; $password = ''; // 你的 MySQL 密码 

前端 API 配置

编辑 frontend/src/services/api.js 修改 API 地址：

const API_BASE_URL = 'http://localhost:8000/api'; 

📝 API 接口文档

认证接口 /api/auth.php

用户登录

• 方法: POST
• 参数:

   { "action": "login", "username": "admin", "password": "admin123" } 

• 响应:

   { "status": "success", "user": { "id": 1, "username": "admin" } } 

用户注册

• 方法: POST
• 参数:

   { "action": "register", "username": "newuser", "password": "password123", "email": "" } 

用户管理接口 /api/user.php

获取用户列表

• 方法: GET
• 响应:

   { "status": "success", "users": [ {"id": 1, "username": "admin", "email": ""}, {"id": 2, "username": "user1", "email": ""} ] } 

创建用户

• 方法: POST
• 参数:

   { "action": "create", "username": "testuser", "email": "" } 

更新用户

• 方法: POST
• 参数:

   { "action": "update", "id": 1, "username": "newname", "email": "" } 

删除用户

• 方法: POST
• 参数:

   { "action": "delete", "id": 1 } 

🎨 功能特性

前端功能

• ✅ React 18 函数组件 + Hooks
• ✅ 组件化开发模式
• ✅ 状态管理（useState, useEffect）
• ✅ 用户登录/登出
• ✅ 用户列表展示
• ✅ 添加/编辑/删除用户
• ✅ 响应式设计
• ✅ 现代化 UI 界面

后端功能

• ✅ RESTful API 设计
• ✅ PDO 数据库操作
• ✅ 预处理语句防止 SQL 注入
• ✅ 密码加密存储（bcrypt）
• ✅ CORS 跨域支持
• ✅ 事务处理
• ✅ 错误处理与日志记录

安全特性

• ✅ SQL 注入防护（预处理语句）
• ✅ 密码哈希存储
• ✅ CORS 跨域控制
• ✅ 输入验证与过滤
• ✅ HTTPS 支持（生产环境）

🐛 常见问题

1. 前端无法连接后端

原因: CORS 跨域问题或后端服务未启动

解决方案:

1. 确保后端服务已启动：php -S localhost:8000 -t backend
2. 检查 API 地址配置是否正确
3. 查看浏览器控制台错误信息

2. 数据库连接失败

原因: 数据库配置错误或 MySQL 服务未启动

解决方案:

1. 检查 MySQL 服务是否运行
2. 验证 backend/config/database.php 中的配置
3. 确认数据库已创建并导入表结构

3. 登录失败

原因: 用户名或密码错误

解决方案:

1. 使用默认账号：admin / admin123
2. 检查数据库中是否存在该用户
3. 查看后端日志排查错误

📚 学习资源

• React 官方文档
• PHP 官方文档
• MySQL 官方文档
• PDO 使用指南

📄 许可证

MIT License

---

项目来源: React+PHP+MySQL 全栈开发样板项目实战