Các Nội Dung Cần Thực Hiện:

1. Lấy Dữ Liệu Từ Menu Danh Mục Và Hiển Thị Các Danh Mục Con.
2. Chuyển Hướng Và Hiển Thị Chi Tiết Bài Viết Khi Người Dùng Chọn.

Hiển Thị Dữ Liệu Cho Menu Danh Mục

Bước 1: Tạo một Term Type được gọi là 'danh mục' và thêm các Term cho nó. Tại đây, Term Type là loại mục mà chúng ta tự xác định, còn các Term là những danh mục con thuộc danh mục đó.

Bước 2: Chúng ta viết mã để hiển thị danh mục và các danh mục con trong phần header của trang web. Vì header là thành phần hiển thị trên tất cả các trang của Blog, nên dữ liệu của header phải được lấy ra và hiển thị mỗi khi có sự chuyển trang. Chúng ta đã biết đến một package có tên là view, chứa lớp ViewDecorator - lớp này sẽ được sử dụng sau khi hệ thống trả về một View và trước khi mã HTML được tạo từ template. Do đó, mỗi lần chuyển trang, yêu cầu View đều đi qua ViewDecorator, giúp bổ sung dữ liệu cho View, tương tự như package controller.decorator mà chúng ta đã đề cập ở phần trước.

Dưới đây là đoạn mã để thêm dữ liệu cho danh mục trong header:

package com.blog.essential.web.view;

import com.tvd12.ezyfox.bean.annotation.EzySingleton;
import com.tvd12.ezyhttp.server.core.view.View;
import lombok.AllArgsConstructor;
import org.youngmonkeys.ezyarticle.web.service.WebTermService;
import org.youngmonkeys.ezyplatform.web.view.WebViewDecorator;

import javax.servlet.http.HttpServletRequest;

@EzySingleton
@AllArgsConstructor
public class WebEssentialViewDecorator extends WebViewDecorator {

    private final WebTermService termService;

    @Override
    public void decorate(HttpServletRequest request, View view) {
        super.decorate(request, view);
        decorateMainMenu(view);
    }

    private void decorateMainMenu(View view) {
        view.setVariable(
            "categories",
            termService.getTermsInCategoryType()
        );
    }
}

Trong đoạn mã trên, chúng ta khai báo một TermService, lớp đã được thiết lập sẵn để thao tác với bảng Term trong cơ sở dữ liệu. Chúng ta sử dụng phương thức getTermsInCategoryType() để lấy ra tất cả các Term thuộc Term Type category (trả về một List các Term).

Lớp WebViewDecorator có nhiệm vụ bổ sung dữ liệu người dùng vào đối tượng View dựa trên thông tin trong HttpServletRequest (đối tượng này trong Java Servlet API đại diện cho yêu cầu HTTP từ client đến server, chứa tất cả thông tin liên quan đến yêu cầu). Phương thức decorate() sẽ ghi đè phương thức decorate() của lớp cha và gọi phương thức này để thực hiện công việc từ WebViewDecorator, sau đó gọi thêm decorateMainMenu() để bổ sung dữ liệu cần thiết vào View.

Bước 3: Thêm dữ liệu cho phần menu để hiển thị category. Đoạn mã HTML trong sử dụng biểu thức Thymeleaf th:block để hiển thị hoặc ẩn nội dung dựa trên điều kiện. Sau đó, duyệt qua danh sách categories để lấy tên và slug (được sử dụng để hiển thị chi tiết cho danh mục).

Kết quả cuối cùng sẽ như sau:

Hiển Thị Chi Tiết Bài Viết

Tóm tắt: Trong phần trước, chúng ta đã thêm dữ liệu cho một bài viết trên Blog. Phần này thiết lập để khi người dùng click vào bài viết, họ sẽ được chuyển hướng tới trang chi tiết của bài viết đó.

Ý tưởng: Khi người dùng click vào hình ảnh hoặc tiêu đề của bài viết, thẻ sẽ chứa đường dẫn gọi đến controller để xử lý và trả về giao diện chi tiết của bài viết.

package com.blog.essential.web.controller.view;

import com.tvd12.ezyhttp.server.core.annotation.Controller;
import org.youngmonkeys.ezyarticle.web.controller.service.WebCommentControllerService;
import org.youngmonkeys.ezyarticle.web.controller.service.WebPostControllerService;
import org.youngmonkeys.ezyarticle.web.controller.view.PostController;
import org.youngmonkeys.ezyarticle.web.service.WebEzyArticleSettingService;
import org.youngmonkeys.ezyarticle.web.service.WebTermService;
import org.youngmonkeys.ezyarticle.web.validator.WebTermValidator;
import org.youngmonkeys.ezyplatform.web.service.WebAdminService;
import org.youngmonkeys.ezyplatform.web.service.WebUserService;
import org.youngmonkeys.ezyplatform.web.validator.WebCommonValidator;

@Controller
public class WebEssentialPostController extends PostController {

    public WebEssentialPostController(
            WebAdminService adminService,
            WebUserService userService,
            WebTermService termService,
            WebEzyArticleSettingService settingService,
            WebPostControllerService postControllerService,
            WebCommentControllerService commentControllerService,
            WebCommonValidator commonValidator,
            WebTermValidator termValidator
    ) {
        super(
            adminService,
            userService,
            termService,
            settingService,
            postControllerService,
            commentControllerService,
            commonValidator,
            termValidator
        );
    }
}

Cuối cùng, thiết lập địa chỉ URL cho thẻ và tạo một package posts với file details.html để viết mã HTML hiển thị các giá trị lấy được từ bài viết. Giao diện sẽ trông như sau.
source: viblo