String Boot-thymeleaf使用(四)

時間 2019-11-13

標籤 string boot thymeleaf 使用简体版

原文原文鏈接

簡介

Thymeleaf是面向Web和獨立環境的現代服務器端Java模板引擎，可以處理HTML，XML，JavaScript，CSS甚至純文本。，能夠徹底替代jsp，也是spring boot官方推薦的模版引擎javascript

Thymeleaf優點

1.能夠獨立運行先後端分離的時候前端能夠直接運行模版進行樣式調整css

2.不破壞html總體結構，更貼向htmlhtml

3.可使用模版實現JSTL、 OGNL表達式效果前端

Thymeleaf簡單使用

1.引入pom依賴java

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

properties配置根據實際須要配置web

# THYMELEAF (ThymeleafAutoConfiguration)
#開啓模板緩存（默認值：true）
spring.thymeleaf.cache=false 
#Check that the template exists before rendering it.
spring.thymeleaf.check-template=true 
#檢查模板位置是否正確（默認值:true）
spring.thymeleaf.check-template-location=true

#開啓MVC Thymeleaf視圖解析（默認值：true）
spring.thymeleaf.enabled=true
#模板編碼
spring.thymeleaf.encoding=UTF-8
#要被排除在解析以外的視圖名稱列表，用逗號分隔
#spring.thymeleaf.excluded-view-names=
#要運用於模板之上的模板模式。另見StandardTemplate-ModeHandlers(默認值：HTML5)
spring.thymeleaf.mode=HTML5
#在構建URL時添加到視圖名稱前的前綴（默認值：classpath:/templates/）
spring.thymeleaf.prefix=classpath:/templates/
#在構建URL時添加到視圖名稱後的後綴（默認值：.html）
spring.thymeleaf.suffix=.html
#Thymeleaf模板解析器在解析器鏈中的順序。默認狀況下，它排第一位。順序從1開始，只有在定義了額外的TemplateResolver Bean時才須要設置這個屬性。
#spring.thymeleaf.template-resolver-order=
#可解析的視圖名稱列表，用逗號分隔
#spring.thymeleaf.view-names=

2.新建一個Contorllerspring

@Controller
public class HelloWordContorller {
    @RequestMapping("/helloword")
    public String helloWord(Model model){
         List<StudentConfig> studentConfigList=new ArrayList<StudentConfig>();
        for(int i=0;i<10;i++){
            studentConfigList.add(new StudentConfig("小明"+i,i));
        }
        model.addAttribute("list",studentConfigList);
        return "index";
    }
}

3.再resource/template下面新建一個html頁面後端

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table td{
            text-align: center;
        }
    </style>
</head>
<body>
     <table style="width:100%">
        <thead>
           <tr>
               <th>學生姓名</th>
               <th>學生年齡</th>
           </tr>
        </thead>
         <tbody>
          <tr th:each="item : ${list}">
              <td th:text="${item.name}">小明</td>
              <td th:text="${item.age}">20</td>
          </tr>
         </tbody>
     </table>
</body>
</html>

xmlns:th="http://www.thymeleaf.org"  將靜態頁面轉換爲動態的視圖，須要進行動態處理的元素將使用「th:」前綴。
訪問輸出

thymeleaf模版引擎跟jsp比起來是否更易讀。若是寫jsp的話裏面有不少自定義標籤前端人員根本也沒法閱讀api

還有就是模版是html是能夠直接運行的數組

4.找到模版地址

打開

因此前端是能夠直接根據模版進行樣式調整

經常使用標籤

遍歷

  <tr th:each="item : ${list}">
              <td th:text="${item.name}">小明</td>
              <td th:text="${item.age}">20</td>
          </tr>

賦值

text賦值

<td th:text="${item.name}">小明</td>
              <td th:text="${item.age}">20</td>

html賦值

<p th:utext="${htmlcontent}">conten</p>

value賦值

    <input type="text" th:value="${user.name}" />

三元運算符

  <td th:text="${item.sex==0?'男':'女'}">男</td>

if else

<div th:if="${islogin}">已登陸</div>
<div th:unless="${islogin}"><a th:href="login.html">請登錄</a></div>

th:if是條件成立才渲染 ht:unless則是條件不成立才渲染

Switch

<div th:if="${islogin}">
    <div th:switch="${role}">
        <p th:case="'admin'">管理員</p>
        <p th:case="teacher">老師</p>
        <p th:case="*">普通用戶</p>
    </div>

</div>
<div th:unless="${islogin}"><a th:href="login.html">請登錄</a></div>

若是登錄判斷當前用戶角色 *表示default

Url

th:src

<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />

th:href

restful風格

  <tr th:each="item : ${list}">
              <td th:text="${item.name}">小明</td>
              <td th:text="${item.age}">20</td>
              <td th:text="${item.sex==0?'男':'女'}">男</td>
              <td><a th:href="@{'/edit/'+${item.id}}">編輯</a></td>
          </tr>

?參數傳遞

<tr th:each="item : ${list}">
              <td th:text="${item.name}">小明</td>
              <td th:text="${item.age}">20</td>
              <td th:text="${item.sex==0?'男':'女'}">男</td>
              <td><a th:href="@{/edit/info(id=${item.id})}">編輯1</a></td>

          </tr>

?多參數傳遞

<a th:href="@{/edit/info(id=${item.id},age=${item.age})}">編輯1</a>

th:style

設置背景圖片

 <td><div th:style="'background:url('+@{${item.headPath}}+')'"></div></td>

內嵌變量

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

好比格式化日期

    <div>系統時間:<label th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd hh:mm:ss')}"></label></div>

根據需求查api吧太多了

內聯js

<script th:inline="javascript">


    var username = /*[[${islogin}]]*/ 'Sebastian';
    var size = /*[[${islogin}]]*/ 0;
    
</script>

註釋表示經過模版引擎渲染將註釋後面的代碼將取消渲染渲染註釋裏面的模版代碼。便於原型顯示(直接打開html頁面)

模版引擎渲染結果

直接html打開效果

使用th:inline="javascript"開啓 [[....]]表示內聯文本

js附加代碼：

<script th:inline="javascript">

    /*[+
    var username = /*[[${islogin}]]*/ 'Sebastian';
    var size = /*[[${islogin}]]*/ 0;
    +]*/


</script>

/*[++]*/ 使用模版引擎渲染將正常渲染
模版引擎渲染結果

模版html直接打開結果

js移除代碼

<script th:inline="javascript">
    /*[- */
    var username = /*[[${islogin}]]*/ 'Sebastian';
    var size = /*[[${islogin}]]*/ 0;
    /* -]*/
</script>

跟js添加代碼同樣只是是相反添加模版引擎渲染則渲染普通html打開則渲染

使用thymeleaf佈局

layout佈局

引入pom依賴

        <dependency>
            <groupId>nz.net.ultraq.thymeleaf</groupId>
            <artifactId>thymeleaf-layout-dialect</artifactId>
        </dependency>

後臺管理系統爲例子頭部底部菜單欄都是固定的。

1.新建一個頁面都把架構複製過去而後改中間那一塊內容

缺點：

會致使咱們要修改總體風格每一個頁面都要改，好比隨着時間的迭代頁面會愈來愈多。

2.定義好骨架而後每一個部分引用對應的頁面

頭部引用頭部的html 菜單引用菜單的html 底部引用底部的html

缺點：

頁面排版要改動的時候好比菜單要放到右邊也會致使每一個頁面都要改動

3.使用模版頁面

使用模版頁定義好總體框架，而後每一個頁面都來引用這個模版將內容替換到指定位置

模版頁定義公共的樣式引入還有總體風格

1。首先建立一個模版頁面

layout.html

<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #header {
            background-color: black;
            color: white;
            text-align: center;
            padding: 5px;
        }

        #nav {
            line-height: 30px;
            background-color: #eeeeee;
            height: 300px;
            width: 100px;
            float: left;
            padding: 5px;
        }

        #section {
            width: 350px;
            float: left;
            padding: 10px;
        }

        #footer {
            background-color: black;
            color: white;
            clear: both;
            text-align: center;
            padding: 5px;
        }
    </style>
</head>
<body>
<div id="header">
    頭部
</div>

<div id="nav">
    菜單
</div>

<div layout:fragment="content" id="section">
    內容
</div>

<div id="footer">
    底部
</div>
</body>
</html>

定義命名空間：xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"

要填充的區域：layout:fragment="content"

2.建立一個用戶列表頁面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layout">
<head>
    <meta charset="UTF-8">
    <title>用戶列表</title>
    <link href="userlist.css" rel="stylesheet" type="text/css">
    <!--私有樣式-->
    <style type="text/css">
        table td{
            text-align: center;
        }
    </style>
</head>


<body>
<div  layout:fragment="content">用戶列表</div>

</body>
</html>
<script type="text/javascript"  src="userlist.js"></script>
<script type="text/javascript">
    $(function(){
            alert('dd');
    })

</script>

要填充模版頁的位置：layout:fragment="content"

定義命名空間 xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout"

layout:decorator="layout"爲模版頁路徑

效果

渲染後的html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>用戶列表</title>
    <meta charset="UTF-8">
    <style type="text/css">
        #header {
            background-color: black;
            color: white;
            text-align: center;
            padding: 5px;
        }

        #nav {
            line-height: 30px;
            background-color: #eeeeee;
            height: 300px;
            width: 100px;
            float: left;
            padding: 5px;
        }

        #section {
            width: 350px;
            float: left;
            padding: 10px;
        }

        #footer {
            background-color: black;
            color: white;
            clear: both;
            text-align: center;
            padding: 5px;
        }
    </style>
<meta charset="UTF-8">
<link href="userlist.css" rel="stylesheet" type="text/css">
<!--私有樣式-->
<style type="text/css">
        table td{
            text-align: center;
        }
    </style>
</head>
<body>
<div id="header">
    頭部
</div>

<div id="nav">
    菜單
</div>

<div id="section">用戶列表</div>

<div id="footer">
    底部
</div>
</body>
</html>
<script type="text/javascript"  src="userlist.js"></script>
<script type="text/javascript">
    $(function(){
            alert('dd');
    })

</script>

能夠發現頁面使用的css 和 script 都自動替換到模版頁的 head 和底部

這個時候就算咱們有上萬個頁面頁面風格要改變也就只須要改變模版頁就好了

`th:include` 和 `th:replace`

建立一個廣告頁advertising.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>廣告</title>

</head>
<body>
<div id="advertisingContent" th:fragment="advertisingContent">
    
    我是廣告
</div>
</body>
</html>

th:fragment="advertisingContent" 引用的時候會用到

頁面引用advertisingContent內容

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主頁</title>
</head>

<body>
<div >
    <div>主頁</div>
    <div  th:replace="advertising :: advertisingContent"></div>
</div>

</body>
</html>

th:replace="advertising :: advertisingContent" 爲把advertising(頁面路徑)advertisingContent爲哪一塊內容(省略則是整個頁面)

傳遞參數

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <style type="text/css">
        <!--自定義樣式-->
    </style>
</head>
<body>
<div id="advertisingContent" th:fragment="advertisingContent(name)">

    我是廣告<label th:text="${name}"></label>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主頁</title>

</head>

<body>
<div >
    <div>主頁</div>
    <div  th:replace="advertising(name='測試傳遞參數')"></div>
</div>

</body>
</html>

th:replacehe 和th:include用法同樣
區別
th:include只引用chilren
th:include

th:replacehe 引用包含自身

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。