Day 4: 1140112一、目标:观摩如何依照MVC架构，建立Java专案中的前端档案二、预计使用工具:VS code
三、档案架构:今天要建立的是前端档案，对照Day 2 内文提到的是src/main/resources这个资料夹(架构如下)，以及另外创立的webapp资料夹，里面放的都是非.java的档案。
本文主要会提到的是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.csscss是设定模板的样式，如字体大小、颜色等的档案，由于语法在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以后，可以看到以下画面:
七、补充小知识:Thymeleaf(一)定义Thymeleaf 是 Java 模板引擎，专门用于生成动态 HTML 页面，且广泛应用在 Spring Boot 框架中，将后端数据与前端 HTML 模板结合，实现动态渲染。(二)适合的应用场景1.在 Spring Boot Web 应用中构建动态页面。2.使用于需要与后端数据紧密集成的场景（如管理系统、个人中心页面）。3.在替代 JSP 作为模板引擎时，Thymeleaf 提供更现代和简洁的选择。