SpringBoot整合Thymeleaf

時間  2021-04-04
標籤 html java web spring apache 瀏覽器 安全 服務器 restful session 欄目 Spring 简体版
原文   原文鏈接

一、先建立項目html

 

 

 

 

 

 

 在pom文件裏添加依賴java

 

 pom.xmlweb

 

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.7.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com</groupId>
    <artifactId>gongspringthymeleaf</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>gongspringthymeleaf</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

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

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

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

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

 

 

目錄位置： src/main/resources/templates
templates： 該目錄是安全的。 意味着該目錄下的內容是不容許外界直接訪問的。

spring

 

 

 2. Thymeleaf 的基本使用
2.1Thymeleaf 特色：
Thymelaef 是經過他特定語法對 html 的標記作渲染。

apache

 

 2.2 編寫 Controller 瀏覽器


新建DomeController類安全

 

package com.gongspringthymeleaf.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class DemoController {
    @RequestMapping("/show")
    public String showInfo(Model model){
         model.addAttribute("msg","Thymeleaf 第一個案例");
         return "index";
    }
}

　　

 2.3 建立視圖 .html 服務器

templates建立index.htmlrestful

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Thymeleaf入門</title>
</head>
<body>
    <span th:text="Hello"></span>
    <hr/>
    <span th:text="${msg}"></span>
</body>
</html>

 

 

 2.4編寫啓動器session

 

package com.gongspringthymeleaf; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; /** * *Thymeleaf入門案例 * */ @SpringBootApplication public class App { public static void main(String[] args) { SpringApplication.run(App.class, args); } }

 

 

 運行啓動類

 

 

 

 

在瀏覽器中打開

3. Thymeleaf 語法詳解
3.1 變量輸出與字符串操做

3.1.1  th:text
th:text
在頁面中輸出值

 

3.1.2   th:value
th:value
能夠將一個值放入到 input 標籤的 value 中

在index.html插入如下語句

<hr/>
 <input type="text" name="username" th:value="${msg}"/>

 

 

 運行啓動類

 

 

 

在瀏覽器打開

 

 

3.1.3 判斷字符串是否爲空
Thymeleaf 內置對象


注意語法：
1， 調用內置對象必定要用#
2， 大部分的內置對象都以 s 結尾 strings、 numbers、 dates

${#strings.isEmpty(key)}
判斷字符串是否爲空， 若是爲空返回 true， 不然返回 false

 

添加語句

<hr/>
<span th:text="${#strings.isEmpty(msg)}"></span>

 

 

運行啓動類

 

 

 

 在瀏覽器中能夠看到

 

 

${#strings.contains(msg,'T')}
判斷字符串是否包含指定的子串， 若是包含返回 true， 不然返回 false

 

<hr/>
<span th:text="${#strings.contains(msg,'9')}"></span>
<span th:text="${#strings.contains(msg,'T')}"></span>

 

運行啓動類

 

 在瀏覽器中咱們能看到

 


${#strings.startsWith(msg,'a')}

判斷當前字符串是否以子串開頭， 若是是返回 true， 不然返回 false

 

<hr/>
    <span th:text="${#strings.startsWith(msg,'a')}"></span>
    <span th:text="${#strings.startsWith(msg,'T')}"></span>

 

 運行啓動類

 

 在瀏覽器中打開

 

 


${#strings.endsWith(msg,'a')}

判斷當前字符串是否以子串結尾， 若是是返回 true， 不然返回 false

 

<hr/>
    <span th:text="${#strings.endsWith(msg,'a')}"></span>
    <span th:text="${#strings.endsWith(msg,'案例')}"></span>

 

運行啓動類

 

 

 


${#strings.length(msg)}

返回字符串的長度

<hr/>
    <span th:text="${#strings.length(msg)}"></span>

 

 

運行啓動類

 

 

 

 


${#strings.indexOf(msg,'h')}

查找子串的位置， 並返回該子串的下標， 若是沒找到則返回-1

 

<hr/>
    <span th:text="${#strings.indexOf(msg,'h')}"></span>

 

 運行啓動類

 

 

 

 


${#strings.substring(msg,13)}
${#strings.substring(msg,13,15)}

截取子串， 用戶與 jdk String 類下 SubString 方法相同

<hr/>
    <span th:text="${#strings.substring(msg,13)}"></span>
    <span th:text="${#strings.substring(msg,13,14)}"></span>

 

 運行啓動類

 

 

 


${#strings.toUpperCase(msg)}
${#strings.toLowerCase(msg)}
字符串轉大小寫。 

<hr/>
    <span th:text="${#strings.toUpperCase(msg)}"></span>
    <span th:text="${#strings.toLowerCase(msg)}"></span>

 

運行啓動類

 

 

 

 

3.2 日期格式化處理

在controller類裏添加如下語句

 


${#dates.format(key)}
格式化日期， 默認的以瀏覽器默認語言爲格式化標準

 

<hr/>
    <span th:text="${#dates.format(key)}"></span>

 

運行啓動類

 

 


${#dates.format(key,'yyy/MM/dd')}
按照自定義的格式作日期轉換

 

<hr/>
    <span th:text="${#dates.format(key,'yyy/MM/dd')}"></span>

 

 

 運行啓動類

 

 

 

 


${#dates.year(key)}
${#dates.month(key)}
${#dates.day(key)}
year： 取年
Month： 取月
Day： 取日 

<hr/>
    <span th:text="${#dates.year(key)}"></span>- <hr/>
    <span th:text="${#dates.month(key)}"></span>- <hr/>
    <span th:text="${#dates.day(key)}"></span>

 

 運行啓動類

 

 

 

 

 

3.3 條件判斷

3.3.1th:if
<span th:if="${sex} == '男'">
性別： 男
</span>
<span th:if="${sex} == '女'">
性別： 女
</span>


新建index2.html

 

 在DomeCotroller類加入如下內容

@RequestMapping("/show2") public String showInfo2(Model model){ model.addAttribute("sex","男"); return "index2"; }

 

 

在index2.html加入

<span th:if="${sex} == '男'"> 性別：男 </span>
<span th:if="${sex} == '女'"> 性別：女 </span>

 

 

 

運行啓動類

 

 

 

 

 

 3.3.2  th:switch


<div th:switch="${id}">
<span th:case="1">ID 爲 1</span>
<span th:case="2">ID 爲 2</span>
<span th:case="3">ID 爲 3</span>
</div>

添加如下語句

 

 

 

<hr/>
    <div th:switch="${id}">
        <span th:case="1">ID爲1</span>
        <span th:case="2">ID爲2</span>
        <span th:case="3">ID爲3</span>
    </div>

 

 

運行啓動類

 

 

 

 

 

3.4  迭代遍歷
3.4.1 th:each

建立index3.html

 

 

 新建Users.java類

 

package com.gongspringthymeleaf.pojo; public class Users { private Integer userid; private String username; private Integer userage; public Integer getUserid() { return userid; } public void setUserid(Integer userid) { this.userid = userid; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public Integer getUserage() { return userage; } public void setUserage(Integer userage) { this.userage = userage; } public Users(Integer userid, String username, Integer userage) { super(); this.userid = userid; this.username = username; this.userage = userage; } public Users() { super(); // TODO Auto-generated constructor stub
 } }

 

 

 在DomeCotroller類添加如下代碼

@RequestMapping("/show3") public String showInfo3(Model model){ List<Users> list = new ArrayList<>(); list.add(new Users(1,"張三",20)); list.add(new Users(2,"李四",22)); list.add(new Users(3,"王五",24)); model.addAttribute("list", list); return "index3"; }

 

 

 在index3.html添加如下內容

<table border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr th:each="u : ${list}">
        <td th:text="${u.userid}"></td>
        <td th:text="${u.username}"></td>
        <td th:text="${u.userage}"></td>
    </tr>
</table>

 

 

運行啓動類

 

 

 

 

 狀態變量屬性
1,index:當前迭代器的索引 從 0 開始
2,count:當前迭代對象的計數 從 1 開始
3,size:被迭代對象的長度
4,even/odd:布爾值， 當前循環是不是偶數/奇數 從 0 開始
5,first:布爾值， 當前循環的是不是第一條， 若是是返回 true 不然返回 false
6,last:布爾值， 當前循環的是不是最後一條， 若是是則返回 true 不然返回 false

修改index3,html

<table border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Index</th>
        <th>Count</th>
        <th>Size</th>
        <th>Even</th>
        <th>Odd</th>
        <th>First</th>
        <th>lase</th>
    </tr>
    <tr th:each="u,var : ${list}">
        <td th:text="${u.userid}"></td>
        <td th:text="${u.username}"></td>
        <td th:text="${u.userage}"></td>
        <td th:text="${var.index}"></td>
        <td th:text="${var.count}"></td>
        <td th:text="${var.size}"></td>
        <td th:text="${var.even}"></td>
        <td th:text="${var.odd}"></td>
        <td th:text="${var.first}"></td>
        <td th:text="${var.last}"></td>
    </tr>
</table>

 

 

 運行啓動類

 

 

 

 

 

 3.4.3  th:each 迭代 Map

在controller類添加如下內容

@RequestMapping("/show4") public String showInfo4(Model model){ Map<String, Users> map = new HashMap<>(); map.put("u1", new Users(1,"張三",20)); map.put("u2", new Users(2,"李四",22)); map.put("u3", new Users(3,"王五",24)); model.addAttribute("map", map); return "index4"; }

 

 

 

新建index4.html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr th:each="maps : ${map}">
            <td th:text="${maps}"></td>
        </tr>
    </table>
    <th/>
    <table border="1">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr th:each="maps : ${map}">
            <td th:each="entry:${maps}" th:text="${entry.value.userid}" ></td>
            <td th:each="entry:${maps}" th:text="${entry.value.username}"></td>
            <td th:each="entry:${maps}" th:text="${entry.value.userage}"></td>
        </tr>
    </table>
</body>
</html>

 

 

 運行啓動類

 

 

 

 

3.5 域對象操做


3.5.1HttpServletRequest

新建index5.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body> Request:<span th:text="${#httpServletRequest.getAttribute('req')}"></span><br/> Session:<span th:text="${session.sess}"></span><br/> Application:<span th:text="${application.app}"></span>
</body>
</html>

 

 

 在controller類裏面添加如下內容

@RequestMapping("/show5") public String showInfo5(HttpServletRequest request, Model model){ request.setAttribute("req", "HttpServletRequest"); request.getSession().setAttribute("sess", "HttpSession"); request.getSession().getServletContext().setAttribute("app", "Application"); return "index5"; }

 

 

 

 

 

 

 

 

3.6 URL 表達式
th:href
th:src
3.6.1url 表達式語法
基本語法： @{}

 

從新新建項目

 

 

 

 

 

 

在pom文件添加如下依賴

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

 

 3.6.2  URL 類型
  3.6.2.1  絕對路徑
<a th:href="@{http://www.baidu.com}">絕對路徑</a><br/

 而後建立controller類

package com.gongspringurl.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; /** * Thymeleaf入門案例 * * */ @Controller public class DemoController { @RequestMapping("/{page}") public String showInfo(@PathVariable String page){ return page; } }

 

 

 

新建index.html頁面

 

 

新建App.java啓動類

package com.gongspringurl; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; /** * *Thymeleaf入門案例 * */ @SpringBootApplication public class App { public static void main(String[] args) { SpringApplication.run(App.class, args); } }

 

 

 

 運行啓動類

 

 

 

 

在index.html文件添加如下語句

<a th:href="@{http://www.baidu.com}">絕對路徑</a><br/>
    <a href="http://www.baidu.com">絕對路徑2</a>

 

 

 再運行啓動類，並打開瀏覽器

 3.6.2.2 相對路徑
1)相對於當前項目的根
相對於項目的上下文的相對路徑
<a th:href="@{/show}">相對路徑</a>
2) 相對於服務器路徑的根
<a th:href="@{~/project2/resourcename}">相對於服務器的根</a>

 

新建show.html頁面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page...Show</title>
</head>
<body> Show Page </body>
</html>

 

 

在index.html裏面添加如下內容

<hr/>
<a th:href="@{/show}">相對路徑</a>

 

 

 運行啓動類，在瀏覽器中打開

 

 

 點擊相對路徑

就會跳轉到show頁面了

 

 

3.6.3 在 url 中實現參數傳遞
<a th:href="@{/show(id=1,name=zhagnsan)}">相對路徑-傳參</a>

 

 修改controller類

 

 在index.html添加如下內容

<hr/>
    <a th:href="@{/show(id=1,name=zhagnsan)}">相對路徑-傳參</a>

 

 

 

運行起來類並打開瀏覽器 

 

 

點擊相對路徑傳參

 

 

  3.6.4 在 url 中經過 restful 風格進行參數傳遞

<a th:href="@{/path/{id}/show(id=1,name=zhagnsan)}"> 相 對 路 徑 - 傳 參

-restful</a>

 

<hr/>
    <a th:href="@{/path/{id}/show(id=1,name=zhagnsan)}">相對路徑-傳參-restful</a>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程