将PHP嵌入React应用：使用php-express的正确姿势-php教程-PHP中文网

将PHP嵌入React应用：使用php-express的正确姿势

花韻仙語

发布： 2025-10-28 13:25:01

原创

277人浏览过

将PHP嵌入React应用：使用php-express的正确姿势

本文旨在阐明为何不能直接在React应用中使用`php-express`，并提供一种可行的解决方案，即通过Node.js的Express框架搭建一个HTTP服务器，利用`php-express`处理PHP代码，然后React应用向该服务器发起请求。同时，也建议在没有特殊需求的情况下，优先考虑使用专门的PHP服务器（如Nginx）。 `php-express`是一个Express中间件，旨在与Express框架配合使用。React是一个用于构建客户端应用程序的JavaScript框架。这意味着你不能直接在React应用中使用`php-express`，原因如下： * React不是Express。React主要负责前端界面的渲染和交互，而Express用于构建后端的HTTP服务器。 * 你不能向客户端发起HTTP请求。HTTP请求通常是从客户端发送到服务器，而不是反过来。 **正确的做法：构建一个基于Express的PHP服务器** 要实现React应用与PHP代码的交互，一个可行的方案是创建一个独立的HTTP服务器，该服务器使用Express框架和`php-express`中间件来处理PHP代码。React应用可以通过HTTP请求（例如使用`fetch`或`axios`）与该服务器通信。 **示例代码：Express服务器配置** 首先，确保你已经安装了Node.js和npm。然后，创建一个新的项目目录，并执行以下命令初始化项目： ```bash npm init -y

接下来，安装必要的依赖：

npm install express php-express cors

登录后复制

其中，express是Express框架，php-express是PHP中间件，cors用于处理跨域请求（如果React应用和Express服务器运行在不同的域名或端口上）。

创建一个名为server.js的文件，并添加以下代码：

const express = require('express');
const path = require('path');
const phpExpress = require('php-express')({
  binPath: 'php' // 确保PHP可执行文件在系统PATH中
});
const cors = require('cors'); // 引入 cors

const app = express();
const port = 3001; // 选择一个合适的端口

// 使用 CORS 中间件，允许来自所有域的请求
app.use(cors());

// 设置视图目录
app.set('views', path.join(__dirname, 'views/php'));
app.engine('php', phpExpress.engine);
app.set('view engine', 'php');

// 路由配置，处理所有以 .php 结尾的请求
app.all(/.+\.php$/, phpExpress.router);

app.listen(port, () => {
  console.log(`PHP server listening at http://localhost:${port}`);
});

登录后复制

在项目根目录下创建一个名为 views 的文件夹，并在 views 文件夹下创建一个名为 php 的文件夹。将你的 PHP 文件（例如 file.php）放入 views/php 文件夹中。

React应用中的请求

立即学习“PHP免费学习笔记（深入）”；

现在，你可以从你的React应用向该服务器发起HTTP请求，例如：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('http://localhost:3001/file.php') // 替换为你的服务器地址和PHP文件路径
      .then(response => response.text()) // 获取文本响应
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      {data ? (
        <div dangerouslySetInnerHTML={{ __html: data }} />
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default MyComponent;

登录后复制

注意事项：

确保你的PHP可执行文件（php.exe或php）在系统PATH环境变量中，或者在phpExpress配置中指定正确的binPath。
如果React应用和Express服务器运行在不同的域名或端口上，你需要配置CORS以允许跨域请求。
在生产环境中，建议使用更安全的跨域策略，例如只允许来自特定域的请求。
dangerouslySetInnerHTML 可能会带来安全风险，请确保你信任从服务器接收的数据。在实际应用中，应该对从服务器获取的数据进行适当的转义和过滤，以防止XSS攻击。

总结

虽然不能直接在React应用中使用php-express，但可以通过构建一个独立的Express服务器来处理PHP代码，然后React应用通过HTTP请求与该服务器通信。这种方法可以实现React应用与PHP代码的集成。然而，在没有特殊需求的情况下，建议使用专门的PHP服务器（如Nginx）来运行PHP代码，这样可以获得更好的性能和安全性。

登录后复制

以上就是将PHP嵌入React应用：使用php-express的正确姿势的详细内容，更多请关注php中文网其它相关文章！