(EzyPlatform) Xây dựng phía Backend cho Blog - Phần 3

Hiển thị các bài viết theo lượt view

Trang chủ của Blog được xây dựng để hiển thị mục các bài viết xu hướng, trong mục này sẽ hiển thị cho người đọc 5 bài viết có lượt view cao nhất tại thời điểm hiện tại.

Để lấy ra lượt view của một bài viết, trước tiên chúng ta cần xây dựng chức năng để khi người dùng click vào một bài viết thì lượt view có bài viết đó tăng lên 1.

Tăng lượt view của một bài viết

Ý tưởng: khi chúng ta click vào một bài viết, một yêu cầu sẽ được gửi tới hệ thống để lấy ra các thông tin cần thiết hiển thị cho một bài viết chi tiết. Trong quá trình này, chúng ta sẽ thực hiện tăng lượt view cho bài viết.

Tại bảng ezyarticle_posts trong CSDL, sẽ không có cột nào dùng để lưu trữ lượt view của một bài viết. Thay vào đó, lượt view của một bài viết sẽ được lưu trữ tại bảng ezyarticle_post_meta như sau:

Với cách lưu trữ trên, các bài viết sẽ tạo ra một dòng dữ liệu chứa key và value tương ứng với postId của bài viết trong bảng ezyarticle_post_meta. Phần key được đặt là views để chỉ định dòng dữ liệu này lưu trữ lượt view cho bài viết.

Chúng ta không cần viết thêm một phương thức để xử lý lượt view cho một bài viết, thay vào đó trong lớp WebPostService đã có sẵn cho chúng ta phương thức này:

Bây giờ, chúng ta cần thêm phương thức này vào một vị trí phù hợp để sử dụng nó. Như ý tưởng đã đưa ra, lượt view của một bài viết tăng lên khi chúng ta nhấn vào bài viết để xem bài viết chi tiết. Do đó, phương thức này sẽ sử dụng trong phương thức GET khi hệ thống lấy thông tin của một bài viết chi tiết.

Trong phần trước chúng ta đã xây dựng một lớp WebEssentialPostController, lớp này kế thừa lớp PostController đã được xây dựng sẵn, nó sử dụng các phương thức GET của PostController:

Phương thức trên được gọi để lấy ra thông tin chi tiết của một bài viết. Trong phương thức trên, nó gọi tới hàm decoratePostDetailsView() và chúng ta có thể sử dụng nó để viết mã tăng lượt view cho bài viết.

Trong WebEssentialPostController, ghi đè phương thức decoratePostDetailsView() và sử dụng phương thức increaseViewCountByPostId() của WebPostService:

Sau khi kết thúc, lượt view của một bài viết sẽ được tăng lên khi nhấn vào bài viết và tại bảng ezyarticle_post_meta trong CSDL, nó sẽ tạo ra một dòng dữ liệu lưu trữ lượt view của bài viết đó.

Hiển thị bài viết theo lượt view

Chúng ta cần lấy ra top 5 bài viết cho mục các bài viết xu hướng cùng với lượt view của các bài viết. Các bài viết và thông tin của các bài viết được lưu trong bảng ezyarticle_posts, trong khi lượt view của chúng thì được lưu ở trong bảng ezyarticle_post_meta. Do đó, để lấy ra top 5 bài viết có nhiều lượt view nhất, chúng ta sẽ thực hiện câu truy vấn sau:

Câu truy vấn trên join hai bảng ezyarticle_posts và ezyarticle_post_meta để lấy ra bài viết với meta_key là views với điều kiện trạng thái của bài viết là đã phát hành, bài viết thuộc vào loại POST và sắp xếp theo thứ tự giảm dẫn của lượt view (metaNumberValue). Tham số truyền vào trong hàm findMostViewPosts() là next, tham số này sẽ giới hạn số bài viết lấy ra (trong trường hợp này chúng ta chỉ muốn lấy ra top 5 bài viết có lượt view cao nhất).

Truy vấn trên trả về một kết quả chứa các trường dữ liệu là id, title, featuredImageId và metaNumberValue. Do đó, chúng ta cần viết một result để trữ các trường dữ liệu này, ở đây chúng ta sẽ tạo thêm một package là result - lưu trữ kết quả của các câu truy vấn. Trong package này, chúng ta viết cho nó một lớp đầu tiên là MostViewPostResult để lưu trữ kết quả truy vấn cho các bài viết có nhiều lượt view nhất.

Bây giờ, chúng ta cần tạo một service để gọi repo này, chúng ta đang thao tác với bài viết nên trong PostService chúng ta thêm một hàm getMostViewPosts() để lấy ra các bài viết có nhiều lượt view nhất.

Các service sẽ trả về dữ liệu là các model, nên sau khi lấy được result từ repo chúng ta cần chuyển nó sang một model. Do đó, trong package converter chúng ta cần viết thêm một lớp ResultToModelConverter để chuyển đổi result sang model.

Do phương thức trên trả về một kết quả là một model, nên trong package model chúng ta cần viết một model cho bài viết xu hướng (MostViewPostModel).

Lúc này chúng ta đã có một service trả về top 5 bài viết xu hướng. Dưới đây là hình minh họa về giao tiếp giữa các lớp trong mô hình 3 - layer:

Trong MostViewPostModel chứa các dữ liệu: postId, title, featuredImageId, viewCount. Bây giờ, chúng ta cần xử lý postId để đưa ra slug của bài viết (cần chuyển thành slug để khi nhấn vào bài viết thì bài viết chi tiết được hiển thị), featuredImageId cũng cần được xử lý để lấy ra đường dẫn đến file ảnh. Để thực hiện việc này, chúng ta đưa dữ liệu của model đi qua decorator để lấy ra hết những dữ liệu cần thiết. Tạo một phương thức decorateMostViewPosts() trong lớp PostModelDecorator:

Đoạn mã trên được chia ra thành 3 phần: phần 1 xử lý featuredImageId để đưa ra đường dẫn ảnh tương ứng với Id, phần 2 xử lý postId để đưa ra slug tương ứng với Id, phần 3 trả về một danh sách MostViewPostResponse: phần này sử dụng converter để chuyển đổi dữ liệu từ model sang response.

Đoạn mã phần converter như sau:

Đoạn mã phần response cho MostViewPostResponse như sau:

Trong controller.service.PostControllerService, chúng ta cần thêm phương thức lấy ra 5 bài viết có lượt view cao nhất và gọi decorator để trả về danh sách các MostViewPostResponse:

Sau khi đã thực hiện xong, chúng ta cần gọi service để xử lý hiển thị các bài viết xu hướng trong HomeController:

Sử dụng Thymeleaf để lấy dữ liệu nhận được:

Lúc này, 5 bài viết trong phần xu hướng đã được hiển thị theo lượt view giảm dần từ trên xuống dưới:

Phần này hướng dẫn tăng lượt view cho một bài viết và hiển thị top 5 bài viết có lượt view cao nhất.