Xây dựng ứng dụng CRUD với Laravel 7 & Reactjs – Phần 2

by Lê Thạch

Chào các bạn, ở hôm trước mình có giới thiệu đến các bạn cách tao một ứng dụng CRUD kết hợp giữa framework Laravel và Reactjs. Trong phần 1 mình đã hướng dẫn các bạn những thao tác xử lý tạo API với phần backend Laravel rồi, để tiếp nối và hoàn thiện ứng dụng thì trong hôm nay mình sẽ xử lý các phần còn lại ở phía Front-end thông qua Reactjs. Nếu các chưa xem qua bài viết lần trước thì mình khuyên các bạn nên đọc phần trước cho hiểu đã rồi mới xem qua bài viết này.

Phần 2: Làm việc với phần Front-end Reactjs

Bước 1:  Cài đặt cấu hình cho Reactjs

Đầu tiên, chúng ta cấu hình bộ khung Reactjs cho ứng dụng của mình bằng cách chạy lệnh sau đối với Laravel 7+

Còn trong trường hợp đối với project dùng Laravel 5.5+ ta phải dùng lệnh sau thì mới được hỗ trợ.

Sau khi chạy xong chúng ta vào > resources  >>   js , tại đó có 1 folder tên là components, đây là react component. Và 2 file là app.js và boostrap.js. Trong components thì có một file với tên Example.js

Các bạn đi theo đường dẫn resources  >>  views  >>  welcome.blade.php và xóa code mặc định của Laravel đang có trong file, sau đó chèn đoạn code bên dưới:

Mở terminal và chạy lệnh:

Lệnh này compile tất cả assets và để bundled js vào trong public >> js  >>  app.js của Laravel.

Sau đó, các bạn gõ thêm lệnh sau để tạo server run project.

 

Kết quả khi chạy thử project

Kết quả khi chạy thử project

Bước 2:  Cài đặt các dependencies liên quan đến Reactjs

Đầu tiên, mình sẽ cần cài đặt thêm React-route cho phần điều hướng ứng dụng của mình. React-router được dùng để giúp việc dẫn hướng UI đồng bộ với URL.

Trong React, chỉ có 1 file HTML được gọi. Bất cứ khi nào người dùng nhập 1 đường dẫn mới, thay vì lấy dữ liệu từ server, Router sẽ chuyển sang 1 Component khác ứng với mỗi đường dẫn mới. Nó sẽ giúp ứng dụng không cần phải load lại trang khi click vào một đường dẫn. Hay còn gọi là Single Page Application (SPA)

Ở đây mình cài đặt react-router version 3.2 để tránh các lỗi khi sử dụng version cũ. Sau đó mình chạy thêm lệnh

Nó sẽ xem những thay đổi trong thư mục assets khi ta code và tự động compile lại. Mình sẽ dùng cái này để kiểm tra debug những lỗi trong quá trình code luôn cho tiện.

Bước 3:  Xây dựng các thành phần cần thiết của giao diện

File app.js

Edit resources/js/components/Example.js

Ở đây, mình đã tạo cho nó một thanh navbar chứa các điều hướng Router với các đường dẫn để tới được các Component. Và nội dung chính sẽ được render ra ở thẻ <div> có id là ‘example’ của file welcome.blade.php.

Trong folder component ta sẽ tạo ra thư mục pages sẽ chứa các file như sau:

  1. components/pages/Addproduct.js
  2. components/pages/Editproduct.js
  3. components/pages/Home.js
  4. components/pages/MyGlobleSetting.js
  5. components/pages/Product.js
  6. components/pages/MyGlobleSetting.js
  7. components/pages/RouterPath.js
  8. components/pages/TableRow.js

Bước 4:  Tạo file thêm sản phẩm và cấu hình Router

File: MyGlobleSetting.js

Mình tạo file này để sau này gọi API cho tiện. Chỉ cần truy cập đến thuộc tính url theo kiểu hướng đối tượng là được, như vậy nhìn cũng có vẻ chuyên nghiệp hơn.

File: Appproduct.js

Ở đây mình dùng arrow function trong ES6, nên lúc đầu bạn chạy sẽ bị lỗi. Bởi vì trong blade template của Laravel không hỗ trợ ES6 cho bạn. Để có thể sử dụng được arrow function bạn chạy lệnh sau trên terminal:

Sau đó bạn phải tạo file .babelrc cùng cấp với thư mục root của project và thêm cấu hình sau:

Mình dùng axios để gọi API, nó là một dạng client HTTP của Javascript. Ngoài nó ra thì cũng có một số cách khác như dùng fetch(), Jquery,.. Tuy nhiên vì một số ưu điểm sau mà mình đã lựa chọn axios:

  • Xây dựng trên nền tảng Promise nên kế thừa được các ưu điểm của Promise
  • Cho phép thực hiện các hook khi ngay khi gửi request và nhận response
  • Cho phép hủy yêu cầu, đây cũng là một trong những điều đặc biệt mà các thư viện khác không có

File: RouterPath.js

Nếu mọi thứ ổn thì thằng Laravel Mix sẽ recompile và chạy lệnh php artisan serve, mở trình duyệt chạy URL bạn sẽ được kết quả như hình.

 

Thêm sản phẩm

Giao diện thêm sản phẩm

Bước 5: Hiển thị data ra ReactJS Frontend

Mấy thao tác này sẽ tương tự giống với phần AddProduct nên mình sẽ không đề cập nhiều về nó.

File: Home.js 

File: Product.js 

File: TableRow.js 

Bước 6: Sửa và xóa Product

File: EditProduct.js 

TÀI LIỆU THAM KHẢO

https://topdev.vn/blog/laravel-5-5-va-reactjs-xay-dung-crud-create-read-update-delete-tu-dau/

https://www.itsolutionstuff.com/post/laravel-5-simple-crud-application-using-reactjs-part-1example.html

https://codesource.io/build-a-crud-application-using-laravel-and-react/

Kết luận

Như vậy mình đã hướng dẫn các bạn xây dựng thành công ứng dụng CRUD đơn giản với Laravel 7+ và Reactjs. Tuy bài viết hơi dài, nhưng cũng không phải là phức tạp lắm. Dù vậy trong quá trình làm, bạn sẽ gặp không ít những khó khăn. Nếu gặp vấn đề vướng mắc, bạn đừng ngần ngại mà hãy comment vào phía dưới bài viết này, mình sẽ cùng bạn giải đáp những thắc mắc nếu như có thể. Bên cạnh đó, nếu như có những cách làm nào hay và tối ưu hơn thì bạn hãy đề xuất để mình có thể cải tiến ứng dụng một cách tốt hơn. Cảm ơn các bạn đã theo dõi bài viết, chúc các bạn và gia đình mạnh khỏe trong mùa dịch bệnh COVID-19 này nhé!

 

Bài viết liên quan

2 bình luận

Reactjs & Laravel 7 Xây dựng ứng dụng CRUD - Phần 1 | Blog Lê Thạch 12 Tháng Tư, 2020 - 11:08 chiều

[…] tiện theo dõi, thì mình sẽ tách Phần 2 ra ở một bài viết tiếp theo. Ở phần sau mình sẽ chủ yếu nói về các xử lý […]

Trả lời
huyi 1 Tháng Tám, 2020 - 11:34 sáng

tạo file .babelrc cùng cấp với thư mục root của project: là thư mực gì vậy ad?
import { HashRouter, Link } from ‘react-router-dom’: bị lỗi không tìm thấy cài này ?

Trả lời

Thêm bình luận