在這篇文章中，我們將學(xué)習(xí)如何將 Lithe 框架與 React 庫(kù)集成，重點(diǎn)介紹 Lithe 如何與前端庫(kù)無(wú)縫集成。除了非常適合建立 API 之外，Lithe 還可以透過(guò)高效配置 CORS（跨來(lái)源資源共享）輕鬆存取應(yīng)用程式的資源，以確保您的應(yīng)用程式安全有效地通訊。

第 1 步：設(shè)定環(huán)境

1. 安裝 Lithe

首先，如果您還沒(méi)有安裝 Lithe，請(qǐng)安裝它。在終端機(jī)中執(zhí)行以下命令：

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

2.安裝React

接下來(lái)，在 Lithe 專(zhuān)案中建立一個(gè)新的 React 專(zhuān)案。運(yùn)行：

npx create-react-app frontend
cd frontend

步驟 2：安裝和設(shè)定 CORS

1. 安裝CORS模組

要在 Lithe 專(zhuān)案中使用 CORS 中介軟體，您需要安裝 lithemod/cors 套件。執(zhí)行以下命令：

composer require lithemod/cors

2. 使用CORS中介軟體

安裝後，您需要在 Lithe 應(yīng)用程式中設(shè)定 CORS 中間件。開(kāi)啟主檔案 src/App.php 並加入以下程式碼：

如果您想要允許多個(gè)來(lái)源存取您的API，請(qǐng)如下設(shè)定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 設(shè)定後端

1. 建立API路由

在您的 Lithe 專(zhuān)案中，建立一個(gè)新路由器來(lái)向 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 應(yīng)用程式。再次開(kāi)啟主檔案src/App.php，在呼叫l(wèi)isten方法之前加入以下程式碼：

// ...

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 伺服器：

php line serve

造訪http://localhost:8000/api/data，確保JSON正確回傳。

第 4 步：使用 React 配置前端

1. 在 React 中使用 API

開(kāi)啟 React 專(zhuān)案中的 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>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. 啟動(dòng)React伺服器

要啟動(dòng) React 開(kāi)發(fā)伺服器，請(qǐng)執(zhí)行：

npm start

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

在瀏覽器中造訪http://localhost:3000。您應(yīng)該會(huì)看到訊息“Hello from Lithe！”以及 API 傳回的項(xiàng)目清單。

最後的考慮因素

至此，您已成功將 Lithe 與 React 集成，並配置 CORS 以?xún)H允許 React 應(yīng)用程式存取後端資源或根據(jù)需要允許多個(gè)來(lái)源?，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)文章！