Laravel CRUD & Vue3 : Áp dụng Repository Pattern vào ứng dụng

Tram Ho

Ở bài trước, chúng ta đã làm một ứng dụng Laravel CRUD với VUE3 rồi, bây giờ chúng ta sẽ tối ưu hoá code lại và làm nó trông giống như code lúc thực hiện dự án thật hơn nhé. Ở bài này chưa ta sẽ tìm áp dụng Repository design pattern vào.

Nếu các bạn chưa xem bài CRUD trước đó thì hãy xem ở đây nhé :

Repository design pattern là gì ?

Repository Design Pattern là một trong những mẫu thiết kế được sử dụng nhiều nhất trong hầu hết các ngôn ngữ lập trình, các framework… như .NET, Java, PHP…, trải dài từ websites, services, applications,… hay kể cả mobile apps.

Chính xác nó là một lớp trung gian giữa Business Logic và Data Source, các đối tượng trong lớp trung gian này được gọi là Repository. Giao tiếp giữa Business logic và Data source sẽ được thực hiện thông qua các Interface.

Repository pattern trong Laravel

Thay vì code của bạn viết một mớ query trong controller, thì thay vào đó, bạn hãy viết vào một class riêng để thực hiện việc đó. Class này đóng vài trò giao tiếp giữa Model và Controller là nơi tập trung xử lí các logic truy vấn dữ liệu nó được gọi là Class Repository.

Vì đây là project DEMO nên tầng bussines logic mình sẽ viết ở Controller luôn, chứ thực chất nó sẽ thông qua một tầng nữa, được gọi là Service, lúc này Controller sẽ gọi các class Service để xử lí logic, và bên trong Service sẽ gọi đến Repository và thao tác với DB.

Khá phức tạp phải không ? đó là nhược điểm của Repository, cho nên nhiều dự án họ sẽ không cần sử dụng, và các class Service sẽ đảm nhiệm nốt.

OK lang mang nãy giờ đủ rồi, tới công chiện thôi =))

2. Triển khai

Ở bài trước chúng ta đã có Model Company rồi.

Ở controller, mình sẽ tiếng hành viết lại function index này nhé :

1. Tạo repository

Tiếp theo, chúng ta sẽ repository, thì vị trí đặt ở đây mình để nó nằm trong thư mục app/:

Ở đây chúng ta sẽ tạo ra một hàm getList chịu trách nhiệm cho việc truy vấn dữ liệu cho index, bên trên là mình đang Ví dụ nhỏ, nhở sau này các bạn làm dự án, các câu query list đến tận cả trăm dòng mà bỏ vô Controller chắc hoa mắt :v

2. Thêm Request search

Chúng ta sẽ thêm 1 Request search để dễ control các query mà dưới client đẩy lên nhé :

3. Áp dụng vào controller

OK, vậy giờ bạn chỉ cần gọi nó repository vào construct của controller để sử dụng mà thôi.

4. Thêm khung search vào Company List

OK Tiếp theo, các bạn vào resources/js/components/companies/CompanyIndex.vue để thêm phần search vào :

Và cũng thêm function search vào setUp()

Và cũng add thêm params vào method getCompanies() nữa

OK lên hình

Repository Interface

Khi join vào các dự án lớn có sử dụng repository, thì người ta sẽ thường dùng interface. Việc áp dụng interface để đảm bảo code chuẩn theo thiết kế cũng như dễ dàng thay đổi, maintain dễ dàng là điều cần thiết.

Đầu tiên các bạn tạo một interface CompanyRepositoryInterface:

Sau đó tại CompanyRepository implement inteface nay:

Và tại controller, chúng ta inject Interface thay vì CompanyRepository

Ở đây, khi bạn chạy sẽ nhận đc lỗi :Các interface chỉ hoạt động thông qua các implementation. Khi inject class, thì container sẽ tự động resolved còn đối với interface bạn cần phải binding cho nó vào container nữa :

OK, nây giờ chạy lại, ngon lành cành đào.

Kết

Qua bài viết này, mình hi vọng bạn sẽ hiểu được hơn phần nào đó về Repository của laravel. Cảm ơn các bạn đã ủng hộ mình, hi vọng chúng ta cũng sẽ gặp lại trong những bài kế tiếp .

Repository : https://github.com/nguyenthuong1304/crud_vue3

Tham khảo : https://b29.vn/bai-viet/laravel-crud-vue3-ap-dung-repository-pattern-vao-ung-dung?id=43

Chia sẻ bài viết ngay