Laravel & React: Tạo một ứng dụng CRUD đơn giản

Tram Ho

Bài viết này dành cho những bạn nào đang bắt tay vào học cách sử dụng kết hợp Laravel và React.
Qua việc làm 1 app CRUD, các bạn sẽ hiểu được luồng hoạt động cơ bản. Bắt đầu nào!

1. Backend:

1.1. Khởi tạo

Đầu tiên, chúng ta sử dụng composer để khởi tạo project với Laravel phiên bản mới nhất (ở đây của mình là Laravel 8):

Di chuyển vào thư mục chứa project:

1.2. Config database

Để kết nối app với database, ta mở file .env và sửa một số thông tin của DB_DATABASE, DB_USERNAME, DB_PASSWORD sao cho phù hợp với database của mình.

1.3. Tạo Model, Controller và Route

Vào thư mục database/migrations và mở file migration vừa được tạo lên, sửa code như sau:

Ta vừa viết migration để tạo bảng Expense, với các trường như sau:
{bảng contact}

Chạy câu lệnh migrate để tạo bảng trong database:

Migrate chạy thành công sẽ hiển thị như sau:

Sau khi migrate thành công, bảng Expense sẽ xuất hiện trong database.
Tiếp theo, ta thêm các routes vào file routes/api.php để kết nối với Controllers. File này sau đó sẽ có nội dung như sau:

Mình đang sử dụng Laravel 8, trong phiên bảng này, thuộc tính $namespace trong RouteServiceProvider mặc định được đặt là null. Do đó, sẽ không có prefix namespace nào được thực hiện bởi Laravel. Định nghĩa controller route (trong file routes/api.php sẽ được xác định bằng cú pháp chuẩn của PHP như sau:

Tuy nhiên, mình quen sử dụng prefix giống Laravel 7.x nên sẽ thêm thuộc tính $namespace vào RouteServiceProvider (app/Providers/RouteServiceProvider.php) như sau:

Tiếp theo, ta định nghĩa từng hành động trong file app/Http/Controllers/ExpenseController.php

Tiếp theo, ta chỉ định những thuộc tính có thể được thay đổi nội dung trong database (mass-assign) bằng cách thêm các thuộc tính đó vào biến $fillable trong file app/Models/Expense.php:

Vậy là xong phần back-end, bây giờ ta chạy ứng dụng bằng câu lệnh php artisan serve, sau đó mở Postman để thử.

1.4. Test API bằng Postman

Do chưa có dữ liệu gì nên ta sẽ gọi đến api http://localhost:8000/api/expenses/ bằng phương thức POST trước.

Nhập url của API vào và chọn phương thức POST.
Để truyền dữ liệu vào API, chọn Body -> x-www-form-urlencoded và thêm các trường (KEY) cùng với giá trị (VALUE) của các trường đó.

API sẽ được gọi và lưu các giá trị này vào database. Khi lưu thành công, kết quả sẽ hiện ra như sau:

Bây giờ database đã có dữ liệu, ta gọi API GET để lấy dữ liệu ra xem sao:

Kết quả ra giống với dữ liệu vừa được ghi vào.

Các bạn có thể thử với những API còn lại

2. Frontend

2.1. Khởi tạo

Backend đã xong, giờ chúng ta hoàn thành nốt frontend, sử dụng ReactJS. Chạy câu lệnh sau để tạo khung sườn cơ bản (scaffold) cho React:

Sau đó compile assets bằng các lệnh sau:

Tiếp theo, ta cài đặt một số dependency cần thiết:

2.2. Tạo components

Ở đây ta sẽ tạo các components và sử dụng axios để gọi API, tương tác với phía backend.
Trong thư mục components, tạo 3 components sau:

  • create-expense.component.js
  • edit-expense.component.js
  • expenses-listing.component.js
    và một component con:
  • ExpenseTableRow.js

Tiếp theo, nhập nội dung cho các file này:

create-expense.component.js:

edit-expense.component.js:

ExpenseTableRow.js:

expenses-listing.component.js:

Tạo landing page bằng file resources/js/app.js: