Xây Dựng Giao Diện Web Mạnh Mẽ Với Thymeleaf và Spring MVC

Chào mừng bạn đến với bài viết thứ 7 trong series về Spring và Spring Boot. Hôm nay, chúng ta sẽ cùng nhau khám phá cách xây dựng giao diện web một cách mạnh mẽ. Chúng ta sẽ sử dụng Thymeleaf, một template engine linh hoạt và dễ sử dụng. Thymeleaf cho phép bạn tạo ra các trang web động một cách dễ dàng. Nó tích hợp hoàn hảo với Spring MVC, giúp bạn xây dựng các ứng dụng web mạnh mẽ.

@Controller và Spring MVC

Trong Spring MVC, @Controller là một annotation quan trọng. Nó đánh dấu một class là một controller. Controller chịu trách nhiệm xử lý các request từ người dùng. Nó nhận request, xử lý logic và trả về view cho người dùng. Điều quan trọng cần lưu ý là @Controller khác với @RestController. @RestController thường được sử dụng để xây dựng các API trả về dữ liệu JSON. Trong khi đó, @Controller thường trả về một view, ví dụ như một trang HTML.

Để sử dụng @Controller, bạn cần thêm annotation này vào class của bạn. Sau đó, bạn có thể sử dụng các annotation như @GetMapping, @PostMapping để ánh xạ các request đến các method trong controller. Các method này sẽ xử lý logic và trả về tên của view cần hiển thị. Spring MVC sẽ tìm view tương ứng và trả về cho người dùng.

Truyền Dữ Liệu Từ Controller Sang View với Model

Để hiển thị dữ liệu trên view, bạn cần truyền dữ liệu từ controller sang view. Spring MVC cung cấp một interface gọi là Model để thực hiện việc này. Model là một Map chứa các attribute. Bạn có thể thêm các attribute vào Model trong controller. Sau đó, bạn có thể truy cập các attribute này trong view sử dụng Thymeleaf.

Ví dụ, bạn có thể thêm một attribute tên là message vào Model. Trong Thymeleaf, bạn có thể truy cập attribute này sử dụng cú pháp ${message}. Thymeleaf sẽ thay thế ${message} bằng giá trị của attribute message. Điều này cho phép bạn hiển thị dữ liệu động trên view.

Đây là một ví dụ về cách truyền dữ liệu từ controller sang view:

@Controller
public class MyController {

    @GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("message", "Xin chào từ Spring MVC và Thymeleaf!");
        return "hello"; // Tên của view (hello.html)
    }
}

Các Thuộc Tính Cơ Bản Của Thymeleaf

Thymeleaf cung cấp nhiều thuộc tính hữu ích để xây dựng giao diện web. Dưới đây là một số thuộc tính cơ bản:

• th:text: Thiết lập text của một element.
• th:each: Lặp qua một danh sách các item.
• th:if: Hiển thị một element dựa trên một điều kiện.

th:text

Thuộc tính th:text cho phép bạn thiết lập text của một element. Ví dụ, bạn có thể sử dụng nó để hiển thị một thông báo từ controller.

<p th:text="${message}"></p>

Trong ví dụ này, Thymeleaf sẽ thay thế ${message} bằng giá trị của attribute message trong Model.

th:each

Thuộc tính th:each cho phép bạn lặp qua một danh sách các item. Ví dụ, bạn có thể sử dụng nó để hiển thị một danh sách các sản phẩm.

<ul>
    <li th:each="product : ${products}" th:text="${product.name}"></li>
</ul>

Trong ví dụ này, Thymeleaf sẽ lặp qua danh sách products và hiển thị tên của mỗi sản phẩm.

th:if

Thuộc tính th:if cho phép bạn hiển thị một element dựa trên một điều kiện. Ví dụ, bạn có thể sử dụng nó để hiển thị một thông báo nếu người dùng đã đăng nhập.

<p th:if="${loggedIn}">Chào mừng bạn đã đăng nhập!</p>

Trong ví dụ này, Thymeleaf sẽ hiển thị thông báo nếu attribute loggedIn trong Model có giá trị là true.

Ví dụ Hoàn Chỉnh

Dưới đây là một ví dụ hoàn chỉnh về cách sử dụng Thymeleaf với Spring MVC:

Controller:

@Controller
public class ProductController {

    @GetMapping("/products")
    public String listProducts(Model model) {
        List products = new ArrayList<>();
        products.add(new Product("Sản phẩm 1", 10000));
        products.add(new Product("Sản phẩm 2", 20000));
        model.addAttribute("products", products);
        return "products"; // Tên của view (products.html)
    }
}

class Product {
    private String name;
    private int price;

    public Product(String name, int price) {
        this.name = name;
        this.price = price;
    }

    public String getName() {
        return name;
    }

    public int getPrice() {
        return price;
    }
}

View (products.html):

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Danh Sách Sản Phẩm</title>
</head>
<body>
    <h1>Danh Sách Sản Phẩm</h1>
    <ul>
        <li th:each="product : ${products}">
            <span th:text="${product.name}"></span> - <span th:text="${product.price}"></span> VNĐ
        </li>
    </ul>
</body>
</html>

Trong ví dụ này, controller trả về một danh sách các sản phẩm cho view. View sử dụng th:each để lặp qua danh sách và hiển thị tên và giá của mỗi sản phẩm.

Kết luận

Trong bài viết này, chúng ta đã tìm hiểu cách tích hợp tầng View vào ứng dụng Spring Boot sử dụng Thymeleaf. Chúng ta đã tìm hiểu về @Controller, cách truyền dữ liệu từ controller sang view bằng Model và cách sử dụng các thuộc tính cơ bản của Thymeleaf. Hãy thử áp dụng những kiến thức này vào dự án của bạn để xây dựng giao diện web một cách dễ dàng và hiệu quả. Chúc bạn thành công!