PHP mit React mithilfe von Lithe integrieren

In diesem Beitrag erfahren Sie, wie Sie das Lithe-Framework in die React-Bibliothek integrieren und wie Lithe perfekt in Frontend-Bibliotheken integriert werden kann. Lithe eignet sich nicht nur hervorragend zum Erstellen von APIs, sondern erleichtert auch den Zugriff auf die Ressourcen Ihrer Anwendung, indem es CORS (Cross-Origin Resource Sharing) effizient konfiguriert, um sicherzustellen, dass Ihre Anwendungen sicher und effektiv kommunizieren.

Schritt 1: Konfigurieren der Umgebung

1. Geschmeidige Installation

Installieren Sie zunächst Lithe, falls Sie dies noch nicht getan haben. Führen Sie im Terminal den folgenden Befehl aus:

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

2. React installieren

Erstellen Sie dann ein neues React-Projekt innerhalb Ihres Lithe-Projekts. Führen Sie aus:

npx create-react-app frontend
cd frontend

Schritt 2: CORS installieren und konfigurieren

1. Installation des CORS-Moduls

Um CORS-Middleware in Ihrem Lithe-Projekt verwenden zu können, müssen Sie das Paket lithemod/cors installieren. Führen Sie den folgenden Befehl aus:

composer require lithemod/cors

2. Verwendung der CORS-Middleware

Nach der Installation müssen Sie die CORS-Middleware in Ihrer Lithe-Anwendung konfigurieren. Öffnen Sie die Hauptdatei src/App.php und fügen Sie den folgenden Code hinzu:

Wenn Sie mehreren Quellen den Zugriff auf Ihre API ermöglichen möchten, konfigurieren Sie CORS wie folgt:

use Lithe\Middleware\Configuration\cors;

$app = new \Lithe\App;

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

$app->listen();

Wenn Sie andererseits möchten, dass nur Ihre React-Anwendung die API nutzt, verwenden Sie die folgende Konfiguration:

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

Schritt 3: Konfigurieren des Backends mit Lithe

1. Erstellen einer API-Route

Erstellen Sie in Ihrem Lithe-Projekt einen neuen Router, um Daten für React bereitzustellen. Erstellen Sie eine Routendatei, z. B. 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);
});

Nachdem Sie die Routendatei definiert haben, müssen Sie den Router in Ihrer Lithe-Anwendung hinzufügen. Öffnen Sie die Hauptdatei src/App.php erneut und fügen Sie den folgenden Code hinzu, bevor Sie die Listen-Methode aufrufen:

// ...

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

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

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

// ...

Die Datei src/App.php würde so aussehen:

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. Testen der Route

Starten Sie den Lithe-Server mit dem folgenden Befehl:

php line serve

Besuchen Sie http://localhost:8000/api/data, um sicherzustellen, dass JSON korrekt zurückgegeben wird.

Schritt 4: Konfigurieren des Frontends mit React

1. Nutzung der API in React

Öffnen Sie die Datei src/App.js in Ihrem React-Projekt und ersetzen Sie den Inhalt durch:

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. React Server starten

Um den React-Entwicklungsserver zu starten, führen Sie Folgendes aus:

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

Schritt 5: Überprüfung der Integration

Gehen Sie in Ihrem Browser zu http://localhost:3000. Sie sollten die Meldung „Hallo von Lithe!“ sehen. und eine Liste der von der API zurückgegebenen Elemente.

Abschließende Überlegungen

Damit haben Sie Lithe erfolgreich in React integriert und CORS so konfiguriert, dass nur die React-Anwendung auf Backend-Ressourcen zugreifen kann oder bei Bedarf mehrere Quellen zugelassen werden. Jetzt können Sie Ihre Bewerbung beliebig erweitern.

Teilen Sie Ihre Erfahrungen und Fragen gerne in den Kommentaren!

Das obige ist der detaillierte Inhalt vonPHP mit React mithilfe von Lithe integrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!