Lithe를 사용하여 PHP와 React 통합-PHP 튜토리얼-php.cn

Lithe를 사용하여 PHP와 React 통합

Susan Sarandon

풀어 주다： 2024-10-25 02:17:02

원래의

988명이 탐색했습니다.

Integrating PHP with React Using Lithe

이 게시물에서는 Lithe 프레임워크를 React 라이브러리와 통합하는 방법을 알아보고 Lithe가 프런트엔드 라이브러리와 원활하게 통합되는 방법을 강조합니다. Lithe는 API 구축에 탁월할 뿐만 아니라 CORS(Cross-Origin Resource Sharing)를 효율적으로 구성하여 애플리케이션이 안전하고 효과적으로 통신할 수 있도록 함으로써 애플리케이션 리소스에 쉽게 액세스할 수 있게 해줍니다.

1단계: 환경 설정

1. Lithe 설치

아직 설치하지 않았다면 먼저 Lithe를 설치하세요. 터미널에서 다음 명령을 실행하세요:

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

로그인 후 복사

2. 리액트 설치

다음으로 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

로그인 후 복사

JSON이 올바르게 반환되는지 확인하려면 http://localhost:8000/api/data에 액세스하세요.

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;

로그인 후 복사