springboot2.x——thymeleaf引擎模板

時間 2019-11-18

標籤 springboot2.x springboot thymeleaf 引擎模板欄目 Spring 简体版

原文原文鏈接

springboot2.x——thymeleaf引擎模板css

　　java的引擎模板主要有：thymeleaf、freemarker、volecity等等，有興趣的能夠去了解另外兩個模板，此處只說thymeleaf。（三者的優勢與缺點：https://blog.csdn.net/ztchun/article/details/76407612）html

　　thymeleaf是什麼？前端

1.Thymeleaf 在有網絡和無網絡的環境下皆可運行，即它可讓美工在瀏覽器查看頁面的靜態效果，也可讓程序員在服務器查看帶數據的動態頁面效果。這是因爲它支持 html 原型，而後在 html 標籤裏增長額外的屬性來達到模板+數據的展現方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性，因此 thymeleaf 的模板能夠靜態地運行；當有數據返回到頁面時，Thymeleaf 標籤會動態地替換掉靜態內容，使頁面動態顯示。java
2.Thymeleaf 開箱即用的特性。它提供標準和spring標準兩種方言，能夠直接套用模板實現JSTL、 OGNL表達式效果，避免天天套模板、該jstl、改標籤的困擾。同時開發人員也能夠擴展和建立自定義的方言。程序員
3.Thymeleaf 提供spring標準方言和一個與 SpringMVC 完美集成的可選模塊，能夠快速的實現表單綁定、屬性編輯器、國際化等功能。web

　　springboot爲何推薦使用thymeleaf？spring

提供了完美的springmvc支持
thymeleaf既是原型又是頁面，開發速度更快，符合springboot的理念。

　　pom.xml引入thymeleaf依賴：瀏覽器

　　nekohtml依賴：非嚴格的Html嚴格緩存

　　建立application.properties文件(此處，爲了方便閱讀，實際開發會使用yml文件)　　tomcat

　　yml語法須要注意一點：格式須要對齊，請勿使用tab鍵！！！！

spring:
  thymeleaf:
    cache: false # 開發時關閉緩存,否則無法看到實時頁面
    mode: LEGACYHTML5 # 用非嚴格的 HTML
    encoding: UTF-8
    servlet:
      content-type: text/html

server:
  port: 9090 #更改tomcat端口

一個簡單的測試用例：建立一個javaBean和對應的controller

User.java

 1 package com.baiye.springboothello.entity;
 2 
 3 public class User {
 4     private Long id;
 5     private String userName;
 6     private int age;
 7 
 8 
 9     public User() {
10 
11     }
12 
13     public User(Long id, String userName, int age) {
14         this.id = id;
15         this.userName = userName;
16         this.age = age;
17     }
18 
19     public Long getId() {
20         return id;
21     }
22 
23     public void setId(Long id) {
24         this.id = id;
25     }
26 
27     public String getUserName() {
28         return userName;
29     }
30 
31     public void setUserName(String userName) {
32         this.userName = userName;
33     }
34 
35     public int getAge() {
36         return age;
37     }
38 
39     public void setAge(int age) {
40         this.age = age;
41     }
42 }

UserController.java

 1 package com.baiye.springboothello.controller;
 2 
 3 import com.baiye.springboothello.entity.User;
 4 import org.springframework.stereotype.Controller;
 5 import org.springframework.ui.Model;
 6 import org.springframework.web.bind.annotation.RequestMapping;
 7 import org.springframework.web.bind.annotation.RequestMethod;
 8 
 9 import java.util.ArrayList;
10 import java.util.List;
11 
12 @Controller
13 public class UserController {
14     @RequestMapping(value = "/getUserInfo",method = RequestMethod.GET)
15     public String getUserInfo(Model model){
16         User user = new User(100L,"admin",18);
17         User user2 = new User(101L,"李四",19);
18         User user3 = new User(102L,"張三",20);
19         User user4 = new User(103L,"王五",21);
20         List<User> list = new ArrayList<>();
21         list.add(user2);
22         list.add(user3);
23         list.add(user4);
24         model.addAttribute("user",user);
25         model.addAttribute("list",list);
26         return "userInfo";
27     }
28 }

對於前端的文件：html、css、js等靜態文件,springboot推薦存存放於resources目錄下的static中，可是這裏咱們使用了thymeleaf引擎模板，所以html應該放在resources下另外一個目錄中——template下：

userInfo.html

 1 <!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello Thymeleaf</title>
 6 </head>
 7 <body>
 8 <div>
 9     <span>訪問 Model：</span><span th:text="${user.userName}"></span>
10 </div>
11 <div>
12     <span>訪問列表</span>
13     <table>
14         <thead>
15         <tr>
16             <th>編號</th>
17             <th>姓名</th>
18             <th>年齡</th>
19         </tr>
20         </thead>
21         <tbody>
22         <tr th:each="item : ${list}">
23             <td th:text="${item.id}"></td>
24             <td th:text="${item.userName}"></td>
25             <td th:text="${item.age}"></td>
26         </tr>
27         </tbody>
28     </table>
29 </div>
30 </body>
31 </html>