（二）springboot整合thymeleaf模板

時間 2019-11-11

標籤 springboot 整合 thymeleaf 模板欄目 Spring 简体版

原文原文鏈接

在咱們平時的開發中，用了好久的jsp做view顯示層，可是標籤庫和JSP缺少良好格式的一個反作用就是它不多可以與其產生的HTML相似。因此，在Web瀏覽器或HTML編輯器中查看未經渲染的JSP模板是很是使人困惑的，並且獲得的結果看上去也很是醜陋（也就是不放到服務器，直接本地打開）。javascript

可是Thymeleaf模板是原生的，不依賴於標籤庫。它能在接受原始HTML的地方進行編輯和渲染（也就是說咱們經過thymeleaf寫一個頁面，若是不放到服務器進行渲染，也是能夠看到效果的，跟後端打開基本相同）css

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

配置springbean視圖

首先咱們須要讓springboot（springmvc通用）知道咱們的頁面是經過什麼來渲染的（jsp,freemarker,thymeleaf等等，以及模板的位置等信息）html

/**
 * 設置視圖解析器
 * @param templateEngine
 * @return
 */
@Bean
public ViewResolver viewResolver(SpringTemplateEngine templateEngine){
    ThymeleafViewResolver resolver = new ThymeleafViewResolver();
    resolver.setTemplateEngine(templateEngine);
    return resolver;
}

/**
 * 設置模板引擎
 * @param templateResolver
 * @return
 */
@Bean
public SpringTemplateEngine templateEngine(TemplateResolver templateResolver){
    SpringTemplateEngine engine = new SpringTemplateEngine();
    engine.setTemplateResolver(templateResolver);
    return engine;
}

/**
 * 模板解析引擎
 * @return
 */
@Bean
public TemplateResolver templateResolver(){
    TemplateResolver resolver = new SpringResourceTemplateResolver();
    resolver.setPrefix("/WEB-INF/template/");//設置地址前綴
    resolver.setSuffix(".html");//設置後綴
    resolver.setCacheable(false);//設置不緩存
    resolver.setTemplateMode("HTML5");
    return resolver;
    
}

ThymeleafViewResolver是Spring MVC中ViewResolver的一個實現類。像其餘的視圖解析器同樣，它會接受一個邏輯視圖名稱，並將其解析爲視圖java

TemplateResolver會最終定位和查找模板。與以前配置InternalResourceViewResolver相似，它使用了prefix和suffix屬性。前綴和後綴將會與邏輯視圖名組合使用，進而定位Thymeleaf引擎。它的templateMode屬性被設置成了HTML 5，這代表咱們預期要解析的模板會渲染成HTML 5輸出git

到這裏咱們就基本配置完了。github

接下來咱們在WEB-INF/template下創建home.html,頭部加入thymeleaf的命令空間web

<html xmlns:th="http://www.thymeleaf.org">

創建一個controller，寫咱們的第一個controller，打開訪問localhost:8080/home就會轉發到/WEB-INF/template/home.htmlspring

    @RequestMapping("/home")
    public String hello(Map<String,Object> map){
        User user = new User("1", "fei", 22, "愛好：籃球","admin");
        map.put("user",user);
        
        List<User> list = new ArrayList<>();
        for(int i =0;i<5;i++){
            User u = new User(""+(i+2), "fei"+(i+2), 22+(i+2), "愛好：籃球"+(i+2),"user"+i);
            list.add(u);
        }
        map.put("userList",list);
        
        return "home";
    }

thymeleaf語法

文本顯示

${}的使用和jsp的el表達式很相似，咱們在後臺綁定了一個user對象那麼咱們能夠經過${user.name}獲取用戶名，至關於user.getName();可是注意這個只能放到th表達式裏面後端

th:text就至關於把裏面的渲染主來的值放到aaa的位置上，若是th:text裏面的值只有${user.name},而且爲null，那麼就會顯示aaa數組

<span th:text="'用戶名：' +${user.name}">aaa</span>
#或者下面的這種方式，|…|中只能包含變量表達式${…}，不能包含其餘常量、條件表達式等
<span th:text="|用戶名：${user.name}|"></span>

運算符

在表達式中可使用各種算術運算符，例如+, -, *, /, %

<span th:text="'年齡*2='+ ${user.age}*2 "></span>

邏輯運算符

在表達式中可使用邏輯運算符，可是除了==其餘的要使用轉義字符

>, <, >=, <= != 對應(gt, lt, ge, le, ne)

<span th:text="(${user.age} eq 22)">aaa</span>  //輸出true
#可使用二元表達式
<span th:text="(${user.age} ge 23?'超過年紀':'ok')"></span>

條件判斷

th:if條件成立纔會顯示
th:unless條件不成立纔會顯示

<span th:if="(${user.age} gt 21)">年齡超過21纔會顯示</span>
<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

Switch

* 表明default，其餘都沒匹配到會顯示帶*的

<div th:switch="${user.role}">
  <p th:case="'admin'">用戶是管理員</p>
  <p th:case="*">用戶是普通人員</p>
</div>

循環

第二個參數稱做狀態變量，屬性有
- index:當前迭代對象的index（從0開始計算）
- count: 當前迭代對象的index(從1開始計算)
- size:被迭代對象的大小
- current:當前迭代變量
- even/odd:布爾值，當前循環是不是偶數/奇數（從0開始計算）
- first:布爾值，當前循環是不是第一個
- last:布爾值，當前循環是不是最後一個

<table>
  <tr>
       <th>index</th>
        <th>id</th>
        <th>name</th>
       <th>age</th>
  </tr>
  <tr th:each="user,iterStat: ${userList}" >
      <td th:text="${iterStat.index}">1</td>
        <td th:text="${user.id}">1</td>
        <td th:text="${user.name}">王五</td>
        <td th:text="${user.age}">55</td>
  </tr>
</table>

* 號和$符號共用

*{}裏面的值就是上層th:object對象裏面對應的屬性

 <div th:object="${user}">
   <p>Name: <span th:text="*{name}">wangwu</span>.</p>
   <p>AGE: <span th:text="*{age}">22</span>.</p>
 </div>

Utilities

Utilities爲了模板更加易用，Thymeleaf還提供了一系列Utility對象（內置於Context中），能夠經過#直接訪問

- dates ： java.util.Date的功能方法類。
- calendars : 相似#dates，面向java.util.Calendar
- numbers : 格式化數字的功能方法類
- strings : 字符串對象的功能類，contains,startWiths,prepending/appending等等。
- objects: 對objects的功能類操做。
- bools: 對布爾值求值的功能方法。
- arrays：對數組的功能類方法。
- lists: 對lists功能類方法
- sets
- maps

表達式基本對象
- #ctx: 上下文對象.
- #vars: context中的變量們.
- #locale: context中的locale.
- #httpServletRequest: (只在web context中) HttpServletRequest對象.
- #httpSession: (只在web context中) HttpSession對象.

將date渲染成後面的格式
${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
獲得當前時間
${#dates.createNow()}
獲得當前時間並顯示
<span th:text=" ${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd hh:mm:ss')} "></span>

utilities其餘使用連接，很詳細

內聯

Text inlining

後面[[]]裏面的值是從域中獲取的text文本，跟使用th:text效果相似

<span th:inline="text">[[${user.name}]]</span>

JavaScript inlining

<script th:inline="javascript">
    var name = [[${user.name}]];
</script>

下面這個意思是若是沒有跑在服務器，name就會是咱們的lisi，若是在服務器上，會取出user.name的值，忽略lisi

var name = /*[[${user.name}]]*/"lisi";

CSS inlining

<style th:inline="css">
    .[[${classname}]] {
      text-align: [[${align}]];
    }
</style>

none inlining

可是若是我麼就要顯示[[${user.name}]]不須要他轉換呢，就會用到none inlining

<span th:inline="none">[[${user.name}]]</span>

嵌套

在當前home.html路徑下有個footer.html,內容以下

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  <body>
    <footer th:fragment="copy">
      &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
  </body>
</html>

在home.html引用這個footer，footer表明html的名稱，copy表明fragmen的值

<div th:replace="footer:: copy"></div>
<div th:include="footer:: copy"></div>

展示的源碼：

<footer>
    &copy; 2011 The Good Thymes Virtual Grocery
</footer>
<div>
    &copy; 2011 The Good Thymes Virtual Grocery
</div>

得出結論：
- th:replace會將當前div整個替換成foot的元素
- th:include只是將footer裏面的內容拷貝進來

連接

連接通常用th:href="@{地址}"，「@{}」表達式，用來計算相對於URL的路徑,在html ==<a href="/register"></a>

<a th:href="@{/register}">register</a>

經常使用標籤

springboot簡化配置

固然在springboot中，上面的視圖解析器等註冊都不須要咱們作了，由於springboot都默認幫咱們作了，（只要咱們將Thymeleaf maven依賴添加到項目的pom文件下，就啓用了Spring Boot的自動配置。當應用運行時，Spring Boot將會探測到類路徑中的Thymeleaf，而後會自動配置視圖解析器、模板解析器以及模板引擎）

若是什麼都不配置，springboot會默認查找類跟目錄下的templates文件夾下的模板，home.html放到src/main/ resources/templates目錄下

若是咱們要在home的html中引入一些靜態資源怎麼辦呢，這點springboot也幫咱們考慮到了

springboot它會將「/**」映射到幾個資源路徑中

META-INF/resources/
resources
static
public

也就是說咱們在有一個static/css/home.css

那麼咱們這樣引入就能夠了。

<link type="text/css" rel="stylesheet" th:href="@{/css/home.css}"></link>

固然，咱們仍是能夠配置前綴後綴，以及是否緩存等，只須要一個簡單的配置便可

#配置前綴
#spring.thymeleaf.prefix=classpath:/templates/  
#配置後綴
#spring.thymeleaf.suffix=.html
#spring.thymeleaf.mode=HTML5 
#spring.thymeleaf.encoding=UTF-8 
#spring.thymeleaf.content-type=text/html 
#是否開啓緩存
spring.thymeleaf.cache=false