Spring Boot view integration layer Thymeleaf

Spring Boot integration Thymeleaf

Spring Boot integration Thymeleaf (Spring Boot official recommendation of the view layer technology)

Thymeleaf Features: thymeleaf be rendered by a specific mark html syntax.

Spring Boot integration of project steps Thymeleaf

1. The project created Thymeleaf (maven project of the jar type of spring boot project)
   
2. Open the pom.xml file, add the starter coordinate
   
   Code:

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.2.4.RELEASE</version>
</parent>
    <dependencies>
        <!-- spring boot的web启动器 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- thymeleaf 启动器 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>

3. Written Controller Controller
   

Code:

@Controller
public class UserController {
	/**
	 * 返回一个String的返回值（恒跳转），并且不是一个异步的ResponseBoby响应
	 * 框架会自动在templates目录下查找与之对应的html页面，
	 * 由Thymeleaf渲染出来。
	 * 前缀：classpath:/templates  后缀：.html
	 * 如果想要跳转到控制器，必须要让前缀和后缀失效，加上forward或redirect
	 */
	@RequestMapping("/show")
	public String  showInfo(Model model) {
		//存储用户名字符串，显示到页面
		model.addAttribute("username","翠花");
		//前缀：classpath:/templates  后缀：.html
		return "index";
	}
}

4. Write Thymeleaf page view layer (responsible for data display)
   Thymeleaf page must be placed in src / main / resources / templates under
   templates: This directory is meant secure content under the directory does not allow direct access to the outside world.
   
5. Startup class
   
6. Browser enter: localhost: 8080 / show
   

Detailed Thymeleaf grammar

1. Variable Output
   th: text: an output value in the page
   th: value: the value into the input tag value attribute

用户名：<span th:text="${username}"></span>
<hr/>
用户名: <input th:value="${username}"/> 

2. Thymeleaf built-in objects (with a certain built-in objects #)
   1: string manipulation strings
   strings.isEmpty (): determines whether the string is empty. True, false
   strings.startsWith (): determine whether what has been the beginning of a string. True, false
   strings.endsWith (): determine whether what has been the end of the string. True, to false
   strings.length (): returns the length of a string
   strings.indexOf (): find the position of the substring occurring
   strings.toUpperCase (): turn uppercase
   strings.tolowerCase (): turn lowercase
   Strings.substring (): intercepting substring

用户名的长度：<span th:text="${#strings.length(username)}"></span>  
  <hr/>
  获取用户名的姓：<span th:text="${#strings.substring(username,0,1)}"></span>

2. Date formatting a dates
   dates.format (): the default format to the browser as a label
   dates.format (time, 'yyyy-MM -dd hh: mm: ss'): converting a format customized according
   dates.year ( ): get in
   dates.month (): Gets month
   dates.day (): Gets day

当前时间：<span th:text="${time}"></span>
 <hr/>
 格式化日期：<span th:text="${#dates.format(time,'yyyy-MM-dd HH:mm:ss')}"></span>

3. Analyzing condition
   1: th: if

controller：

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

html：

您可能喜欢：<span th:if="${sex}=='男'">篮球,动漫</span> 

4. th:switch
   th:case

5. Loop iterates over

6. th:each

	1：迭代遍历list
		<table border="1" width="50%">
     <tr>
        <td>序号</td>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
     </tr>
     <!--var:状态变量  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>
     </tr>
 </table>

2: iterate through the Map
...

5. Acquiring operation target data scope

	//作用域  request，session  application 
request.setAttribute("req", "HttpServletRequest");
request.getSession().setAttribute("sess", "HttpSession");
request.getSession().getServletContext().setAttribute("app", "ServletContext");

<!--页面部分-->
Request数据：<span th:text="${#httpServletRequest.getAttribute('req')}"></span><br/>
Session数据：<span th:text="${session.sess}"></span><br/>
Application数据：<span th:text="${application.app}"></span><br/>

6. Url expression
   TH: the href
   TH: the src
   TH: Action
   . 1: expression syntax {} @
   2: Path Type

   1. Absolute path

   2. relative path

1：相对于当前项目的根目录  /
      <a th:href=”@{/index}”></a>
2: 相对于服务器路径的根目录 ~
      <a th:href=”@{~/项目名/资源}”></a>

<!-- 连接 url表达式 -->
 <a href="http://www.baidu.com">百度一下</a>
 <a th:href="@{http://www.baidu.com}">百度一下</a>
 <a th:href="@{/show}">show</a>
 <hr/>
 <img src="images/3.jpg" />
 <img th:src="@{${img}}"  />