Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Laravel
Code

Membina App React Dengan Laravel RESTful Back End: Bahagian 1, API Laravel 5.5

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Build a React App with Laravel Backend.
Build a React App With a Laravel Back End: Part 2, React

Malay (Melayu) translation by Seurion (you can also view the original English article)

Laravel and React adalah dua teknologi pembangunan web popular yang digunakan untuk membina aplikasi web moden. Laravel adalah kerangka kerja PHP sisi pelayan, sedangkan React adalah perpustakaan JavaScript pihak klien. Tutorial ini berfungsi sebagai pengantar kepada Laravel dan React, menggabungkan mereka untuk membuat aplikasi web moden.

Dalam aplikasi web yang moden, pelayan mempunyai tugas terhad menguruskan hujung belakang melalui beberapa titik akhir (Aplikasi Pemrograman Muka) API. Pelanggan menghantar permintaan kepada titik akhir ini, dan pelayan membalas respons. Walau bagaimanapun, pelayan tidak prihatin tentang bagaimana klien membuat pandangan, yang jatuh dengan sempurna selaras dengan prinsip Pengasingan Prihatin. Seni bina ini membolehkan pemaju untuk membina aplikasi yang mantap untuk web dan juga untuk peranti yang berbeza.

Dalam tutorial ini, kami akan menggunakan versi terkini Laravel, versi 5.5, untuk mewujudkan API back-end RESTful. Akhir depan akan terdiri daripada komponen yang ditulis dalam React. Kami akan membina aplikasi penyenaraian produk yang bijak. Bahagian pertama tutorial akan memberi tumpuan lebih kepada konsep Laravel dan hujung belakang. Mari kita mulakan.

Pengenalan

Laravel adalah rangka kerja PHP yang dibangunkan untuk web moden. Ia mempunyai sintaks ekspresif yang menyokong paradigma konvensyen berkenaan konfigurasi. Laravel mempunyai semua ciri yang anda perlukan untuk memulakan dengan projek keluar dari kotak. Tetapi secara peribadi, saya suka Laravel kerana ia menjadikan pembangunan dengan PHP menjadi pengalaman dan aliran kerja yang sama sekali berbeza.

Sebaliknya, React adalah pustaka JavaScript popular yang dibangunkan oleh Facebook untuk membina aplikasi satu halaman. Reaktik membantu anda memecah pandangan anda ke dalam komponen di mana setiap komponen menerangkan sebahagian daripada UI aplikasi. Pendekatan berasaskan komponen mempunyai faedah tambahan kebolehgunaan dan modulariti komponen.

Mengapa Laravel dan React?

Sekiranya anda membangun untuk web, anda mungkin cenderung untuk menggunakan satu dasar untuk kedua-dua pelayan dan klien. Walau bagaimanapun, tidak setiap syarikat memberi pemaju kebebasan menggunakan teknologi pilihan mereka, dan atas sebab-sebab tertentu. Menggunakan timbunan JavaScript untuk keseluruhan projek adalah norma semasa, tetapi tidak ada yang menghalang anda daripada memilih dua teknologi yang berbeza untuk pihak pelayan dan sisi klien.

Jadi, seberapa baik Laravel dan React patut bersama? Sebenarnya, sebenarnya. Walaupun Laravel telah didokumentasikan disokong untuk Vue.js, yang merupakan rangka kerja JavaScript lain, kami akan menggunakan React untuk bahagian depan kerana ia lebih popular.

Prasyarat

Sebelum memulakan, saya akan menganggap bahawa anda mempunyai pemahaman asas tentang seni bina RESTful dan bagaimana titik akhir API berfungsi. Selain itu, jika anda mempunyai pengalaman terdahulu dalam React atau Laravel, anda akan dapat memanfaatkan tutorial ini.

Walau bagaimanapun, jika anda baru dalam kedua-dua rangka kerja, bimbang tidak. Tutorial ini ditulis dari perspektif pemula, dan anda harus dapat mengejar tanpa banyak masalah. Anda boleh mencari kod sumber untuk tutorial di GitHub.

Memasang dan Menetapkan Projek Laravel Anda

Laravel menggunakan Composer untuk menguruskan semua kebergantungan. Jadi, sebelum memulakan dengan Laravel, muat turun dan pasang Komposer pada mesin anda. Anda juga mungkin perlu mengkonfigurasi pembolehubah persekitaran laluan supaya Komposer dapat diakses secara global.

Jalankan arahan berikut untuk memuat turun pemasang laravel.

Sekiranya anda telah mengkonfigurasi pembolehubah $PATH dengan betul dan menambah ~/.composer/vendor/bin di laluan anda, anda sepatutnya dapat menghasilkan projek Laravel segar seperti berikut:

Sebagai alternatif, anda boleh menggunakan Komposer untuk membuat projek baru tanpa pemasang laravel.

Sekiranya semuanya berjalan lancar, anda harus dapat melayani aplikasi anda di pelayan pembangunan di http://localhost:8000.

Nota: Artisan adalah alat baris arahan yang anda tidak boleh hidup tanpa bekerja dengan Laravel. Artisan menerima senarai besar arahan yang membolehkan anda menghasilkan kod untuk permohonan anda. Jalankan php artisan list untuk melihat semua arahan artis yang tersedia.

Mengkonfigurasi Alam Sekitar

Permohonan anda akan mempunyai fail .env di dalam direktori root. Semua maklumat konfigurasi khusus persekitaran dinyatakan di sini. Buat pangkalan data untuk permohonan anda jika anda belum lagi, dan tambah butiran pangkalan data ke dalam fail .env.

Memahami Model, Laluan, dan Pengawal

Laravel adalah rangka kerja yang mengikuti senibina Model-View-Controller (MVC). Secara umum, MVC membantu anda untuk memisahkan pertanyaan pangkalan data (Model) dari logik berkenaan dengan bagaimana permintaan perlu diproses (Pengawal) dan bagaimana tata letak harus diberikan (Lihat). Imej di bawah menunjukkan aplikasi Laravel yang biasa.

Overview of Laravels architecture for building RESTful API endpoints
Seni bina Laravel. Pengawal mengembalikan respons dan oleh itu lapisan paparan tidak diperlukan.

Oleh kerana kami membina API menggunakan Laravel, kami akan menghadkan perbincangan kami kepada Model dan Pengawal. Kami akan mengkaji semula pilihan kami untuk membuat Paparan di bahagian kedua tutorial ini.

Router

Apabila pelayan menerima permintaan HTTP, Laravel cuba memadaninya dengan laluan yang didaftarkan di dalam mana-mana fail laluan. Semua fail laluan terletak di dalam direktori laluan. routes/web.php menjadi tuan rumah laluan untuk antara muka web, sedangkan routes/web.php menjadi hos laluan untuk API. Laluan yang didaftarkan di api.php akan diawali dengan /api (seperti dalam localhost: 3000/api). Sekiranya anda perlu mengubah tingkah laku ini, anda perlu pergi ke kelas RouteServiceProvider di /app/Providers/RouteServiceProvider.php dan buat perubahan di sana.

Oleh kerana kami membina aplikasi penyenaraian produk, berikut adalah titik akhir untuk API dan tindakan HTTP yang berkaitan dengan titik akhir tersebut.

  • GET /products/: Ambil semua produk.
  • GET /product/{id}: Mendapatkan produk yang sepadan dengan id.
  • POST /products: Buat produk baharu dan masukkannya ke pangkalan data.
  • PUT /products/{id}: Perbarui produk sedia ada yang sepadan dengan id.
  • DELETE /products/{id}: Padam produk dengan id yang diberikan.

Mari kita dapatkan istilah itu betul. GET, POST, PUT dan DELETE adalah kata kerja HTTP (lebih dikenali sebagai kaedah HTTP) yang pada asasnya diperlukan untuk membina perkhidmatan RESTful. /products adalah URI yang berkaitan dengan sumber produk. Kaedah HTTP meminta pelayan untuk melakukan tindakan yang diinginkan pada sumber yang diberikan.

HTTP actions acting on the Product resource
GET, POST, PUT dan DELETE adalah tindakan REST yang biasa digunakan

Router membolehkan anda mengisytiharkan laluan untuk sumber bersama dengan kaedah HTTP yang mensasarkan sumber tersebut. Berikut ialah fail laluan sampel yang mengembalikan beberapa data berkod keras.

routes/api.php

Jika anda ingin mengesahkan bahawa laluan berfungsi seperti yang diharapkan, anda harus menggunakan alat seperti POSTMAN atau curl.

Model Produk

Sumber produk memerlukan model yang boleh berinteraksi dengan pangkalan data. Model adalah lapisan yang terletak di atas pangkalan data, menyembunyikan semua jargon khusus pangkalan data. Laravel menggunakan Eloquent ORM untuk memodelkan pangkalan data.

ORM Eloquent yang disertakan dengan Laravel menyediakan pelaksanaan ActiveRecord yang indah untuk bekerja dengan pangkalan data anda. Setiap jadual pangkalan data mempunyai "Model" sepadan yang digunakan untuk berinteraksi dengan jadual tersebut. Model membolehkan anda membuat pertanyaan untuk data dalam jadual anda, serta memasukkan rekod baru ke dalam jadual.
Laravel Docs

Bagaimana dengan definisi skema pangkalan data? Penghijrahan Laravel menjaga perkara itu. Artisan mempunyai arahan penghijrahan yang membolehkan anda menentukan skema anda dan mengemas kini secara berperingkat pada peringkat seterusnya. Mari buat model dan penghijrahan untuk entiti Produk.

Nota: Terdapat banyak arahan Artisan di luar sana, dan mudah hilang. Oleh itu, setiap arahan artis termasuk skrin pembantu yang memaparkan maklumat tambahan seperti pilihan dan argumen yang tersedia. Untuk mendapatkan halaman bantuan, nama arahan harus didahului dengan help. Jalankan arahan bantuan berikut untuk melihat apakah pilihan -m untuk: $php artisan help make: model.

Inilah file migrasi yang dihasilkan.

database/migrations/timestamp_create_products_table.php

Kaedah up yang dipanggil semasa memindahkan jadual dan lajur baru ke dalam pangkalan data, sedangkan kaedah down dipanggil semasa melancarkan penghijrahan. Kami telah membuat Skema untuk jadual dengan tiga baris: id, created_at, dan updated_at. Kaedah $table-> timestamps() bertanggungjawab untuk mengekalkan created_at dan updated_at tiang. Mari tambahkan beberapa lagi baris kepada takrif skema.

Kami telah mengemas kini skema dengan empat lajur baru. Pembina skema Laravel menyokong pelbagai jenis lajur seperti string, text, integer, boolean, dll.

Untuk melaksanakan migrasi yang belum selesai, anda perlu menjalankan arahan berikut:

Dengan konvensyen, Laravel menganggap bahawa model Product dikaitkan dengan jadual products. Walau bagaimanapun, jika anda perlu mengaitkan model dengan nama jadual tersuai, anda boleh menggunakan $table property untuk mengisytiharkan nama jadual. Model ini kemudian akan dikaitkan dengan jadual yang dinamakan custom_products.

Tetapi kita akan menjaga perkara yang mudah dan pergi dengan konvensyen. Model Produk yang dijana terletak di dalam aplikasi/ direktori. Walaupun kelas model mungkin kelihatan kosong, ia dilengkapi dengan pelbagai kaedah pembina pertanyaan yang boleh anda gunakan untuk menanyakan pangkalan data. Sebagai contoh, anda boleh menggunakan Product::all() untuk mendapatkan semua produk atau Product::find(1) untuk mendapatkan semula produk tertentu dengan id 1.

Model Laravel mempunyai mekanisme perlindungan terbina dalam terhadap kelemahan tugasan massa. Harta yang boleh ditapis digunakan untuk mengisytiharkan nama atribut yang boleh ditugaskan secara besar-besaran dengan selamat.

app/Product.php

Kod di atas adalah senarai title, description, price dan availability dan memperlakukannya sebagai massa yang boleh diberikan. Sekarang kita boleh menggunakan Product::create method untuk memasukkan baris baru ke dalam jadual produk.

Pembenihan Pangkalan Data

Laravel membolehkan anda mengisi pangkalan data pembangunan dan pengeluaran anda dengan data dummy yang anda boleh gunakan untuk menguji titik akhir API anda. Anda boleh membuat kelas benih dengan melaksanakan arahan Artisan berikut.

Fail seeder yang dijana akan diletakkan di dalam pangkalan data/bibit.

Untuk menghasilkan data dummy, anda boleh menggunakan sesuatu seperti str_random(10) yang mengembalikan rentetan rawak. Tetapi jika anda memerlukan data yang cukup dekat dengan data sebenar, anda harus menggunakan sesuatu seperti perpustakaan pendakwa. Faker adalah perpustakaan pihak ketiga yang akan dihantar dengan rangka kerja Laravel untuk menghasilkan data palsu.

database/seeds/ProductsTableSeeder.php

Jalankan db:commander biji benih untuk mengisi pangkalan data.

Mari kembali ke routes/api.php dan isikan bahagian yang hilang.

routes/api.php

Controller

Fail laluan kini menjadi tuan rumah logik untuk permintaan penghalaan dan pengendalian. Kita boleh memindahkan logik pengendalian permintaan ke kelas Pengawal supaya kod kami lebih teratur dan lebih mudah dibaca. Mari kita buat kelas pengawal terlebih dahulu.

Kelas Pengawal terdiri daripada pelbagai kaedah (indeks, pertunjukan, menyimpan, mengemas kini, dan memadam) yang sesuai dengan tindakan HTTP yang berbeza. Saya telah memindahkan logik pengendalian permintaan dari laluan ke pengawal.

app/HTTP/Controllers/ProductsController.php

routes/api.php

Jika anda tidak perasan, saya telah menyuntik contoh Produk ke dalam kaedah pengawal. Ini adalah contoh pengikatan tersirat Laravel. Laravel cuba memadankan contoh nama Produk $product dengan nama segmen URI {product}. Jika perlawanan ditemui, contoh model Produk disuntik ke dalam tindakan pengawal. Jika pangkalan data tidak mempunyai produk, ia mengembalikan ralat 404. Keputusan akhir adalah sama seperti sebelum tetapi dengan kod kurang.

Buka POSTMAN dan titik akhir untuk produk harus berfungsi. Pastikan anda menerima Accept:application/json header diaktifkan.

Pengendalian Pengesahan dan Pengecualian

Sekiranya anda menuju ke sumber yang tidak wujud, inilah yang akan anda lihat.

The error page displayed for the NotFoundHTTPException

NotFoundHTTPException adalah bagaimana Laravel memaparkan ralat 404. Sekiranya anda mahu pelayan untuk membalas respons JSON, anda perlu menukar tingkah laku pengendalian pengecualian lalai. Laravel mempunyai kelas Handler khusus untuk pengendalian pengecualian yang terletak di app/Exceptions/Handler.php. Kelas ini mempunyai dua kaedah: report() dan render(). Kaedah laporan berguna untuk melaporkan dan peristiwa pengecualian pembalakan, sedangkan kaedah membuat digunakan untuk membalas respon apabila pengecualian ditemui. Kemas kini kaedah membuat untuk membalas respons JSON:

app/Exceptions/Handler.php

Laravel juga membolehkan kami untuk mengesahkan permintaan HTTP masuk menggunakan satu set peraturan pengesahan dan secara automatik kembali respons JSON jika pengesahan gagal. Logik untuk pengesahan akan diletakkan di dalam pengawal. Illuminate\Http\Request objek menyediakan kaedah validasi yang boleh kita gunakan untuk menentukan peraturan pengesahan. Mari tambahkan beberapa pemeriksaan pengesahan ke kaedah kedai.

app/HTTP/Controllers/ProductsController.php

Ringkasan

Kami kini mempunyai API kerja untuk aplikasi penyenaraian produk. Walau bagaimanapun, API tidak mempunyai ciri asas seperti pengesahan dan menyekat akses kepada pengguna yang tidak dibenarkan. Laravel mempunyai sokongan tidak sah untuk pengesahan, dan membina API untuk ia agak mudah. Saya menggalakkan anda untuk melaksanakan API pengesahan sebagai latihan.

Bagi anda yang baru sahaja bermula dengan Laravel atau ingin memperluas pengetahuan, laman web, atau aplikasi dengan sambungan, kami mempunyai pelbagai perkara yang anda boleh belajar di Envato Market.

Sekarang bahawa kita selesai dengan hujung belakang, kita akan mengalihkan tumpuan kita kepada konsep-konsep front-end. Tinggal untuk bahagian kedua siri ini. Kongsi pendapat anda dalam komen.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.