Thymeleaf【快速入門】

時間  2020-09-19
標籤 thymeleaf 快速入門 简体版
原文   原文鏈接

https://mp.weixin.qq.com/s/CUGdfG6J_qsI_fatP-dnTw

Thymeleaf【快速入門】

image.png

前言：忽然發現本身給本身埋了一個大坑，畢設好難..每個小點拎出來都能當一個小題目（手動擺手..），沒辦法本身選的含着淚也要把坑填完..先一點一點把須要補充的知識學完吧..javascript

Thymeleaf介紹

稍微摘一摘【官網】上面的介紹吧（翻譯是找到，有些增長的內容）：html

  • 1.Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
    Thymeleaf是向Web和獨環境的現代服務器端Java模板引擎，可以處理HTML，XML，JavaScript，CSS甚純本。前端

  • 2.Thymeleaf's main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stronger collaboration in development teams.
    Thymeleaf旨在提供個優雅的、度可維護的建立模板的式。 爲了實現這標，Thymeleaf建在然模板的概念上，將其邏輯注到模板件中，不會影響模板設計原型。 這改善了設計的溝通，彌合了設計和開發團隊之間的差距。java

  • 3.With modules for Spring Framework, a host of integrations with your favourite tools, and the ability to plug in your own functionality, Thymeleaf is ideal for modern-day HTML5 JVM web development — although there is much more it can do.
    對於Spring框架模塊,一個容許你集成你最喜歡的工具的平臺,而且可以插入本身的功能,Thymeleaf是理想的現代JVM HTML5 web開發工具,雖然它能夠作得多。mysql

而後官網還給出了一段看起來仍然像HTML同樣工做的集成了Thymeleaf模版的代碼，咱們大體的來感覺一下：git

image.png

Thymeleaf官網給的例子

簡單說， Thymeleaf 是一個跟 Velocity、FreeMarker 相似的模板引擎，它能夠徹底替代 JSP。程序員

Thymeleaf與JSP的區別在於，不運行項目以前，Thymeleaf也是純HTML（不須要服務端的支持）而JSP須要進行必定的轉換，這樣就方便前端人員進行獨立的設計、調試。相較與其餘的模板引擎，它有以下三個極吸引人的特色：github

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

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

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

摘自：spring boot(四):thymeleaf使用詳解-純潔的微笑

00#先把須要環境搭起來

也就是SpringBoot項目的搭建，很常規，快速搭起來：

image.png

稍微改改包名還有描述，點擊【Next】：

image.png

勾選上Web/Thymeleaf支持，而後點擊【Next】：

image.png

選擇項目保存位置，點擊【Finish】：

image.png

至此就簡單建立了一個用於學習Thymeleaf的簡單環境。

01#建立一個Hello Thymeleaf頁面

第一步：新建一個HelloController

在【com.wmyskxz.demo】下新建一個【controller】包，而後新建一個【HelloController】：

package com.wmyskxz.demo.controoler;

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

@Controller
public class HelloController {

    @RequestMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("name", "thymeleaf");
        return "hello";
    }
}

第二步：新建一個hello.html頁面

在【resources】下的【templates】下新建一個【hello.html】文件，使用這個目錄的緣由是當你使用模板引擎時Spring Boot會默認在src/main/resources/templates下去找，固然你也能夠修改這個默認路徑，這裏就不作演示了：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Thymeleaf快速入門-Hello Thymeleaf</title>
</head>
<body>
<p th:text="${name}">name</p>
<p th:text="'Hello！ ' + ${name} + '!'">hello world</p>
<p th:text="|Hello！ ${name}!|">hello world</p>
</body>
</html>

第三步：把項目跑起來

事實上，上面已經展現了三種拼接字符串的方式，你應該也能看出thymeleaf的一點端倪，不過你第一件注意到的事應該是這是一個HTML5文件，能夠由任何瀏覽器正確的顯示，由於它不包含任何非HTML得標籤（瀏覽器會忽略他們不明白的全部屬性，如：th:text）

image.png

直接打開hello.html顯示的內容

項目運行以後，咱們在地址欄輸入localhost:8080/hello，就會看到意料之中結果正確的頁面：

image.png

可是你也可能會注意到，這個模板並非一個真正有效的HTML5文檔，由於HTML5規範不容許在th:*形式中使用這些非標準屬性。事實上，咱們甚至在咱們的<html>標籤中添加了一個xmlns:th屬性，這絕對是非HTML5標準：<html xmlns:th="http://www.thymeleaf.org">

無論怎樣，你已經看到了咱們將如何使用Thymeleaf模板引擎訪問model中的數據：「${}」，這和JSP極爲類似，下面咱們將進一步展現Thymeleaf的用法。

第四步：對項目作一些修改以方便調試

如今咱們基礎的環境和第一個任務（一個Hello World）頁面都已經開發完成了，可是有一點很差的是，每一次咱們對頁面的修改都不能獲得及時的反應，咱們須要不斷的重啓服務器以看到效果，這在實際開發過程當中是十分糟糕的表現，咱們須要作一些修改，讓Thymeleaf頁面可以實時的刷新而不須要重啓服務器。

打開IDEA->Setting，將下面的選項【Build project automatically】給勾選上：

image.png

而後按下快捷鍵【Ctrl + Alt + Shift + /】，召喚出【Maintenance】菜單，進入【Registry】：

image.png

把【compiler.automake.allow.when.app.running】這個選項的 √ 給打上：

image.png

而後再把【application.properties】弄成這個樣子：

#thymeleaf 配置
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
#緩存設置爲false, 這樣修改以後立刻生效，便於調試
spring.thymeleaf.cache=false

而後重啓項目，對咱們的hello.html稍稍作一些修改，稍等一下子，你就能刷新頁面看到效果，完美。

image.png

10#更多Thymeleaf的基礎用法

1. model 中的數據迭代

Thymeleaf 的迭代和 JSP 的寫法也很類似，咱們將就上面的hello項目改一下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Thymeleaf快速入門-Hello Thymeleaf</title>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>學生id</th>
        <th>學生姓名</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="s:${students}">
        <td th:text="${s.id}"></td>
        <td th:text="${s.name}"></td>
    </tr>
    </tbody>
</table>
</body>
</html>

爲了配合演示，在【com.wmyskxz.demo】下新建一個【pojo】包，而後新建一個【Student】類：

package com.wmyskxz.demo.pojo;

public class Student {
    private String name;
    private Integer id;

    public Student(String name, Integer id) {
        this.name = name;
        this.id = id;
    }

    // getter and setter
}

再把controller改改，給前端添加幾條數據：

@RequestMapping("/hello")
public String hello(Model model) {

    List<Student> students = new ArrayList<>();
    students.add(new Student("張三", 1));
    students.add(new Student("李四", 2));
    students.add(new Student("王五", 3));
    students.add(new Student("二麻子", 4));
    students.add(new Student("三棒子", 5));

    model.addAttribute("students", students);
    return "hello";
}

重啓項目，而後在地址欄輸入：localhost:8080/hello，能看到正確的顯示，完美：

代碼解釋：

使用th:each來作循環迭代（th:each="s:${students}"），s做爲迭代元素來使用，而後像上面同樣訪問迭代元素中的屬性，相信這樣的用法應該不會陌生。

進階-帶狀態的遍歷

咱們也可使用th:each="s,status:${students}"方式遍歷，就能夠把狀態放在status裏面了，同時還能夠用th:class="${stauts.even}?'even':'odd'"來判斷奇偶。

status裏面包含的信息大體以下：

屬性 說明
index 從0開始的索引值
count 從1開始的索引值
size 集合內元素的總量
current 當前的迭代對象
even/odd boolean類型的，用來判斷是偶數個仍是奇數個
first boolean類型，判斷是否爲第一個
last boolean類型，判斷是否爲最後一個

咱們再次來修改一下咱們的hello.html，讓它多顯示一行index屬性，並增長一些簡單的效果好讓單雙行區別開來：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Thymeleaf快速入門-Hello Thymeleaf</title>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>index</th>
        <th>學生id</th>
        <th>學生姓名</th>
    </tr>
    </thead>
    <tbody>
    <tr th:class="${status.even}?'even':'odd'" th:each="s,status:${students}">
        <td th:text="${status.index}"></td>
        <td th:text="${s.id}"></td>
        <td th:text="${s.name}"></td>
    </tr>
    </tbody>
</table>
</body>
<style>
    .even{
        background-color: hotpink;
    }
    .odd{
        background-color: cornflowerblue;
    }
</style>
</html>

不用重啓，刷新一下頁面就能夠看到效果，完美：

image.png

2. 數據判斷

Thymeleaf 的條件判斷是經過th:if來作的，只有條件爲真的時候纔會顯示當前元素，取反能夠用not（th:if="not 條件"）或者th:unless，或者常見的三元判斷符（x?y:z）也是適用的，咱們動手再來修改咱們的hello.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Thymeleaf快速入門-Hello Thymeleaf</title>
</head>
<body>
<!-- 當students集合爲空則顯示提示信息 -->
<div th:if="${#lists.isEmpty(students)}">studnets集合爲空！</div>
<!-- 當students集合不爲空時纔會顯示下面的元素 -->
<div th:if="${not #lists.isEmpty(students)}">
    <table>
        <thead>
        <tr>
            <th>index</th>
            <th>學生id</th>
            <th>學生姓名</th>
        </tr>
        </thead>
        <tbody>
        <tr th:class="${status.even}?'even':'odd'" th:each="s,status:${students}">
            <td th:text="${status.index}"></td>
            <td th:text="${s.id}"></td>
            <td th:text="${s.name}"></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<style>
    .even {
        background-color: hotpink;
    }

    .odd {
        background-color: cornflowerblue;
    }
</style>
</html>

而後咱們相應的把Controller丟給hello.html的數據給清空：

@RequestMapping("/hello")
public String hello(Model model) {

    List<Student> students = new ArrayList<>();
//        students.add(new Student("張三", 1));
//        students.add(new Student("李四", 2));
//        students.add(new Student("王五", 3));
//        students.add(new Student("二麻子", 4));
//        students.add(new Student("三棒子", 5));

    model.addAttribute("students", students);
    return "hello";
}

重啓項目，刷新頁面，能看到正確的錯誤提示信息（對於這樣的，須要有錯誤提示的頁面我也不知道應該怎麼寫好，這裏就簡單示範一下，若是知道怎麼寫好的小夥伴記得提示一下啊）：

image.png

代碼解釋：

經過${not #lists.isEmpty(students)}表達式，判斷了students是否爲空，Thymeleaf支持>、<、>=、<=、==、!=做爲比較條件，同時也支持將SpringEL表達式語言用於條件中，表達式中的#lists.isEmpty()語法是Thymeleaf模板自帶的一種內置工具，像這樣的內置工具不只方便並且能提升咱們的效率，完整的內置工具在這裏能夠看到：【傳送門】

3. 在 JavaScript 中訪問 model

首先咱們須要學習如何在Thymeleaf中引用靜態資源，很簡單，使用@{}就能夠，這在JSP下是極易出錯的。咱們在【main】目錄下新建一個【webapp】目錄，而後在【staitc/js】目錄下新建一個【thymeleaf.js】文件：

function testFunction(){
    alert("test Thymeleaf.js!");
}

在hello.html的<head>標籤中添加上下面這句話：

<script type="text/javascript" src="../../webapp/static/js/thymeleaf.js" th:src="@{/static/js/thymeleaf.js}"></script>

經過th:href="@{/static/js/thymeleaf.js}"這種方式，能夠在渲染後的html裏自動生成上下文路徑，爲了方便咱們調試，也就是能在顯示器中直接打開html文件進行效果的查看，咱們還添加了src屬性（src="../../webapp/static/js/thymeleaf.js"）

刷新項目，能正確獲得提示信息：

image.png

而後咱們把hello.html改寫成下面這個樣子：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Thymeleaf快速入門-Hello Thymeleaf</title>
    <script th:inline="javascript">
        var single = [[${student}]];
        console.log(single.name + "/" + single.id);
    </script>
</head>
<body>
</body>
</html>

再讓Controller簡單的傳一個學生到前臺：

@RequestMapping("/hello")
public String hello(Model model) {
    model.addAttribute("student", new Student("我沒有三顆心臟", 1));
    return "hello";
}

刷新項目，按下F12，就能夠在控制檯中看到正確的信息了：

image.png

代碼解釋：

經過th:inline="javascript"添加到script標籤，這樣JavaScript代碼便可訪問model中的屬性，再經過[[${}]]格式來得到實際的值。

4. 包含

咱們在開發中經常都把頁面共同的header和footer提取出來，弄成單獨的頁面，而後讓該包含的頁面包含進來，咱們就拿footer舉例，首先在【templates】下新建一個要背其餘頁面包含的footer頁面【include】：

<html xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="footer1">
    <p>All Rights Reserved</p>
</footer>
<footer th:fragment="footer2(start,now)">
    <p th:text="|${start} - ${now} All Rights Reserved|"></p>
</footer>
</html>

而後直接在咱們的hello.html頁面中分別引用上面頁面定義好的兩個foot：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Thymeleaf快速入門-Hello Thymeleaf</title>
</head>
<body>
<div th:include="include::footer1"></div>
<div th:replace="include::footer2(2015,2018)"></div>
</body>
</html>

刷新頁面，能夠看到效果：

image.png

代碼解釋：

咱們可使用th:fragment屬性來定義被包含的模板片斷，而後使用th:include和th:replace兩個標籤來直接引用標記好的片斷，上面hello.html其實就至關於：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Thymeleaf快速入門-Hello Thymeleaf</title>
</head>
<body>
<div>
    <p>All Rights Reserved</p>
</div>
<footer>
    <p>2015 - 2018 All Rights Reserved</p>
</footer>
</body>
</html>

也能夠很明顯感受到兩個標籤的差異，include會保留本身的主標籤，而replace會保留fragment的主標籤。

11#一個CRUD+分頁的實例

接下來咱們沿用上面的基礎，把這個項目進行必定的擴展，變成一個CRUD+分頁的完整項目，不過首先，咱們須要把以前由於很差習慣寫的pojo.student類裏的id和name順序交換一下，好匹配數據庫裏的結構：

package com.wmyskxz.demo.pojo;
public class Student {
    private Integer id;
    private String name;
    // getter and setter
}

第一步：準備好數據庫環境

建表SQL：

create database wmyskxz;
use wmyskxz;
CREATE TABLE student (
  id int(11) NOT NULL AUTO_INCREMENT,
  name varchar(30),
  PRIMARY KEY (id)
) DEFAULT CHARSET=UTF8;

第二步：修改application.properties和pom.xml

增長數據庫相關配置到application,properties中，完整的文件以下：

#thymeleaf 配置
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
#緩存設置爲false, 這樣修改以後立刻生效，便於調試
spring.thymeleaf.cache=false

#數據庫
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/wmyskxz?characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

往pom.xml增長jdbc,mybatis,pageHelper的jar包：

<?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.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.wmyskxz</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Demo project for Spring Boot + Thymeleaf</description>

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

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <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-devtools</artifactId>
            <optional>true</optional> <!-- 這個須要爲 true 熱部署纔有效 -->
        </dependency>

        <!-- servlet依賴. -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>
        <!-- tomcat的支持.-->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>
        <!-- mybatis -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.1.1</version>
        </dependency>
        <!-- mysql -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.21</version>
        </dependency>
        <!-- pageHelper -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>4.1.6</version>
        </dependency>
    </dependencies>

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

</project>

第三步：增長StudentMapper

新建【mapper】包，並在其下新增StudentMapper接口：

package com.wmyskxz.demo.mapper;

import com.wmyskxz.demo.pojo.Student;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface StudentMapper {

    @Select("select * from student")
    List<Student> findAll();

    @Insert("insert into student ( name ) values (#{name}) ")
    int save(Student student);

    @Delete("delete from student where id= #{id} ")
    void delete(int id);

    @Select("select * from student where id= #{id} ")
    Student get(int id);

    @Update("update student set name=#{name} where id=#{id} ")
    int update(Student student);
}

第四步：新增StudentController類

在【controller】包下新增一個【StudentController】類：

package com.wmyskxz.demo.controoler;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.wmyskxz.demo.mapper.StudentMapper;
import com.wmyskxz.demo.pojo.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.List;

@Controller
public class StudentController {
    @Autowired
    StudentMapper studentMapper;

    @RequestMapping("/addStudent")
    public String listStudent(Student student) throws Exception {
        studentMapper.save(student);
        return "redirect:listStudent";
    }

    @RequestMapping("/deleteStudent")
    public String deleteStudent(Student student) throws Exception {
        studentMapper.delete(student.getId());
        return "redirect:listStudent";
    }

    @RequestMapping("/updateStudent")
    public String updateStudent(Student student) throws Exception {
        studentMapper.update(student);
        return "redirect:listStudent";
    }

    @RequestMapping("/editStudent")
    public String listStudent(int id, Model m) throws Exception {
        Student student = studentMapper.get(id);
        m.addAttribute("student", student);
        return "editStudent";
    }

    @RequestMapping("/listStudent")
    public String listStudent(Model m, @RequestParam(value = "start", defaultValue = "0") int start, @RequestParam(value = "size", defaultValue = "5") int size) throws Exception {
        PageHelper.startPage(start, size, "id desc");
        List<Student> students = studentMapper.findAll();
        PageInfo<Student> page = new PageInfo<>(students);
        m.addAttribute("page", page);
        return "listStudent";
    }
}

第五步：配置PageHelper

新建【config】包，並在下面新建【PageHelperConfig】類：

package com.wmyskxz.demo.config;

import com.github.pagehelper.PageHelper;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.Properties;

@Configuration
public class PageHelperConfig {

    @Bean
    public PageHelper pageHelper() {
        PageHelper pageHelper = new PageHelper();
        Properties p = new Properties();
        p.setProperty("offsetAsPageNum", "true");
        p.setProperty("rowBoundsWithCount", "true");
        p.setProperty("reasonable", "true");
        pageHelper.setProperties(p);
        return pageHelper;
    }
}

第六步：編寫HTML文件

爲了演示，咱們簡單添加兩個頁面就行了，一個是【listStudent.html】：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf快速入門-CRUD和分頁實例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>

<div style="width:500px;margin:20px auto;text-align: center">
    <table align='center' border='1' cellspacing='0'>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>編輯</td>
            <td>刪除</td>
        </tr>
        <tr th:each="student:${page.list}">
            <td th:text="${student.id}"></td>
            <td th:text="${student.name}"></td>
            <td><a th:href="@{/editStudent(id=${student.id})}">編輯</a></td>
            <td><a th:href="@{/deleteStudent(id=${student.id})}">刪除</a></td>
        </tr>
    </table>
    <br/>
    <div>
        <a th:href="@{/listStudent(start=0)}">[首 頁]</a>
        <a th:href="@{/listStudent(start=${page.pageNum-1})}">[上一頁]</a>
        <a th:href="@{/listStudent(start=${page.pageNum+1})}">[下一頁]</a>
        <a th:href="@{/listStudent(start=${page.pages})}">[末 頁]</a>
    </div>
    <br/>
    <form action="addStudent" method="post">
        name: <input name="name"/> <br/>
        <button type="submit">提交</button>
    </form>
</div>
</body>
</html>

另外一個就是編輯Student的頁面【editStudent.html】：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf快速入門-CRUD和分頁實例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div style="margin:0px auto; width:500px">

    <form action="updateStudent" method="post">

        name: <input name="name" th:value="${student.name}"/> <br/>

        <input name="id" type="hidden" th:value="${student.id}"/>
        <button type="submit">提交</button>

    </form>
</div>
</body>

</html>

第七步：運行項目

在添加了一些數據以後，能夠觀察到各項功能都是能夠正常使用的，這個例子也是我直接借鑑how2j教程裏的源碼寫的，原文在這裏：【傳送門】，運行以後，能夠看到大概是這樣的效果，完美：

image.png

至此，咱們就差很少算是對Thymeleaf入了門。

按照慣例黏一個尾巴，話說有木有懂公衆號運營的小夥伴啊？求指教！

歡迎轉載，轉載請註明出處！   
簡書ID：@我沒有三顆心臟  
github：wmyskxz  
歡迎關注公衆微信號：wmyskxz
分享本身的學習 & 學習資料 & 生活
想要交流的朋友也能夠加qq羣：3382693

我沒有三顆心臟

讚揚二維碼喜歡做者

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