Tạo dữ liệu trong cơ sở dữ liệu
Bước 1: Tạo các term với Term Type là HIGHLIGHT. Term Type sẽ đóng vai trò là danh mục cha, trong khi Term sẽ là danh mục con. Điều này giúp phân loại bài viết mà chúng ta muốn làm nổi bật trên blog.
Bước 2: Sau khi thiết lập các Term, chúng ta tiếp tục tạo ra các bài viết liên kết với các Term vừa được tạo.
Xử lý Backend
B1: Cập nhật giao diện WebBlogTermRepository
Trong package repository, bạn cần sửa đổi nội dung của interface WebBlogTermRepository để thực hiện truy vấn bài viết theo danh sách tên term. Mã nguồn như sau:
java
@EzyRepository
public interface WebBlogTermRepository extends EzyDatabaseRepository<PostTermId, PostTerm> {
@EzyQuery(
"SELECT e FROM PostTerm e " +
"INNER JOIN Term t " +
"ON e.termId = t.id " +
"WHERE t.name IN ?0"
)
List<PostTerm> findHighlightPostTermsByTermNameIn(Collection<String> termNames);
}B2: Tạo model WebPostTermModel
Tạo một package mới có tên là model và thêm class WebPostTermModel như sau:
java
@Getter
@Builder
public class WebPostTermModel {
private final long postId;
private final long termId;
}B3: Tạo converter WebBlogEntityToModelConverter
Trong package converter, tạo một class mới WebBlogEntityToModelConverter:
java
@EzySingleton
public class WebBlogEntityToModelConverter {
public WebPostTermModel toModel(PostTerm entity) {
if (entity == null) {
return null;
}
return WebPostTermModel.builder()
.postId(entity.getPostId())
.termId(entity.getTermId())
.build();
}
}B4: Cập nhật WebBlogTermService
Sửa đổi class WebBlogTermService để thêm hàm getHighlightPostTermsByTermNames nhằm chuyển đổi danh sách PostTerm sang List các WebPostTermModel:
java
public List<WebPostTermModel> getHighlightPostTermsByTermNames(Collection<String> termNames) {
return newArrayList(
blogTermRepository.findHighlightPostTermsByTermNameIn(termNames),
entityToModelConverter::toModel
);
}B5: Decorate bài viết trong WebBlogPostModelDecorator
Thêm các hàm decorate trong class WebBlogPostModelDecorator nhằm chuẩn bị cho việc lấy thông tin bài viết:
java
public List<WebBlogPostResponse> decoratePostTerms(List<WebPostTermModel> models) {
// Logic để lấy thông tin bài viết và trả về danh sách WebBlogPostResponse
}B6: Tạo hàm getHighlightPosts trong WebBlogPostControllerService
Phát triển hàm getHighlightPosts trong WebBlogPostControllerService để lấy danh sách bài viết nổi bật:
java
public List<WebBlogPostResponse> getHighlightPosts() {
List<WebPostTermModel> postTerms = blogTermService.getHighlightPostTermsByTermNames(Arrays.asList("main1", "main2", "main3", "main4"));
return blogPostModelDecorator.decoratePostTerms(postTerms);
}B7: Cập nhật HomeController
Cuối cùng, trong HomeController, sửa lại hàm home:
java
@DoGet("/")
public View home() {
return View.builder()
.template("home")
.addVariable("highlightPosts", blogPostControllerService.getHighlightPosts())
.addVariable(VIEW_VARIABLE_PAGE_TITLE, "Trang chủ")
.build();
}Xử lý Frontend
Cuối cùng, hãy sửa đổi phần HTML của giao diện blog highlight để hiển thị thông tin bài viết nổi bật:
html
<div class="row mt-4">
<div th:if="${highlightPosts.size() > 0}" class="col-8">
<div class="card overflow-hidden">
<div class="card-img position-relative">
<img loading="lazy" decoding="async" th:src="${highlightPosts.get(0).image.getUrlOrNull()}" alt="img1">
<div class="position-absolute bottom-0 start-50 translate-middle-x card-info w-100 text-center">
<button class="tag text-capitalize">[[${highlightPosts.get(0).term.name}]]</button><br>
<h3 class="line-container text-capitalize">[[${highlightPosts.get(0).title}]]</h3>
<p class="text-capitalize date-string">[[${highlightPosts.get(0).publishedAt}]]</p>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card overflow-hidden" style="height: 576px">
<div class="card-img position-relative">
<img loading="lazy" decoding="async" th:src="${highlightPosts.get(1).image.getUrlOrNull()}" alt="img2">
<div class="position-absolute bottom-0 start-50 translate-middle-x card-info w-100 text-center">
<button class="tag text-capitalize">[[${highlightPosts.get(1).term.name}]]</button><br>
<h3 class="line-container text-capitalize">[[${highlightPosts.get(1).title}]]</h3>
<p class="text-capitalize date-string">[[${highlightPosts.get(1).publishedAt}]]</p>
</div>
</div>
</div>
</div>
</div>Sau khi hoàn thành, bạn sẽ có một giao diện bài viết nổi bật hiển thị các thông tin như hình ảnh, danh mục, tiêu đề và ngày xuất bản.
source: viblo
