1. 程式人生 > >springboot2.x——thymeleaf引擎模板

springboot2.x——thymeleaf引擎模板

分享圖片 創建app ML 格式 mode 方言 .net html5 每天

springboot2.x——thymeleaf引擎模板

  java的引擎模板主要有:thymeleaf、freemarker、volecity等等,有興趣的可以去了解另外兩個模板,此處只說thymeleaf。(三者的優點與缺點:https://blog.csdn.net/ztchun/article/details/76407612)

  thymeleaf是什麽

  • 1.Thymeleaf 在有網絡和無網絡的環境下皆可運行,即它可以讓美工在瀏覽器查看頁面的靜態效果,也可以讓程序員在服務器查看帶數據的動態頁面效果。這是由於它支持 html 原型,然後在 html 標簽裏增加額外的屬性來達到模板+數據的展示方式。瀏覽器解釋 html 時會忽略未定義的標簽屬性,所以 thymeleaf 的模板可以靜態地運行;當有數據返回到頁面時,Thymeleaf 標簽會動態地替換掉靜態內容,使頁面動態顯示。

  • 2.Thymeleaf 開箱即用的特性。它提供標準和spring標準兩種方言,可以直接套用模板實現JSTL、 OGNL表達式效果,避免每天套模板、該jstl、改標簽的困擾。同時開發人員也可以擴展和創建自定義的方言。

  • 3.Thymeleaf 提供spring標準方言和一個與 SpringMVC 完美集成的可選模塊,可以快速的實現表單綁定、屬性編輯器、國際化等功能。

  springboot為什麽推薦使用thymeleaf?

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

  pom.xml引入thymeleaf依賴:

  技術分享圖片

  nekohtml依賴:非嚴格的Html嚴格

  創建application.properties文件(此處,為了方便閱讀,實際開發會使用yml文件)  

  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>

所有的引擎模板都需要引入,themeleaf不例外,請在頭部引入:<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

themeleaf更多的標簽學習:https://blog.csdn.net/u014042066/article/details/75614906

啟動main函數,註意端口的改變,運行結果如下:

技術分享圖片

springboot2.x——thymeleaf引擎模板