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";

    }

 

 

 

 

转载于:https://www.cnblogs.com/feng9exe/p/11496568.html