Spring Boot--Thymeleaf模板引擎/靜態頁面

時間  2019-11-24
標籤 spring boot thymeleaf 模板 引擎 靜態 頁面 欄目 Spring 简体版
原文   原文鏈接

1.Spring Boot對靜態資源的映射規則

若是你並不瞭解SpringBoot的靜態頁面,請看個人Thymeleaf第一篇:html

這是 Thymeleaf(一) 的連接 : aaatao66.github.io/2019/05/26/…java

  • 若是靜態資源文件夾下有 index.html的話,直接訪問localhost:8080的話,index就是歡迎頁

使用本身的圖標:git

在靜態資源文件夾放一個 favicon.ico 的圖標,springboot底層會自動調用這個爲咱們的圖標github

我找了個小叮噹的圖標web

效果:spring

自定義靜態資源文件夾

在你的 yml/properties下添加:express

spring.resources.static-locations=classpath:/hello/,classpath:/carson/
複製代碼

定義以後,原來默認的就不能夠使用了springboot

2. 引入 Thymeleaf

SpringBoot推薦使用thymeleaf,由於語法簡單,功能強大, 不推薦使用jsp,默認也不支持jspbash

<!-- 引入 thymeleaf 模板引擎-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
複製代碼

新版本的Spring Boot會自動設置好版本,若是你是1.x的Spring Boot,可能要本身更改版本了session

3. Thymeleaf 使用&語法

源碼:

@ConfigurationProperties(
    prefix = "spring.thymeleaf"
)
public class ThymeleafProperties {
    private static final Charset DEFAULT_ENCODING;
    public static final String DEFAULT_PREFIX = "classpath:/templates/";
    public static final String DEFAULT_SUFFIX = ".html";
    private boolean checkTemplate = true;
    private boolean checkTemplateLocation = true;
    
    // 下面是先後綴,也就是說只要放在 prefix 目錄下,就能夠被渲染了
    private String prefix = "classpath:/templates/";
    private String suffix = ".html";
複製代碼
  1. 寫一個 controller 方法:
@RequestMapping("nice")
    public String nice(){
        return "nice";
    }
複製代碼
  1. 在 resources下的 templates目錄下建立nice.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>這是 nice 標籤</h1>
</body>
</html>
複製代碼
  1. 啓動程序,訪問 localhost:8080/nice

使用:

1.html頁面 導入 thymeleaf 的名稱空間

<html lang="en" xmlns:th="http://www.thymeleaf.org">
複製代碼

2.使用thymeleaf語法

  • controller:
@RequestMapping("nice")
    public String nice(Map<String,Object> map){
        map.put("hello","你好");
        return "nice";
    }
複製代碼
  • nice.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>這是 nice 標籤</h1>
	<!--獲取做用域的文本內容-->
<div th:text="${hello}"></div>
</body>
</html>
複製代碼

語法規則

1.th:text; 改變當前元素裏面的內容;

​ th: 任意html屬性,來替換原生屬性

  • HTML代碼:
<div id="div01" class="mydiv" th:id="${hello}" th:class="${hello}" th:text="${hello}"></div>
複製代碼
  • Spring Boot解析後的源代碼:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>這是 nice 標籤</h1>

<div id="你好" class="你好">你好</div>
</body>
</html>
複製代碼

id 和 class都被替換了

屬性優先級

表達式

具體參考: 官方文檔

Simple expressions:(表達式語法)
Variable Expressions: ${...} : 獲取變量值; OGNL
	1. 獲取對象的屬性,調用方法
	2. 使用內置的基本對象
        #ctx : the context object.
        #vars: the context variables.
        #locale : the context locale.
        #request : (only in Web Contexts) the HttpServletRequest object.
        #response : (only in Web Contexts) the HttpServletResponse object.
        #session : (only in Web Contexts) the HttpSession object.
        #servletContext : (only in Web Contexts) the ServletContext object
Selection Variable Expressions: *{...} 選擇表達式: 和${}在功能上是同樣的
Message Expressions: #{...} 獲取國際化內容
Link URL Expressions: @{...} 定義URL
Fragment Expressions: ~{...}

Literals (字面量)
Text literals: 'one text' , 'Another one!' ,…
Number literals: 0 , 34 , 3.0 , 12.3 ,…
Boolean literals: true , false
Null literal: null
Literal tokens: one , sometext , main ,…

Text operations: (文本操做
String concatenation: +
Literal substitutions: |The name is ${name}|

Arithmetic operations: 數學運算
Binary operators: + , - , * , / , %
Minus sign (unary operator): -

Boolean operations: (布爾運算)
Binary operators: and , or
Boolean negation (unary operator): ! , not

Comparisons and equality: 比較運算
Comparators: > , < , >= , <= ( gt , lt , ge , le )
Equality operators: == , != ( eq , ne )

Conditional operators: (條件運算)
If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)

Special tokens:
Page 17 of 104
No-Operation: _
複製代碼

試驗如下:

  • controller代碼:
@RequestMapping("nice")
    public String nice(Map<String,Object> map){
        map.put("hello","<h1>你好<h1/>");
        map.put("users", Arrays.asList("zhangsan","lisi","wangwu"));
        return "nice";
    }
複製代碼
  • html 代碼
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>這是 nice 標籤</h1>

<div id="div01" class="mydiv" th:id="${hello}" th:class="${hello}" th:text="${hello}"></div>
<hr/>
<div th:text="${hello}"></div>
<div th:utext="${hello}"></div>
<hr/>
<!-- th:each 每次遍歷都會生成當前這個標籤-->
<h4 th:text="${user}" th:each="user:${users}"></h4>
<hr/>
<h4>
    <span th:each="user:${users}">[[${user}]]</span>
</h4>
</body>
</html>
複製代碼
  • 顯示結果爲:

  • 網頁源代碼:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>這是 nice 標籤</h1>

<div id="&lt;h1&gt;你好&lt;h1/&gt;" class="&lt;h1&gt;你好&lt;h1/&gt;">&lt;h1&gt;你好&lt;h1/&gt;</div>
<hr/>
<div>&lt;h1&gt;你好&lt;h1/&gt;</div>
<div><h1>你好<h1/></div>
<hr/>
<!-- th:each 每次遍歷都會生成當前這個標籤-->
<h4>zhangsan</h4>
<h4>lisi</h4>
<h4>wangwu</h4>
<hr/>
<h4>
    <span>zhangsan</span><span>lisi</span><span>wangwu</span>
</h4>
</body>
</html>
複製代碼

小總結:

<div th:text="${hello}"></div>
<div th:utext="${hello}"></div>
複製代碼

th:text : 轉義特殊字符,因此頁面顯示 <h1>你好</h1>

th:utext: 不轉義特殊字符, 頁面直接顯示 h1標籤 大標題 你好

th:each: 寫在 h4 標籤上,每次遍歷都會產生一個新的 h4標籤:

zhangsan

lisi

wangwu

而 寫在 span裏產生了3個span標籤:

zhangsan lisi wangwu

個人掘金: juejin.im/user/5d1873…

我的博客: aaatao66.github.io/

歡迎關注點贊~~ 我會陸續記錄本身的學習記錄~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程