Mengintegrasikan PHP dengan React Menggunakan Lithe

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

Langkah 1: Mengkonfigurasi Persekitaran

1. Pemasangan Lithe

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

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

2. Memasang React

Kemudian 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 mesti mengkonfigurasi perisian tengah CORS dalam aplikasi Lithe anda. Buka fail utama src/App.php dan tambahkan kod berikut:

Jika anda ingin membenarkan berbilang sumber 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 mesti menambah penghala dalam aplikasi Lithe anda. Buka fail src/App.php utama 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

Lawati 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 id="Integrando-o-PHP-com-React-usando-Lithe">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. Memulakan Pelayan React

Untuk memulakan pelayan pembangunan React, jalankan:

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

Langkah 5: Mengesahkan Integrasi

Pergi ke 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 sumber mengikut keperluan. Kini anda boleh mengembangkan aplikasi anda mengikut kehendak anda.

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!