thymeleaf是用于编写html模版的编程语言（工具语言）

一、编程语言

用于编写html模版的编程语言。

thymeleaf一种命令式和声名式混合的寄生语言。

html与thymeleaf的结合是dsl与命令式语言的结合。

html与thymeleaf的结合是一种html的中间产品。

这种语言的输入是model数据，输出是结合上下文的html可用元素。

作为html元素的生成器。

根据model数据来生成描述html要素的属性；或者根据model提供集合元素的上下文，进而生成集合要素。

表达model数据

根据model数据来描述html元素属性或生成html数据。

<tr th:each="user : ${users}">

<td th:text="${user['name']}"></td>

<td th:text="${user['email']}"></td>

<td th:text="${user['phone']}"></td>

</tr>

<li th:class="${userPage == i} ? 'page-item active' : 'page-item'"

th:each="i:${#numbers.sequence(1,userTotalPage)}">

<a class="page-link" th:text="${i}" th:onclick="getUserList([[${i}]])"></a>

</li>

二、相对于js：

thymeleaf 用于全部或局部生成html。

js用于在生成后的维护。

三、template、model与页面请求

java的controller提供html的数据和需要渲染的html的名称。

全局请求可以通过js发起、也可以通过浏览器发起；

局部页面请求通过js发起，返回局部页面的html。

每一次请求都是服务端重新配置模版、数据、生成html并返回html的过程。

返回的是html，而不是数据。

function getUserList(pageNum){

console.log($("#user_page"))

axios.get('/sms/home/users',{

params:{

"page":pageNum,

"pageSize":"3"

}

})

.then(function(response){

console.log(response.data);

$("#user_list").html(response.data);

})

.catch(function(err){

console.log(err);

});

}

@RequestMapping(value = "/home/users")

public String homePageUsers(Model model,

@RequestParam("page") int page,

@RequestParam("pageSize") int pageSize) throws Exception {

PageInfo<?> users = userService.getRecordsByPage(page, pageSize);

model.addAttribute("users", users.getList());

return "home::user_list";

}