Apakah inersia.js dan bagaimana menggunakannya dengan laravel dan vue/react?

Inertia.js berfungsi dengan Laravel dengan membenarkan pemaju membina spa menggunakan Vue atau bertindak balas sambil menjaga Laravel bertanggungjawab untuk penghalaan dan pemuatan halaman. 1. Laluan ditakrifkan dalam Laravel seperti biasa. 2. Pengawal mengembalikan inersia :: render () untuk menentukan komponen frontend mana yang dimuatkan. 3. Inersia meluluskan data sebagai prop ke komponen Vue atau React yang sepadan. 4. Rangka kerja frontend menjadikan UI tanpa memerlukan penghalaan sisi klien. 5. Data yang dikongsi seperti pengguna yang disahkan boleh diluluskan melalui middleware. 6. Susun atur boleh digunakan semula di halaman, menjadikannya cekap dan biasa bagi pemaju Laravel.

Inertia.js adalah penyelesaian front-end moden yang membolehkan anda membina aplikasi satu halaman (SPA) tanpa kerumitan kerangka spa penuh seperti Vue Router atau React Router. Ia berfungsi dengan membuat backend anda bertanggungjawab untuk penghalaan dan pemuatan halaman, sambil membiarkan pengendalian frontend anda memberikan rangka seperti Vue atau React.

Ini menjadikannya sesuai untuk pemaju yang menginginkan kelajuan dan interaktiviti spa tetapi lebih suka mengekalkan backend mereka dalam kawalan - terutamanya apabila menggunakan Laravel sebagai backend.

Bagaimana Inersia Berfungsi Dengan Laravel

Inersia menghubungkan backend Laravel anda ke kerangka frontend JavaScript. Daripada mengembalikan pandangan HTML tradisional dari pengawal anda, anda mengembalikan respons yang memberitahu Inersia yang komponen Vue atau React harus diberikan pada frontend.

Inilah cara ia berfungsi:

• Anda menentukan laluan di Laravel seperti biasa.
• Pengawal kembali Inertia::render('ComponentName', $props) dan bukannya pandangan bilah.
• Inersia memuat komponen frontend yang sepadan dan pas dalam data ( $props ) sebagai prop.

Contohnya:

 // Pengawal Laravel
Pertunjukan Fungsi Awam (Post $ Post)
{
    Kembali inersia :: render ('pos/persembahan', [
        'pos' => $ pos,
    ]);
}

Ini menjadikan logik backend anda bersih dan membolehkan anda menguruskan UI sepenuhnya dalam Vue atau bertindak balas.

Menyediakan inersia dengan laravel dan vue

Untuk menggunakan inersia dengan Laravel dan Vue, ikuti langkah -langkah asas ini:

1. Pasang Breeze Laravel (pilihan tetapi disyorkan)
   Laravel Breeze menyediakan perancah pengesahan dan termasuk pilihan persediaan inersia untuk VUE atau React.

2. Pasang pakej sisi pelayan inersia

    Komposer memerlukan inerstijs/inersia-laravel

3. Sediakan Frontend (contoh Vue) Apabila membuat projek Laravel baru, anda boleh memasukkan sokongan inersia dengan Vue menggunakan:

    Laravel baru my-app-jet

   Kemudian pilih inersia dan vue semasa persediaan.

4. Buat Komponen Halaman Anda
   Inersia menjangkakan struktur folder tertentu di frontend anda. Contohnya:

    /Resources/js/pages/post/show.vue

5. Kemas kini susun atur aplikasi
   Susun atur aplikasi utama biasanya ditakrifkan dalam komponen vue akar ( App.vue ). Inersia menjadikan halaman di dalam susun atur ini secara dinamik.

Menggunakan inersia dengan reaksi dan bukannya vue

Jika anda lebih selesa dengan React, persediaan adalah serupa:

• Pilih React semasa memasang Breeze Laravel atau memasang pakej inersia secara manual.
• Komponen halaman anda akan tinggal di /resources/js/Pages sama seperti dengan Vue, tetapi mereka akan menjadi fail .jsx .
• Pengendalian inersia memasang komponen React yang betul berdasarkan laluan.

Anda tidak perlu menyediakan Router React kerana inersia menggunakan sistem penghalaan Laravel.

Satu perkara yang perlu diperhatikan: Konteks beralih antara PHP dan JSX mungkin berasa sedikit berbeza daripada bekerja dengan templat Vue dan bilah.

Mengendalikan data dan susun atur yang dikongsi

Inersia menjadikannya mudah untuk berkongsi data di semua halaman menggunakan middleware. Sebagai contoh, jika anda ingin lulus pengguna yang disahkan ke setiap halaman:

 // HandleInertionrequests.php
Saham Fungsi Awam (permintaan $ permintaan)
{
    kembali array_merge (ibu bapa :: kongsi (permintaan $), [
        'auth.user' => $ permintaan-> pengguna (),
    ]);
}

Nilai -nilai yang dikongsi ini boleh didapati di semua komponen Vue atau React anda melalui cangkuk seperti usePage().props.auth .

Juga, susun atur adalah komponen yang boleh diguna semula. Jika banyak halaman menggunakan susun atur yang sama (seperti susun atur papan pemuka), anda boleh membungkusnya dengan mudah:

 <pemat>
  <sepledout>
    <div> Kandungan papan dashboard </div>
  </Susun atur>
</template>

Itulah pada dasarnya bagaimana inersia berfungsi dengan Laravel dan Vue atau bertindak balas. Ia memudahkan membina spa tanpa kehilangan keselesaan struktur penghalaan dan bilah pelayan Laravel. Sebaik sahaja anda membiasakannya, ia berasa cepat, bersih, dan biasa.

Atas ialah kandungan terperinci Apakah inersia.js dan bagaimana menggunakannya dengan laravel dan vue/react?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!