NAS\NASPC
84 lines
3.5 KiB
Markdown
84 lines
3.5 KiB
Markdown
# 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
|
|
1. Mở thư mục chứa giao diện của dự án: `sisvietnamvn/src/main/resources/templates/`
|
|
2. Tạo một file `.html` mới (Ví dụ: `schools-colleges.html`)
|
|
3. Dán "khung xương" cơ bản sau vào file vừa tạo:
|
|
```html
|
|
<!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
|
|
1. Mở file HTML gốc (Ví dụ: `UMASS_sample\Schools & Colleges _ UMass Amherst.html`).
|
|
2. Bấm `Ctrl + F`, tìm thẻ `<main`.
|
|
3. 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.
|
|
4. 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:
|
|
|
|
1. **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).
|
|
2. **Đổi** thuộc tính `src="..."` thành **`th:src="@{/images/umass/tên_file_ảnh.jpg}"`**.
|
|
|
|
**Ví dụ sửa ảnh:**
|
|
```html
|
|
<!-- 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:
|
|
|
|
1. Mở file `src/main/java/com/sisvietnamvn/web/controller/HomeController.java`.
|
|
2. Thêm một hàm để ánh xạ URL tới file HTML bạn vừa tạo:
|
|
```java
|
|
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
|
|
1. Bạn vào Terminal và gõ: `.\gradlew bootRun` (nhớ nhấn `Ctrl + C` tắt cái cũ nếu đang chạy).
|
|
2. Mở trình duyệt gõ: `http://localhost:8082/schools-colleges`.
|
|
3. Bấm `Ctrl + F5` để tải lại giao diện hoàn chỉnh có đầy đủ CSS!
|