在這篇文章中，我們將學(xué)習(xí)如何將 Lithe 框架與 React 庫(kù)集成，重點(diǎn)介紹 Lithe 如何與前端庫(kù)完美集成。除了非常適合構(gòu)建 API 之外，Lithe 還可以輕松訪問(wèn)應(yīng)用程序的資源，高效配置 CORS（跨源資源共享）以確保您的應(yīng)用程序安全有效地通信。

步驟一：配置環(huán)境

1. 輕巧的安裝

首先，如果尚未安裝 Lithe，請(qǐng)安裝。在終端中運(yùn)行以下命令：

composer create-project lithephp/lithephp nome-do-projeto
cd nome-do-projeto

2.安裝React

然后在您的 Lithe 項(xiàng)目中創(chuàng)建一個(gè)新的 React 項(xiàng)目。運(yùn)行：

npx create-react-app frontend
cd frontend

步驟 2：安裝和配置 CORS

1. 安裝CORS模塊

要在 Lithe 項(xiàng)目中使用 CORS 中間件，您需要安裝 lithemod/cors 包。運(yùn)行以下命令：

composer require lithemod/cors

2. 使用CORS中間件

安裝后，您必須在 Lithe 應(yīng)用程序中配置 CORS 中間件。打開主文件 src/App.php 并添加以下代碼：

如果您想允許多個(gè)來(lái)源訪問(wèn)您的API，請(qǐng)按如下方式配置CORS：

use Lithe\Middleware\Configuration\cors;

$app = new \Lithe\App;

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

$app->listen();

另一方面，如果您只想讓 React 應(yīng)用程序使用 API，請(qǐng)使用以下配置：

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

第 3 步：使用 Lithe 配置后端

1. 創(chuàng)建API路由

在您的 Lithe 項(xiàng)目中，創(chuàng)建一個(gè)新路由器來(lái)向 React 提供數(shù)據(jù)。創(chuàng)建一個(gè)路由文件，如 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 應(yīng)用程序中添加路由器。再次打開主src/App.php文件，在調(diào)用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. 測(cè)試路由

使用以下命令啟動(dòng) Lithe 服務(wù)器：

php line serve

訪問(wèn) http://localhost:8000/api/data 確保 JSON 正確返回。

第 4 步：使用 React 配置前端

1. 在 React 中使用 API

打開 React 項(xiàng)目中的 src/App.js 文件并將內(nèi)容替換為：

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>Integrando o PHP com React usando Lithe</h1>
            {data ? (
                <div>
                    <p>{data.message}</p>
                    <ul>
                        {data.items.map((item, index) => (
                            <li key={index}>{item}</li>
                        ))}
                    </ul>
                </div>
            ) : (
                <p>Carregando...</p>
            )}
        </div>
    );
}

export default App;

2. 啟動(dòng)React服務(wù)器

要啟動(dòng) React 開發(fā)服務(wù)器，請(qǐng)運(yùn)行：

composer create-project lithephp/lithephp nome-do-projeto
cd nome-do-projeto

第 5 步：驗(yàn)證集成

在瀏覽器中訪問(wèn) http://localhost:3000。您應(yīng)該看到消息“Hello from Lithe！”以及 API 返回的項(xiàng)目列表。

最后的考慮因素

至此，您已成功將 Lithe 與 React 集成，并配置 CORS 以僅允許 React 應(yīng)用程序訪問(wèn)后端資源或根據(jù)需要允許多個(gè)源?，F(xiàn)在您可以根據(jù)需要擴(kuò)展您的應(yīng)用程序。

歡迎在評(píng)論中分享您的經(jīng)驗(yàn)和問(wèn)題！

以上是使用 Lithe 將 PHP 與 React 集成的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！