php react怎么结合起来开发项目？前后端分离实战技巧分享。

发布日期： 2025-10-21 阅读量： 作者： admin

好嘞，各位老铁，今天咱来聊聊我最近搞的这个“php react”项目，说起来也是一把辛酸泪，不过总算是跑通了，给大家伙儿分享分享。

我寻思着得搞个全栈项目练练手，前后端分离那种，感觉挺时髦的。后端我熟，PHP 嘛毕竟是“世界上最好的语言”（手动狗头）。前端，之前稍微摸过一点Vue，但总觉得差点意思，听说React现在挺火，那就它了！

说干就干，第一步当然是环境搭建。我用的是XAMPP，把PHP环境搞起来，然后用 create-react-app 快速搭建了一个React项目。这里要吐槽一句，npm是真的慢，我换了淘宝镜像才好一点。

接下来就是前后端联调了。我的想法是，React前端通过Axios发请求给PHP后端，PHP后端处理数据，再把结果返回给前端。这听起来很简单，但实际操作起来坑不少。

是跨域问题。前端跑在3000端口，后端跑在80端口，典型的跨域。解决办法也简单，PHP后端加个header头：


<?php
header("Access-Control-Allow-Origin: ");
// ... 你的代码
?>

这样就允许所有域的请求了，简单粗暴。

然后是数据传输格式。一开始我用的是 form-data 格式，结果后端收不到数据，搞了半天才发现，React默认用的是 JSON 格式，PHP需要用 json_decode(file_get_contents('php://input'), true) 来解析。

再就是路由问题。我想实现一个简单的登录功能，前端发请求到 `/api/login`，后端接收请求并处理。但是，XAMPP默认的 `.htaccess` 文件配置有问题，导致所有请求都指向了 `*`。我改了半天 `.htaccess` 文件，才把路由搞定。

前端代码大概是这样：


import axios from 'axios';
const login = async (username, password) => {
const response = await *('/api/login', {
username: username,
password: password

return *;

后端PHP代码大概是这样：


<?php
header("Access-Control-Allow-Origin: ");
header('Content-Type: application/json');
$method = $_SERVER['REQUEST_METHOD'];
$uri = $_SERVER['REQUEST_URI'];
if ($method === 'POST' && $uri === '/api/login') {
$data = json_decode(file_get_contents('php://input'), true);
$username = $data['username'];
$password = $data['password'];
// 验证用户名密码（这里省略）
if ($username === 'admin' && $password === '123456') {
echo json_encode(['status' => 'success', 'message' => '登录成功']);
} else {
echo json_encode(['status' => 'error', 'message' => '用户名或密码错误']);

} else {
http_response_code(404);
echo json_encode(['status' => 'error', 'message' => '找不到页面']);

?>

这个“php react”项目虽然简单，但也让我踩了不少坑，学到了不少东西。尤其是对前后端分离的理解更深了，也体会到了全栈开发的乐趣。以后有机会，再搞点更复杂的项目玩玩！

跨域是前后端分离绕不开的问题，要熟悉各种解决方案。
前后端数据传输格式要统一，推荐使用 JSON。
路由配置要搞清楚，否则请求会出错。

好了，今天的分享就到这里，希望对大家有所帮助！

上一篇: 网站进行优化的方法有哪些？内行高手分享实战技巧！

下一篇: php播放m3u8怎么实现？小白跟着这几步轻松搞定！

php react怎么结合起来开发项目？前后端分离实战技巧分享。

随便看看