使用 Lithe 将 PHP 与 React 集成

在这篇文章中，我们将学习如何将 Lithe 框架与 React 库集成，重点介绍 Lithe 如何与前端库无缝集成。除了非常适合构建 API 之外，Lithe 还可以通过高效配置 CORS（跨源资源共享）轻松访问应用程序的资源，以确保您的应用程序安全有效地通信。

第 1 步：设置环境

1. 安装 Lithe

首先，如果您还没有安装 Lithe，请安装它。在终端中运行以下命令：

composer create-project lithephp/lithephp project-name
cd project-name

2.安装React

接下来，在 Lithe 项目中创建一个新的 React 项目。运行：

npx create-react-app frontend
cd frontend

步骤 2：安装和配置 CORS

1. 安装CORS模块

要在 Lithe 项目中使用 CORS 中间件，您需要安装 lithemod/cors 包。运行以下命令：

composer require lithemod/cors

2. 使用CORS中间件

安装后，您需要在 Lithe 应用程序中配置 CORS 中间件。打开主文件 src/App.php 并添加以下代码：

如果您想允许多个来源访问您的API，请按如下方式配置CORS：

use Lithe\Middleware\Configuration\cors;

$app = new \Lithe\App;

$app->use(cors(['origins' => '*']));

$app->listen();

另一方面，如果您只想让 React 应用程序使用 API，请使用以下配置：

$app->use(cors(['origins' => 'http://localhost:3000']));

第 3 步：使用 Lithe 配置后端

1. 创建API路由

在您的 Lithe 项目中，创建一个新路由器来向 React 提供数据。创建路由文件，如 src/routes/api.php:

use Lithe\Http\{Request, Response};
use function Lithe\Orbis\Http\Router\{get};

get('/data', function(Request $req, Response $res) {
    $data = [
        'message' => 'Hello from Lithe!',
        'items' => [1, 2, 3, 4, 5],
    ];
    return $res->json($data);
});

定义路由文件后，您需要将路由器添加到您的 Lithe 应用程序中。再次打开主文件src/App.php，在调用listen方法之前添加以下代码：

// ...

use function Lithe\Orbis\Http\Router\router;

$apiRouter = router(__DIR__ . '/routes/api');

$app->use('/api', $apiRouter);

// ...

src/App.php 文件将如下所示：

use Lithe\Middleware\Configuration\cors;
use function Lithe\Orbis\Http\Router\router;

$app = new \Lithe\App;

$app->use(cors(['origins' => '*']));

$apiRouter = router(__DIR__ . '/routes/api');

$app->use('/api', $apiRouter);

$app->listen();

2. 测试路由

使用以下命令启动 Lithe 服务器：

php line serve

访问http://localhost:8000/api/data，确保JSON正确返回。

第 4 步：使用 React 配置前端

1. 在 React 中使用 API

打开 React 项目中的 src/App.js 文件并将其内容替换为：

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

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

    useEffect(() => {
        fetch('http://localhost:8000/api/data')
            .then(response => response.json())
            .then(data => setData(data))
            .catch(error => console.error('Error fetching data:', error));
    }, []);

    return (
        <div>
            <h1>Integrating PHP with React using Lithe</h1>
            {data ? (
                <div>
                    <p>{data.message}</p>
                    <ul>
                        {data.items.map((item, index) => (
                            <li key={index}>{item}</li>
                        ))}
                    </ul>
                </div>
            ) : (
                <p>Loading...</p>
            )}
        </div>
    );
}

export default App;

2. 启动React服务器

要启动 React 开发服务器，请运行：

npm start

第 5 步：验证集成

在浏览器中访问http://localhost:3000。您应该看到消息“Hello from Lithe！”以及 API 返回的项目列表。

最后的考虑因素

至此，您已成功将 Lithe 与 React 集成，并配置 CORS 以仅允许 React 应用程序访问后端资源或根据需要允许多个源。现在您可以根据需要扩展您的应用程序。

欢迎在评论中分享您的经验和问题！

以上是使用 Lithe 将 PHP 与 React 集成的详细内容。更多信息请关注PHP中文网其他相关文章！