在这篇文章中，我们将学习如何将 Lithe 框架与 React 库集成，重点介绍 Lithe 如何与前端库完美集成。除了非常适合构建 API 之外，Lithe 还可以轻松访问应用程序的资源，高效配置 CORS（跨源资源共享）以确保您的应用程序安全有效地通信。
首先，如果尚未安装 Lithe，请安装。在终端中运行以下命令：
composer create-project lithephp/lithephp nome-do-projeto cd nome-do-projeto
然后在您的 Lithe 项目中创建一个新的 React 项目。运行：
npx create-react-app frontend cd frontend
要在 Lithe 项目中使用 CORS 中间件，您需要安装 lithemod/cors 包。运行以下命令：
composer require lithemod/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']));
在您的 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();
使用以下命令启动 Lithe 服务器：
php line serve
访问 http://localhost:8000/api/data 确保 JSON 正确返回。
打开 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>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;
要启动 React 开发服务器，请运行：
composer create-project lithephp/lithephp nome-do-projeto cd nome-do-projeto
在浏览器中访问 http://localhost:3000。您应该看到消息“Hello from Lithe！”以及 API 返回的项目列表。
至此，您已成功将 Lithe 与 React 集成，并配置 CORS 以仅允许 React 应用程序访问后端资源或根据需要允许多个源。现在您可以根据需要扩展您的应用程序。
欢迎在评论中分享您的经验和问题！
以上是使用 Lithe 将 PHP 与 React 集成的详细内容。更多信息请关注PHP中文网其他相关文章！
