Thymeleaf 的模板文件，本質上是標準的 HTML 文件，只是“加了標記（?th：）的屬性”，讓模板引擎在服務端渲染時能 識別并處理 這些屬性，從而完成數據（model） 的填充。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>用戶注冊</title>
</head>
<body><h1>用戶注冊</h1><!-- 注冊表單 -->
<form action="#" th:action="@{/register}" th:object="${user}" method="post"><p>姓名: <input type="text" th:field="*{name}" /></p><p>郵箱: <input type="email" th:field="*{email}" /></p><p><input type="submit" value="提交"/></p>
</form><!-- 已注冊用戶列表 -->
<h2>已注冊用戶</h2>
<ul><li th:if="${#lists.isEmpty(users)}">暫無用戶</li><li th:each="user : ${users}">[[${user.name}]] - [[${user.email}]]</li>
</ul></body>
</html>?這個就是前后沒有完全分離的項目，雖然畫頁面可以和前端分開做，但是頁面的跳轉還是靠后端的SpringMVC 的controller 實現控制的，頁面的調試渲染數據還是需要后端返回model,這種強依賴性影響開發效率。于是后面出現一種架構? MVVM, 拆開就是? V（前端）?<=== VM(頁面數據代理) ===> M(后端)
也就是說前端要的模型數據直接找代理（vm）要，通過數據雙向綁定自己模擬所需數據,不用直接找后端要，如果真要就發送Ajax請求到后端。基于這樣的思想前端開源框架代表有?Vue 。加上組件模塊化開發的思想，最終前后迎來分離項目的發展? 。
下面這個demo 是沒有使用Thymeleaf 寫的html,并且靜態資源還是在后臺服務器上，屬于純靜態資源展示。?
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>歡迎光臨</title></head><body><!-- 如果請求的是根目錄（/）Spring Boot 會自動查找以下文件作為歡迎頁：index.html 或 index.htm 或 index.jsp --><div class="welcome-container"><h1>歡迎來到我們的網站！</h1><p>探索我們為您精心準備的內容</p><div class="image-gallery"><img src="/images/wandou.jpg" alt="Wandou Image"/></div></div><!-- 樣式寫在 body 底部 --><style>/* 重置默認樣式 */* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);min-height: 100vh;display: flex;justify-content: center;align-items: center;padding: 20px;color: #333;}.welcome-container {text-align: center;background: white;padding: 30px 20px;border-radius: 16px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);max-width: 90%;width: 100%;max-width: 800px;}h1 {font-size: 2.2rem;color: #2c3e50;margin-bottom: 12px;}p {font-size: 1.2rem;color: #7f8c8d;margin-bottom: 24px;}.image-gallery {display: flex;flex-wrap: wrap;justify-content: center;gap: 16px;margin-top: 20px;}.image-gallery img {width: 100%;max-width: 300px; /* 限制最大寬度 */height: auto;border-radius: 12px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);transition: transform 0.3s ease;}.image-gallery img:hover {transform: translateY(-5px);}/* 小屏幕優化 */@media (max-width: 600px) {h1 {font-size: 1.8rem;}p {font-size: 1rem;}.welcome-container {padding: 20px 15px;}}/* 平板適配 */@media (min-width: 601px) and (max-width: 1024px) {.image-gallery {gap: 20px;}}</style></body>
</html>?直接訪問ip和端口
??
![[echarts]橫向柱狀圖](http://pic.xiahunao.cn/[echarts]橫向柱狀圖)
