FileCodeBox

1.3.2 Định nghĩa phần hiển thị (View)

Để giữ cho trang chủ của bạn đơn giản, nó không nên làm gì khác ngoài việc chào đón người dùng đến với trang web. Đoạn mã sau đây cho thấy mẫu template Thymeleaf cơ bản định nghĩa trang chủ của Taco Cloud.

Liệt kê 1.5 Template trang chủ Taco Cloud

html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
  <head>
      <title>Taco Cloud</title>
  </head>
  
  <body>
      <h1>Welcome to...</h1>
      <img th:src="@{/images/TacoCloud.png}"/>
  </body>
</html>

Không có quá nhiều điều cần bàn về template này. Dòng mã đáng chú ý duy nhất là dòng có thẻ <img> để hiển thị logo Taco Cloud. Nó sử dụng thuộc tính th:src của Thymeleaf cùng với biểu thức @{…} để tham chiếu đến hình ảnh bằng đường dẫn tương đối theo ngữ cảnh. Ngoài điều đó ra, nó không khác gì một trang Hello World đơn giản.

Hãy nói thêm một chút về hình ảnh đó. Tôi sẽ để bạn tự chọn và định nghĩa một logo Taco Cloud mà bạn thích. Tuy nhiên, bạn cần đảm bảo rằng nó được đặt đúng vị trí trong dự án.

Hình ảnh được tham chiếu bằng đường dẫn tương đối theo ngữ cảnh là /images/TacoCloud.png. Như bạn có thể nhớ từ phần cấu trúc dự án, các nội dung tĩnh như hình ảnh sẽ được lưu trong thư mục /src/main/resources/static. Điều đó có nghĩa là hình ảnh logo Taco Cloud cũng cần nằm trong dự án tại đường dẫn /src/main/resources/static/images/TacoCloud.png.

Bây giờ bạn đã có một controller để xử lý các yêu cầu tới trang chủ và một template để hiển thị trang chủ, bạn gần như đã sẵn sàng để khởi chạy ứng dụng và xem nó hoạt động. Nhưng trước tiên, hãy xem cách bạn có thể viết một bài kiểm thử (test) cho controller đó.

1.3.2 Định nghĩa phần hiển thị (View) ​

1.3.2 Định nghĩa phần hiển thị (View)