HSF302 - Phần 6: Giao diện web với Thymeleaf

Đáp án đúng: "Providing a way to create reusable template layouts.". Thymeleaf Layout Dialect là phần mở rộng thêm các thuộc tính như layout:decorate và layout:fragment: ta viết một trang khung (layout) chứa phần đầu, menu, chân trang dùng chung, rồi mỗi trang nội dung khai báo trang khung nào sẽ bao lấy nó và chỉ điền vào các vùng fragment riêng, nhờ vậy bố cục được tái sử dụng thay vì chép lặp ở mọi trang. "Enhancing security for the web application." sai vì bảo mật thuộc Spring Security, còn phần tích hợp Thymeleaf với bảo mật là một dialect khác (thymeleaf-extras-springsecurity). "Managing database connections." sai vì Thymeleaf chỉ là template engine (bộ máy dựng khuôn mẫu) ở tầng view, không chạm tới cơ sở dữ liệu. "Optimizing JavaScript performance." sai vì dialect này xử lý HTML phía máy chủ, không can thiệp vào hiệu năng mã JavaScript chạy trên trình duyệt.

Đáp án đúng: "HTML attributes and elements.". Standard Dialect (phương ngữ chuẩn) của Thymeleaf là bộ processor định nghĩa các thuộc tính như th:text, th:each, th:if, th:href và phần tử như th:block, cùng cú pháp biểu thức chuẩn ${...}, *{...}, #{...}, @{...}; nhờ chúng mà tệp HTML vẫn mở được bằng trình duyệt như một bản mẫu tĩnh nhưng khi Thymeleaf xử lý thì được thay bằng dữ liệu thật. "Database drivers." là trình điều khiển JDBC để kết nối cơ sở dữ liệu, thuộc tầng truy cập dữ liệu chứ không thuộc engine template. "Security protocols." như TLS hay OAuth do tầng bảo mật như Spring Security đảm nhận, Thymeleaf chỉ có dialect bổ sung riêng để đọc thông tin bảo mật. "Network configurations." không liên quan, Thymeleaf chỉ sinh nội dung giao diện.

Đáp án đúng: "Generating dynamic HTML content.". Thymeleaf là template engine (bộ máy mẫu) phía máy chủ: controller trả về tên view, ViewResolver tìm tệp .html trong thư mục templates, rồi Thymeleaf xử lý các thuộc tính như th:text, th:each, th:if để điền dữ liệu từ Model vào và sinh ra trang HTML hoàn chỉnh gửi cho trình duyệt. Điểm mạnh của nó là template vẫn là HTML hợp lệ, mở thẳng trên trình duyệt được (natural template). "Handling database transactions." là việc của @Transactional và PlatformTransactionManager ở tầng service, Thymeleaf không chạm vào cơ sở dữ liệu. "Managing application security." do Spring Security đảm nhận; Thymeleaf chỉ có module phụ để ẩn hiện phần tử theo quyền chứ không quản lý bảo mật. "Building REST APIs." dùng @RestController trả JSON trực tiếp vào thân phản hồi, không cần template HTML.

Đáp án đúng: "Displays "Welcome!" only if user is logged in". Thuộc tính th:if của Thymeleaf đánh giá biểu thức user.loggedIn trên đối tượng user trong model lúc dựng trang ở máy chủ; nếu kết quả là true thì thẻ span cùng dòng chữ Welcome! được giữ lại trong HTML trả về, còn nếu false hoặc null thì Thymeleaf loại bỏ hẳn cả thẻ khỏi đầu ra chứ không chỉ ẩn bằng CSS. "Renders always" sai vì phần tử mang th:if chỉ được dựng khi điều kiện đúng; muốn luôn hiển thị thì bỏ th:if đi. "Displays if user.loggedIn is false" đảo ngược điều kiện, đó là hành vi của th:unless chứ không phải th:if. "Displays nothing by default" sai vì không có cơ chế mặc định ẩn nào: kết quả phụ thuộc hoàn toàn vào giá trị loggedIn lúc dựng trang, đúng thì lời chào vẫn hiện ra.

Đáp án đúng: "th:each". Thuộc tính th:each của Thymeleaf lặp qua một tập hợp như List, mảng hay Map và lặp lại phần tử HTML chứa nó cho mỗi phần tử, ví dụ đặt th:each với biểu thức s : ${students} trên thẻ tr sẽ sinh một dòng bảng cho mỗi sinh viên, kèm biến trạng thái cho chỉ số và số đếm. "th:if" chỉ hiển thị phần tử khi biểu thức đúng, là điều kiện chứ không phải vòng lặp. "th:text" thay nội dung văn bản của phần tử bằng giá trị biểu thức, có thoát ký tự HTML. "th:href" tính giá trị thuộc tính href, thường kèm cú pháp liên kết @{...} để dựng URL đúng context path. Muốn hiển thị danh sách thì dùng th:each bao ngoài, rồi th:text bên trong cho từng giá trị.

Đáp án đúng gồm hai ý: "XML templates" và "Text templates". Thymeleaf xử lý sáu chế độ template (template mode): HTML, XML, TEXT, JAVASCRIPT, CSS và RAW; trong đó XML là chế độ đánh dấu (markup) dành cho tài liệu XML hợp lệ, còn TEXT là chế độ văn bản thuần dùng cú pháp biểu thức nội tuyến để sinh email chữ, tệp cấu hình hay văn bản bất kỳ không có thẻ. "JSON templates" sai vì Thymeleaf không có chế độ JSON riêng; muốn sinh JSON thì dùng chế độ TEXT hoặc JAVASCRIPT, còn trong ứng dụng Spring thường để Jackson tuần tự hoá đối tượng. "Binary templates" sai vì Thymeleaf là template engine cho dữ liệu dạng văn bản, không xử lý tệp nhị phân như ảnh hay PDF.

Đáp án đúng: "@{/home}". Trong cú pháp biểu thức chuẩn của Thymeleaf, @{...} là biểu thức URL liên kết (link URL expression): với đường dẫn bắt đầu bằng dấu gạch chéo, Thymeleaf tự thêm context path của ứng dụng, cho phép truyền tham số như @{/home(id=${id})} và mã hoá URL, nên th:href="@{/home}" sinh ra liên kết đúng dù ứng dụng chạy ở đường dẫn gốc nào. "${/home}" là biểu thức biến, dùng để đọc thuộc tính trong model, còn /home không phải tên biến hợp lệ. "#{/home}" là biểu thức thông điệp, dùng để tra khoá trong tệp messages cho đa ngôn ngữ. "~{/home}" là biểu thức fragment, dùng với th:insert hoặc th:replace để chèn một mảnh template, không tạo đường dẫn liên kết.

Đáp án đúng: "Spring MVC.". Thymeleaf là template engine chạy phía máy chủ trên Java và có module tích hợp riêng thymeleaf-spring: ThymeleafViewResolver cắm vào luồng của DispatcherServlet, template đọc được dữ liệu trong Model, dùng biểu thức Spring EL, liên kết form với đối tượng qua th:object và th:field, hiển thị lỗi validation; Spring Boot còn tự cấu hình mọi thứ khi có spring-boot-starter-thymeleaf. "React.js" là thư viện JavaScript dựng giao diện phía trình duyệt, tự render bằng JavaScript nên không dùng template máy chủ của Java. "Angular.js" cũng là framework phía client có cú pháp template riêng chạy trong trình duyệt. "Node.js" là môi trường chạy JavaScript phía máy chủ, dùng các engine như EJS hay Pug, còn Thymeleaf là thư viện Java nên không chạy trên môi trường đó.

Đáp án đúng: "HTML, XML, JavaScript, CSS, and plain text.". Thymeleaf là template engine (bộ máy mẫu) phía server cho Java, hỗ trợ sáu chế độ mẫu: HTML và XML là chế độ đánh dấu, TEXT, JAVASCRIPT và CSS là chế độ văn bản, cùng RAW để xuất nguyên văn; nhờ vậy nó sinh được trang web, tệp XML, đoạn script hay nội dung email dạng văn bản thuần. "Only HTML files." sai vì HTML chỉ là chế độ thường gặp nhất trong Spring MVC chứ không phải duy nhất. "Only server-side Java code." sai vì Thymeleaf không xử lý mã Java, nó xử lý mẫu và chỉ đọc dữ liệu từ model qua biểu thức. "Only database queries." sai vì truy vấn cơ sở dữ liệu là việc của JPA hay JDBC, Thymeleaf không truy cập cơ sở dữ liệu.

Đáp án đúng: "Thymeleaf". Thymeleaf là template engine phía máy chủ: controller Spring MVC trả tên view, ThymeleafViewResolver tìm tệp HTML tương ứng trong thư mục templates rồi dựng trang từ dữ liệu trong model trước khi gửi về trình duyệt, nên nó là công nghệ view gắn trực tiếp với Spring MVC và được Spring Boot tự cấu hình qua spring-boot-starter-thymeleaf. "React" là thư viện JavaScript dựng giao diện phía trình duyệt; nó dùng được cùng ứng dụng Spring qua REST API nhưng là frontend tách rời, không phải view do Spring MVC dựng. "Vue.js" cũng là framework JavaScript phía client, quan hệ với Spring chỉ qua gọi API JSON. "Angular" là framework SPA (ứng dụng một trang) chạy trên trình duyệt, cùng lắm được phục vụ như tệp tĩnh chứ không đi qua ViewResolver.

Đáp án đúng: "Selection variable expressions.". Trong Thymeleaf, *{...} là biểu thức biến lựa chọn: nó được đánh giá trên đối tượng đang được chọn bằng th:object chứ không phải trên toàn bộ model, ví dụ form có th:object="${user}" thì bên trong th:field="*{name}" tương đương ${user.name}; đây là cách viết gọn rất hay dùng khi gắn form với đối tượng. "URL expressions." là cú pháp @{...}, dùng để dựng đường dẫn có context path và tham số. "Message expressions." là cú pháp #{...}, dùng để tra khoá thông điệp trong tệp messages phục vụ đa ngôn ngữ. "Fragment expressions." là cú pháp ~{...}, dùng với th:insert hoặc th:replace để chèn một mảnh template.

Đáp án đúng: "Message resolvers.". Thymeleaf hỗ trợ đa ngôn ngữ (internationalization, i18n) qua cơ chế message resolver: template dùng biểu thức #{...} như #{home.welcome}, engine nhờ message resolver tra khoá đó theo locale hiện tại; khi tích hợp với Spring, resolver này dựa vào MessageSource đọc các tệp messages.properties, messages_vi.properties, và LocaleResolver quyết định ngôn ngữ của từng yêu cầu. "CSS stylesheets." chỉ định dạng trình bày, không chứa hay chọn văn bản theo ngôn ngữ. "Database triggers." là đoạn mã chạy trong cơ sở dữ liệu khi có thao tác ghi, không liên quan tới engine template. "JavaScript libraries." có thể làm i18n phía trình duyệt, nhưng đó không phải cơ chế của Thymeleaf vốn render phía server.

Đáp án đúng: "Variable expressions.". Trong cú pháp biểu thức chuẩn của Thymeleaf, ${...} là biểu thức biến: nó được đánh giá trên ngữ cảnh, tức các thuộc tính mà controller đã đưa vào Model, bằng OGNL hoặc SpEL khi tích hợp Spring, ví dụ th:text="${user.name}" lấy thuộc tính name của đối tượng user. "URL expressions." là cú pháp @{...}, dùng để dựng đường dẫn liên kết có context path. "Message expressions." là cú pháp #{...}, dùng để tra khoá trong tệp messages phục vụ đa ngôn ngữ. "Fragment expressions." là cú pháp ~{...}, dùng với th:insert hoặc th:replace để chèn một mảnh template vào trang.

Đáp án đúng: "Thymeleaf". Thymeleaf là template engine Java chạy phía máy chủ, tích hợp với Spring MVC qua ThymeleafViewResolver: controller trả tên view, Thymeleaf đọc tệp HTML có các thuộc tính như th:text, th:each, th:if rồi thay dữ liệu từ model vào để sinh trang hoàn chỉnh; ưu điểm là tệp mẫu vẫn là HTML hợp lệ, mở thẳng trên trình duyệt được (natural templating). "React.js" là thư viện giao diện JavaScript chạy phía trình duyệt, không phải template engine của Spring MVC; nó thường gọi REST API do Spring cung cấp. "Angular.js" là framework JavaScript phía client, cũng nằm ngoài cơ chế ViewResolver. "Node.js" là môi trường chạy JavaScript phía máy chủ, một nền tảng backend riêng chứ không phải công cụ dựng view trong ứng dụng Spring.