Mengintegrasikan PHP dengan React Menggunakan Lithe

Dalam siaran ini, kita akan mempelajari cara menyepadukan rangka kerja Lithe dengan pustaka React, menyerlahkan cara Lithe menyepadukan dengan lancar dengan perpustakaan bahagian hadapan. Selain menjadi sangat baik untuk membina API, Lithe memudahkan untuk mengakses sumber aplikasi anda dengan mengkonfigurasi CORS (Perkongsian Sumber Silang Asal) dengan cekap untuk memastikan aplikasi anda berkomunikasi dengan selamat dan berkesan.

Langkah 1: Sediakan Persekitaran

1. Memasang Lithe

Mula-mula, pasang Lithe jika anda belum melakukannya. Jalankan arahan berikut dalam terminal:

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

2. Memasang React

Seterusnya, buat projek React baharu dalam projek Lithe anda. Lari:

npx create-react-app frontend
cd frontend

Langkah 2: Memasang dan Mengkonfigurasi CORS

1. Memasang Modul CORS

Untuk menggunakan perisian tengah CORS dalam projek Lithe anda, anda perlu memasang pakej lithemod/cors. Jalankan arahan berikut:

composer require lithemod/cors

2. Menggunakan CORS Middleware

Selepas pemasangan, anda perlu mengkonfigurasi perisian tengah CORS dalam aplikasi Lithe anda. Buka fail utama src/App.php dan tambahkan kod berikut:

Jika anda mahu membenarkan berbilang asal mengakses API anda, konfigurasikan CORS seperti berikut:

use Lithe\Middleware\Configuration\cors;

$app = new \Lithe\App;

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

$app->listen();

Sebaliknya, jika anda hanya mahu aplikasi React anda menggunakan API, gunakan konfigurasi berikut:

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

Langkah 3: Mengkonfigurasi Bahagian Belakang dengan Lithe

1. Mencipta Laluan API

Dalam projek Lithe anda, cipta penghala baharu untuk menyediakan data kepada React. Buat fail laluan, seperti 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);
});

Selepas menentukan fail laluan, anda perlu menambah penghala pada aplikasi Lithe anda. Buka fail utama src/App.php sekali lagi dan tambah kod berikut sebelum memanggil kaedah dengar:

// ...

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

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

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

// ...

Fail src/App.php akan kelihatan seperti ini:

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. Menguji Laluan

Mulakan pelayan Lithe dengan arahan berikut:

php line serve

Akses http://localhost:8000/api/data untuk memastikan JSON dikembalikan dengan betul.

Langkah 4: Mengkonfigurasi Frontend dengan React

1. Menggunakan API dalam React

Buka fail src/App.js dalam projek React anda dan gantikan kandungannya dengan:

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. Memulakan Pelayan React

Untuk memulakan pelayan pembangunan React, jalankan:

npm start

Langkah 5: Mengesahkan Integrasi

Akses http://localhost:3000 dalam penyemak imbas anda. Anda sepatutnya melihat mesej "Hello daripada Lithe!" dan senarai item yang dikembalikan oleh API.

Pertimbangan Akhir

Dengan ini, anda telah berjaya menyepadukan Lithe dengan React dan mengkonfigurasikan CORS untuk membenarkan hanya aplikasi React mengakses sumber bahagian belakang atau membenarkan berbilang asal seperti yang diperlukan. Kini anda boleh mengembangkan aplikasi anda seperti yang dikehendaki.

Jangan ragu untuk berkongsi pengalaman dan soalan anda dalam ulasan!

Atas ialah kandungan terperinci Mengintegrasikan PHP dengan React Menggunakan Lithe. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!