Use of thymeleaf template

1. Overview of thymeleaf

Simply put, Thymeleaf is a template engine similar to Velocity and FreeMarker , which can completely replace JSP . Compared with other template engines, it has the following three very attractive features:

1. Thymeleaf can be run in both networked and non-networked environments, that is, it allows artists to view the static effect of the page in the browser, and also allows programmers to view the dynamic page effect with data on the server. This is because it supports HTML prototype, and then add additional attributes in the HTML tag to achieve the template + data display mode. The browser will ignore undefined tag attributes when interpreting html, so the thymeleaf template can be run statically; when data is returned to the page, the Thymeleaf tag will dynamically replace the static content, so that the page is displayed dynamically.

2. Thymeleaf features out of the box. It provides two dialects, standard and spring. You can directly apply templates to achieve JSTL and OGNL expression effects, avoiding the trouble of applying templates, the jstl, and changing tags every day. At the same time, developers can also extend and create custom dialects.

3. Thymeleaf provides spring standard dialect and an optional module that is perfectly integrated with Spring MVC, which can quickly implement functions such as form binding, attribute editor, and internationalization.

Spring Boot project Thymeleaf template page storage location

View ThymeleafAutoConfiguration

View ThymeleafProperties

thymeleaf configured prefix and suffix of default prefix classpath: / templates / suffix .html

4. Jump to the Thymeleaf page through the Controller

http://localhost:8080/index/hello

访问 http://localhost:8080/index/userManager

How to modify the default storage address of Thymeleaf

Thymeleaf related grammar

1, simple expression

1. The expression of the variable: $ {...} is taken as the value in the field Model

2. Select the variable expression: * {...}

3. Information expression: # {...} #take the value in the I OC container

4、链接URL表达式：@{...} <a href="user/query.action"> <a th:href="@{user/query.action}" Href Actio Src

2, literally th: text

1. Text and text: 'one text', 'Another one!',…

2. Number of words: 0, 34, 3.0, 12.3, ...

3. Boolean constants: true, false

4. Empty text: null

5. Text mark: one, sometext, main, ...

3. Text processing

1. String concatenation: +

2. Text replacement: | The name is $ {name} |

4. Basic expression objects

1. #ctx: Context object

2. #vars: context variables

3. #locale: Context locale

4. #httpServletRequest: (Only in Web context) HttpServletRequest object

5. #httpSession: (Only in Web context) HttpSession object.

用法：<span th:text="${#locale.country}">CN</span>.

5. Utility Objects　

#dates: A practical method of java.util. Objects: date format, component extraction, etc.

~~#calendars: Similar to #date, but for java.util. Calendar object~~

#numbers: A practical way to format digital objects.

#strings: Practical methods of string objects: including startsWith, attach / append etc.

#objects: Objects for practical methods.

#bools: Practical methods for Boolean evaluation.

#arrays: Practical methods for arrays.

#lists: List collection.

#sets: set collection.

#maps: map collection.

#aggregates: Utility method for creating aggregates in arrays or collections.

#messages: Utility method to obtain external information inside variable expressions, in the same way as they will get using # {…} syntax

#ids: Utility method to deal with id attributes that may be duplicated (for example, due to iteration).

Thymeleaf reads the objects in xxx.properti e s [Understanding] Internationalization

Modify a pplication.properties

Create howStudent.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>学生信息</legend>
</fieldset>
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <span>学生编号:</span><span th:text="#{student.id}"></span><br>
                    <span>学生姓名:</span><span th:text="#{student.name}"></span><br>
                    <span>学生年龄:</span><span th:text="#{student.age}"></span><br>
                    <span>学生性别:</span><span th:text="#{student.sex}"></span><br>
                    <span>学生生日:</span><span th:text="#{student.birth}"></span><br>
                    <span>学生电话:</span><span th:text="#{student.phone}"></span><br>
                </div>
            </div>
        </div>
    </div>
</div>

<!--<div th:text="#{welcome('小明','WHSXT')}">-->

</div>

<script src="/layui/layui.js" charset="utf-8"></script>
</body>
</html>