Spring Boot Integrates Thymeleaf View Layer

Posted by Stephen68 on Tue, 07 Apr 2020 20:54:18 +0200


Spring Boot Integration Thymeleaf

Spring Boot integrates Thymeleaf (the official view layer technology recommended by Spring Boot)

Thymeleaf feature: Thymeleaf renders html tags through specific syntax.

Project steps for integrating Thymeleaf with Spring Boot

  1. Create a Thymeleaf project (a jar-type spring boot project for maven project)
  2. Open the pom.xml file and add the starter coordinates

        <!-- spring boot Of web starter -->
        <!-- thymeleaf starter -->
  1. Write Controller Controller Controller


public class UserController {
	 * Returns the return value of a String (hop) and is not an asynchronous ReponseBoby response
	 * The framework automatically looks for the corresponding html page in the templates directory.
	 * Rendered by Thymeleaf.
	 * Prefix: classpath:/templates Suffix:.html
	 * If you want to jump to the controller, you must invalidate the prefix and suffix, plus forward or redirect
	public String  showInfo(Model model) {
		//Store user name string, display to page
		model.addAttribute("username","Jade Blossom");
		//Prefix: classpath:/templates Suffix:.html
		return "index";

  1. Write Thymeleaf view layer page (responsible for data display)
    Thymeleaf pages must be placed under src/main/resources/templates
    templates: The directory is secure. This means that the contents of the directory are not directly accessible from outside.
  2. Startup Class
  3. Browser input: localhost:8080/show

Thymeleaf syntax details

  1. Variable Output
    th:text: Output value in page
    th:value: Put the value in the value attribute of the input tag
User name: <span th:text="${username}"></span>
User name: <input th:value="${username}"/> 

  1. Thymeleaf built-in objects (built-in objects must use #)
    1: String operations strings
    strings.isEmpty(): Determines if the string is empty.True,false
    strings.startsWith(): Determines if a string has started anything.True,false
    strings.endsWith(): Determines whether or not a string ends.True,false
    strings.length(): Returns the length of the string
    strings.indexOf(): Find where the substring appears
    strings.toUpperCase(): uppercase
    strings.tolowerCase(): To lower case
    Strings.substring(): intercepts substrings
User name length: <span th:text="${#strings.length(username)}"></span>  
  Get the name of the user: <span th:text="${#strings.substring (username, 0,1)}"></span>

  1. Date formatting processing dates
    dates.format(): defaults to browser as formatting label
    dates.format(time,'yyyy-MM-dd hh:mm:ss'): Convert in a custom format
    dates.year(): Get the year
    dates.month(): Get the month
    dates.day(): Get the day
Current time: <span th:text="${time}"></span>
 Formatting date: <span th:text="${#dates.format (time,'yyyy-MM-dd HH:mm:ss')}"></span>

  1. Conditional Judgment
    1: th: if


model.addAttribute("sex", "male");


You might like: <span th:if="${sex}=='man'">basketball, animation</span> 
  1. th:switch

  2. Loop iteration traversal

  3. th:each

	1: Iterative traversal list
		<table border="1" width="50%">
        <td>Sequence Number</td>
        <td>Full name</td>
     <!--var:state variable  index ,count,first last size  even odd-->
     <tr th:each="user,var:${list}">
        <td th:text="${var.count}"></td>
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.age}"></td>

2: Iterate over a map

  1. Scoped object data acquisition
	//Scope request, session application 
request.setAttribute("req", "HttpServletRequest");
request.getSession().setAttribute("sess", "HttpSession");
request.getSession().getServletContext().setAttribute("app", "ServletContext");

<!--Page section-->
Request Data:<span th:text="${#httpServletRequest.getAttribute('req')}"></span><br/>
Session Data:<span th:text="${session.sess}"></span><br/>
Application Data:<span th:text="${application.app}"></span><br/>
  1. Url expression
    1: Expression syntax @{}
    2:Path Type
    1. Absolute path

    2. Relative Path

1: relative to the current project's root directory/
      <a th:href="@{/index}"></a>
2: Root directory relative to server path~
      <a th:href="@{~/Project Name/Resource}"></a>

<!--Join url expression-->
 <a href="http://www.baidu.com">Baidu Baidu</a>
 <a th:href="@{http://www.baidu.com}">Baidu Baidu</a>
 <a th:href="@{/show}">show</a>
 <img src="images/3.jpg" />
 <img th:src="@{${img}}"  />

Topics: Java Thymeleaf Spring Session Maven