“This is the second day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.

Introduce Thymeleaf

Modify the HTML tags to introduce the Thymeleaf engine so that the th:* syntax can be used in other tags, which is the premise of the following syntax.

<! DOCTYPEhtml SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

Copy the code

Variable expression

  • Standard variable expression

Grammar:

Th: text = “…” To get the value of a variable, use {… }”, get the value of the variable with…” For javabeans, use the variable name. Property name, as in the EL expression.

    <p th:text="${msg}">According to the information</p>
    <p th:text="${user.name}">Display name</p>
Copy the code

The principle of

Use the th:text tag to replace the value in the p tag. The original value in p can not be written. For the front and back end separation, write the original tag value, can effectively give the front-end development for display use or based on.

Note:

The $expression must be written inside the th tag, otherwise it will not work.

  • Select variable expression

1. Grammar:

Th: text = “$* {… }”, for Javabeans, use the method of obtaining the object first, and then directly select the property name

 <div th:object="${user}">
        <p th:text="*{name}">The name</p>
        <p th:text="*{age}">age</p>
        <p th:text="*{age}">gender</p>
    </div>

Copy the code

Principle 2.

Get the object using the th:object tag, by using th:text=$*{… } syntax selects the desired properties.

  • URL expression

1. Grammar:

th:href=@{… }, Thymeleaf handles urls with @{… }

Accessing the error page: Change the context path<a href="error/error">404.html</a>// Relative path, scoped only in the current project<a href="/error/error">404.html</a>// Absolute path, error when context path changes<a th:href="@{error/error}" >404.html</a>The absolute path (concatenated with @{}) helps us add the changed context pathCopy the code

2. The role

Thymeleaf th:href/will help us add a context path, so it is recommended that all Thymeleaf paths use: absolute paths (concatenated with @{}).

Access page: < br / > < a href = "/ 404 HTML" > 404 HTML < / a > < a href = "/ index/index" th: href = "@ {| / index/index? A = 21 & b = ${msg1} |} "> view tag < / a >Copy the code

Expression tool object

  • Dates correspond to methods of the java.util.Date object, formatting, Date component extraction, and so on
  • Calendars #calendars is similar to #dates and corresponds to the java.util.Calendar object
  • #numbers A utility method for formatting a number object
  • Strings correspond to java.lang.String utility methods: contains, startsWith, prepending/appending, etc
  • #objects Utility methods for objects
  • #bools tool method for Boolean operations
  • # Arrays utility methods for arrays
  • #lists Utility method for lists
  • The tool method for setting
  • #maps utility method for maps
  • # The instrumental method used to create an aggregation of arrays or collections
  • The utility method used to get externalized messages inside variable expressions, which is different from the #{… } syntax is obtained in the same way
  • # IDS utility methods for handling ID attributes that may occur repeatedly (for example, as a result of traversal)

String conjunction

String concatenation

<span th:text=${MSG}" +${MSG}">Data and information</span>
Copy the code

Second, concise way: |… |

<span th:text="| I string data ${MSG} |">Data and information</span>
Copy the code

Inline write

The standard dialect allows us to use tag attributes for almost anything, so why is inline writing our preferred expression?

Because in some cases expressions are written directly into HTML text, it is more practical to use inline writing for aesthetics, simplicity and so on. For example, we might prefer to write:

Tag attributes:<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>Inline writing:<p>Hello, [[${user.name}]]!</p>
Copy the code

conclusion

The common syntax expressions of ThymLeaf need to be reasonably used with tags and attributes, which can solve many communication problems caused by the separation of the front and back ends. Thymeleaf can be used to replace Ajax and other front-end web technology very simply to realize the operation of dynamic data interaction.