004 Thymeleaf study notes

1.Thymeleaf Overview

SpringBoot does not recommend the use of JSP , but supports some template engine technology: Freemarker, Thymeleaf, Mustache.

Simply put, Thymeleaf with a Velocity, FreeMarker similar template engine, it can completely replace the JSP. Compared to other template engines, it has the following four very attractive feature:
　　- combining static and dynamic : Thymeleaf Jieke running in the network and have no network environment that it allows artists to see the effect of static page in a browser , but also allows the programmer to see the effect of dynamic pages with data on the server. This is because it supports html prototype, and then add additional attributes to achieve in the html tag template + display of the data. The browser will ignore the interpretation of undefined html tag attributes, so thymeleaf templates can be statically run; when there is data to return to the page, Thymeleaf label dynamically replace static content, dynamic display the page.
　　- Out of the box : it offers standard and spring standard two dialects, can directly apply a template to achieve JSTL, OGNL expressions effect, to avoid trouble sets per day template, change jstl, change the label. At the same time developers can extend and create custom dialect.
　　- Multi dialect support : Thymeleaf provide spring standard dialect and a perfect integration with SpringMVC optional module, you can quickly achieve a form of binding, property editor, international and other functions.
　　- and SpringBoot seamless integration , SpringBoot provides a default configuration Thymeleaf, and set the view resolver to Thymeleaf, we can operate the same as before the operation Thymeleaf jsp. Code is almost no difference, that is, there are differences in the template syntax.

2.Thymeleaf Quick Start

(1) introducing the dependent Thymeleaf

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

(2) writing a controller method that returns the number of user data into the model, the future rendering of the page

package lucky.controller;

import lucky.domain.Users;
import lucky.service.UsersService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller
@RequestMapping(path = "/users")
public class UsersController {

    @Autowired
    private UsersService usersService;

    @RequestMapping(path = "/query")
    @ResponseBody
    public String queryUsers(){
        return "hello users";
    }

    @RequestMapping(path = "/queryUsersById")
    @ResponseBody
    public Users queryUsersById(@RequestParam("id") Integer id){
        return this.usersService.queryUsersById(id);

    @param
     *
     * query for all users, and displays at the front end/ **
    }model model object is used to pass data to the distal 
     * @return returns the view name
      * / 
    @RequestMapping (path = "/ queryAllUsers" )
     public String queryAllUsers (the Model Model) {
         // 1. User Search 
        List <the Users> Users = the this . usersService.queryAllUsers ();
         // 2. into the model 
        model.addAttribute ( "the Users" , the Users);
         // 3. return the template name (that is, classpath: / templates / html directory under the file name) 
        return "the Users" ; 
    } 

}

(3) static pages

Thymeleaf will be to determine the location of the template file in accordance with prefixes and suffixes. Analysis of source code can be obtained:

- The default prefix: the CLASSPATH: / Templates /
- Default suffix: .html

If we return to the view: usersit will point toclasspath:/templates/users.html

According to the above source code analysis, template default on the classpath of the templates folder, we create a new html file in which:

Html template writing data, rendering the model:

Note that the html namespace, changed: xmlns: th = "http://www.thymeleaf.org" will prompt syntax

We see here uses the following syntax:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style type="text/css">
        table {border-collapse: collapse; font-size: 14px; width: 80%; margin: auto}
        table, th,for example {border: 1px solid darkslategray;padding: 10px}
    </style>
</head>
<body>
<div style="text-align: center">
    <span style="color: darkslategray; font-size: 30px">欢迎光临！</span>
    <hr/>
    <table class="list">
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>密码</th>
            <th>中文名</th>
        </tr>
        <tr th:each="user : ${users}">
            <td th:text="${user.id}">1</td>
            <td th:text="${user.name}">张三</td>
            <td th:text="${user.password}">lucky</td>
            <td th:text="${user.name}">zhangsan</td>
        </tr>
    </table>
</div>
</body>
</html>

We see here uses the following syntax:

- $ {}: This is similar to el expression, but in fact is ognl grammar, and more powerful than el expression
- th- instruction: th- is the use of custom properties Html5 achieved. If not H5, may be `data-th-` instead
- th: each: similar to c: foreach through the collection, but the syntax is more concise
- th: text: text declaration tag
- e.g. <td th-text = '$ {user.id}'> 1 </ td>, if there user.id value overrides the default 1
- if no value, then the default 1 td display. The reason for this is the thymeleaf capable of combining static and dynamic, template parsing failure does not affect the display of the page, because it will show the default value!

3. renderings