通過一個簡單的與Springboot集成Demo認識Thymeleaf模板
什麼是Thymeleaf
Thymeleaf是一種Java XML / XHTML / HTML5模板引擎，可以在Web和非Web環境中使用。它更適合在基於MVC的Web應用程序的視圖層提供XHTML / HTML5，但即使在脫機環境中，它也可以處理任何XML文件。它提供了完整的Spring Framework集成。
Thymeleaf 的基礎使用
Thymeleaf的使用是由兩部分組成的：標籤 + 表達式，標籤是Thymeleaf的語法結構，而表達式就是語法裏的內容實現。
通過標籤 + 表達式，讓數據和模板結合，最終轉換成html代碼，返回給用戶。
下面通過一個Springboot結合jpa加Thymeleaf顯現一個簡單的curd。
controller:
@Controller
public class UserController {
/**
* The User service.
*/
@Autowired
UserService userService;
/**
* Index string.
*
* @return the string
*/
@RequestMapping("/")
public String index() {
return "redirect:/list";
}
/**
* List string.
*
* @param model the model
* @return the string
*/
@RequestMapping("/list")
public String list(Model model) {
List<User> users = userService.getUserList();
model.addAttribute("users", users);
return "user/list";
}
/**
* To add string.
*
* @return the string
*/
@RequestMapping("/toAdd")
public String toAdd() {
return "user/userAdd";
}
/**
* Add string.
*
* @param user the user
* @return the string
*/
@RequestMapping("/add")
public String add(User user) {
userService.save(user);
return "redirect:/list";
}
/**
* To edit string.
*
* @param model the model
* @param id the id
* @return the string
*/
@RequestMapping("/toEdit")
public String toEdit(Model model, Long id) {
User user = userService.findUserById(id);
model.addAttribute("user", user);
return "user/userEdit";
}
/**
* Edit string.
*
* @param user the user
* @return the string
*/
@RequestMapping("/edit")
public String edit(User user) {
userService.edit(user);
return "redirect:/list";
}
/**
* Delete string.
*
* @param id the id
* @return the string
*/
@RequestMapping("/delete")
public String delete(Long id) {
userService.delete(id);
return "redirect:/list";
}
}
顯示全部消息頁面：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>userList</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
</head>
<body class="container">
<br/>
<h1>用戶列表</h1>
<br/><br/>
<div class="with:80%">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>User Name</th>
<th>Password</th>
<th>Age</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${users}">
<th scope="row" th:text="${user.id}">1</th>
<td th:text="${user.userName}">neo</td>
<td th:text="${user.password}">Otto</td>
<td th:text="${user.age}">6</td>
<td><a th:href="@{/toEdit(id=${user.id})}">edit</a></td>
<td><a th:href="@{/delete(id=${user.id})}">delete</a></td>
</tr>
</tbody>
</table>
</div>
<div class="form-group">
<div class="col-sm-2 control-label">
<a th:href="@{/toAdd}" class="btn btn-info">add</a>
</div>
</div>
</body>
</html>
此例子貼出一些較關鍵代碼，具體源碼請到github上查看。
前後端分離做法
另外,我們通常使用Thymeleaf來做前後端分離，它的語法能夠自動被瀏覽識別，也就意味着即使在沒有動態數據時，它仍可以正常編程出頁面。
我經常使用的前後端分離思想有以絕對路徑引用和用web映射引用：
- 以絕對路徑應用模板，即不需要將頁面放置在項目中，可將它發至任意可以被項目應用到的路徑。
通過配置下面的選項，來指定視圖跳轉的前綴和靜態資源的位置：
#spring.thymeleaf.prefix=file:///E:/thymeleaf/templates
#spring.resources.static-locations=file:///E:/thymeleaf/static/
注意：上述引用絕對路徑windows下使用file:///，而linux下使用file:/home/thymeleaf/tempaltes,區別在於file:的斜槓數
2. 通過web服務器，將頁面映射出來，常用的做法有使用node和nginx，這裏以nginx爲例，配置nginx 路由，指向模板頁面和靜態資源，同樣，配置以下配置選項，指定構建視圖url的前綴和靜態資源的位置：
#spring.thymeleaf.prefix=http://localhost:8080/templates/
#spring.resources.static-locations=http://localhost:8080/static/
nginx 配置分享：
# 靜態資源匹配
location ^~ /static/ {
# 頁面掛載到容器中的靜態資源絕對路徑
root /home/fe-project/;
if ($http_accept_encoding) {
gzip on;
}
}
# 模板頁面匹配
location ^~ /templates/ {
# 頁面掛載到容器中的頁面絕對路徑
root /home/fe-project/;
}
# 通用匹配，api統一入口，可在定製不同規則,可有可無
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://test-project:8080;
}
上面配置目錄講解：
靜態文件目錄：/home/fe-project/static
頁面模板目錄：/home/fe-project/templates
nginx補充：
Nginx路由匹配規則：
通用匹配使用一個 / 表示，可以匹配所有請求，一般nginx配置文件最後都會有一個通用匹配規則，當其他匹配規則均失效時，請求會被路由給通用匹配規則處理；如果沒有配置通用匹配，並且其他所有匹配規則均失效時，nginx會返回 404 錯誤
如：
location = / {
echo "規則A";
}
location = /login {
echo "規則B";
}
location ^~ /static/ {
echo "規則C";
}
匹配結果：
http://localhost/ 規則A
http://localhost/login 規則B
http://localhost/static/a.html 規則C
項目源碼：
https://github.com/liaozihong/SpringBoot-Learning/tree/master/SpringBoot-Thymeleaf