.

iT邦幫忙

1

[一天一學習 直到我完成任務管理系統] Day 4 前端檔案建立(以菜單網站為觀摩範本)

  • 分享至 

  • xImage
  •  

Day 4: 1140112
一、目標:觀摩如何依照MVC架構,建立Java專案中的前端檔案
二、預計使用工具:
VS code

三、檔案架構:
今天要建立的是前端檔案,對照Day 2 內文提到的是src/main/resources這個資料夾(架構如下),以及另外創立的webapp資料夾,裡面放的都是非.java的檔案。
https://ithelp.ithome.com.tw/upload/images/20250112/20169520czmExnie6C.png

本文主要會提到的是menu.html、style.css,以及menu.jsp,不過在後續實作中,前端部分會使用react來做。
※補充:jsp是Java的動態網頁技術,可以在 HTML 中嵌入 Java 程式碼,讓網頁根據使用者的請求動態生成內容。

四、網頁模板架構:menu.html
由於網路上有很多html資源,語法在w3school也能找到,略提幾個重點:
(一)xmlns:th="http://www.thymeleaf.org":引入 Thymeleaf ,表明這個 HTML 文件支持 Thymeleaf 的模板語法。
(二)<tr th:each="product : ${products}">是Thymeleaf的用法,細部說明如下:
1.原始的html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Resturant Menu</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
    <body>
        <h1>
            Welcome to the Resturant!
        </h1>
        <h2>
            Our Menu
        </h2>
        <table>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Price</th>
            </tr>
            <tr th:each="product : ${products}">
                <td th:text="${product.id}"></td>
                <td th:text="${product.name}"></td>
                <td th:text="${product.price}"></td>
            </tr>
        </table>
    </body>
</html>

五、模板的樣式選擇:style.css
css是設定模板的樣式,如字體大小、顏色等的檔案,由於語法在w3school也能找到,故這裡不贅述。

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    text-align: center;
    margin: 0;
    padding: 20px;
}

h1, h2 {
    color: #5a5a5a;
}

table {
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

th, td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

th {
    background-color: #6272a4;
    color: #fff;
    font-size: 18px;
}

td {
    font-size: 16px;
}

tr:hover {
    background-color: #f1f1f1;
    cursor: pointer;
}

六、網頁上可以做的互動:menu.jsp
這份檔案的功能是使用 JSTL 和 EL 渲染後端傳遞數據列表,並生成動態表格。

(一)<%@ taglib prefix="c" uri="jakarta.tags.core" %>
1.將 JSTL(JavaServer Pages Standard Tag Library)的核心標籤庫引入 JSP 頁面中。

2.prefix="c" 設置標籤前綴,允許在頁面中以 <c:XXX> 的形式使用標籤,像是以下程式碼中<c:forEach var="product" items="${products}">
其中,var="product":代表當前迭代的對象,items="${products}":指定迭代的集合,products 是後端傳遞到 JSP 的數據。

3.uri="jakarta.tags.core" 是 JSTL 核心標籤庫的標識符,確保應用服務器識別這些標籤,包含
<c:forEach>:用於迴圈遍歷、<c:if>:用於條件判斷、<c:choose>:用於多分支判斷。

<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>
                Coffee Shop Menu
            </title>
            <link rel="stylesheet" href="/css/styles.css">
        </head>
    <body>
        <h1>
            Welcome to the Coffee Shop!
        </h1>
        <h2>
            Our Menu
        </h2>
        <table>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Price</th>
            </tr>
            <c:forEach var="product" items="${products}">
                <tr>
                    <td>${product.id}</td>
                    <td>${product.name}</td>
                    <td>$${product.price}</td>
                </tr>
            </c:forEach>
        </table>
    </body>
</html>

所謂的後端數據,就是Day 3中ProductController.java的內容(合併(一)和(三)的程式碼):

@Controller
@RequestMapping("/products")
public class ProductController {
    @GetMapping("/list")
    public String listProducts(Model model) {
        List<Product> **products** = List.of(
            new Product(1, "Rice", 1.00),
            new Product(2, "Dumpling", 3.50),
            new Product(3, "Soup", 2.00),
        );
        model.addAttribute("products", **products**);
        return "menu"; // 對應 menu.jsp
    }
}

也就是說,經過渲染以後,我們可以看到的相當於以下內容:

<table>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rice</td>
        <td>$1.00</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Dumpling</td>
        <td>$3.50</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Soup</td>
        <td>$2.00</td>
    </tr>
</table>

對RestaurantMenuApplication.java按下run java以後,可以看到以下畫面:
https://ithelp.ithome.com.tw/upload/images/20250112/20169520uBvdlHOdEY.png

七、補充小知識:Thymeleaf
(一)定義
Thymeleaf 是 Java 模板引擎,專門用於生成動態 HTML 頁面,且廣泛應用在 Spring Boot 框架中,將後端數據與前端 HTML 模板結合,實現動態渲染。
(二)適合的應用場景
1.在 Spring Boot Web 應用中構建動態頁面。
2.使用於需要與後端數據緊密集成的場景(如管理系統、個人中心頁面)。
3.在替代 JSP 作為模板引擎時,Thymeleaf 提供更現代和簡潔的選擇。


.
圖片
  直播研討會

尚未有邦友留言

立即登入留言