Hướng Dẫn Chuyển Đổi HTML Tĩnh Sang Spring Boot (Thymeleaf)

Tài liệu này hướng dẫn bạn cách tự tay chuyển đổi các file HTML tĩnh (như các trang của UMass) sang giao diện động dùng Thymeleaf trong Spring Boot.

4 Bước Chuyển Đổi Thủ Công

Bước 1: Tạo file giao diện mới

Mở thư mục chứa giao diện của dự án: sisvietnamvn/src/main/resources/templates/
Tạo một file .html mới (Ví dụ: schools-colleges.html)
Dán "khung xương" cơ bản sau vào file vừa tạo:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{fragments/layout}">
<body>

    <!-- Nội dung của trang sẽ nằm trong thẻ main này -->
    <main role="main" layout:fragment="content">
        
        <!-- DÁN NỘI DUNG TỪ FILE GỐC VÀO ĐÂY -->

    </main>

</body>
</html>

Bước 2: Copy "phần ruột" từ file gốc

Mở file HTML gốc (Ví dụ: UMASS_sample\Schools & Colleges _ UMass Amherst.html).
Bấm Ctrl + F, tìm thẻ <main.
Bôi đen và Copy toàn bộ nội dung nằm từ thẻ mở <main> đến thẻ đóng </main>.

Lưu ý: Không copy các thẻ <html>, <head>, <header>, <footer> ở file gốc vì file layout.html đã lo phần đó. Đảm bảo bạn đang copy mã nguồn HTML của trang UMass, chứ không copy nhầm giao diện của cửa sổ chat.
Dán nội dung vừa copy vào giữa thẻ <main layout:fragment="content"> ở Bước 1.

Bước 3: Sửa lại đường dẫn Ảnh / Video (Rất quan trọng)

Sau khi dán xong, các bức ảnh sẽ bị lỗi đường dẫn. Bạn cần bấm Ctrl + F trong file mới tạo, tìm các thẻ <img> và sửa lại:

Xóa tất cả các thuộc tính srcset="..." hoặc data-src="..." hoặc data-srcset="...". (Nếu để lại, trình duyệt sẽ ưu tiên tải các link lỗi này).
Đổi thuộc tính src="..." thành th:src="@{/images/umass/tên_file_ảnh.jpg}".

Ví dụ sửa ảnh:

<!-- TRƯỚC KHI SỬA (Lỗi 404): -->
<img src="./Schools & Colleges _ UMass Amherst_files/anh_truong.jpg" srcset="https://drupal..." />

<!-- SAU KHI SỬA (Chuẩn Spring Boot): -->
<img th:src="@{/images/umass/anh_truong.jpg}" />

Bước 4: Khai báo URL trong Controller

Để khi gõ link trên trình duyệt, Spring Boot biết đường mở file HTML của bạn lên, bạn cần cấu hình Java:

Mở file src/main/java/com/sisvietnamvn/web/controller/HomeController.java.
Thêm một hàm để ánh xạ URL tới file HTML bạn vừa tạo:

package com.sisvietnamvn.web.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/")
    public String home() {
        return "index";
    }

    // --- THÊM CÁC TRANG MỚI Ở ĐÂY ---

    // Ví dụ cho trang Schools & Colleges:
    @GetMapping("/schools-colleges")
    public String schoolsColleges() {
        return "schools-colleges"; // Phải khớp với tên file schools-colleges.html
    }
}

🚀 Hoàn tất

Bạn vào Terminal và gõ: .\gradlew bootRun (nhớ nhấn Ctrl + C tắt cái cũ nếu đang chạy).
Mở trình duyệt gõ: http://localhost:8082/schools-colleges.
Bấm Ctrl + F5 để tải lại giao diện hoàn chỉnh có đầy đủ CSS!

3.5 KiB Raw Blame History