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 nahtlos 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: Einrichten der Umgebung

1. Lithe installieren

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 project-name
cd project-name

2. React installieren

Als nächstes erstellen Sie ein neues React-Projekt in Ihrem Lithe-Projekt. Führen Sie aus:

npx create-react-app frontend
cd frontend

Schritt 2: CORS installieren und konfigurieren

1. Installation des CORS-Moduls

Um die 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 Ursprüngen 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 zu 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 sieht folgendermaßen aus:

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

Greifen Sie auf http://localhost:8000/api/data zu, um sicherzustellen, dass der 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 ihren 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>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. Starten des React Servers

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

npm start

Schritt 5: Überprüfung der Integration

Greifen Sie in Ihrem Browser auf http://localhost:3000 zu. 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 Ursprünge zulässig sind. 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!