Thymeleaf【疾速入门】_玖富娱乐主管发布


玖富娱乐是一家为代理招商,直属主管信息发布为主的资讯网站,同时也兼顾玖富娱乐代理注册登录地址。

媒介:倏忽发明本身给本身埋了一个大坑,毕设好难..每个小点拎出来都能当一个小题目(手动摆手..),没办法本身选的含着泪也要把坑填完..先一点一点把须要增补的学问学完吧..

Thymeleaf引见

轻微摘一摘【官网】上面的引见吧(翻译是找到,有些增添的内容):

  • 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建⽴在⾃然模板的概念上,将其逻辑注⼊到模板⽂件中,不会影响模板设想原型。 这改良了设想的相同,弥合了设想和开辟团队之间的差异。

  • 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开辟工具,虽然它能够做很多。

然后官网还给出了一段看起来依然像HTML一样事情的集成了Thymeleaf模版的代码,我们大抵的来感受一下:

简朴说, Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎,它能够完全替换 JSP。

Thymeleaf与JSP的区分在于,不运转项目之前,Thymeleaf也是纯HTML(不须要服务端的支撑)而JSP须要举行肯定的转换,如许就轻易前端职员举行自力的设想、调试。相较与其他的模板引擎,它有以下三个极吸引人的特征:

  • 1.Thymeleaf 在有收集和无收集的情况下皆可运转,即它能够让美工在浏览器检察页面的静态效果,也能够让程序员在服务器检察带数据的动态页面效果。这是由于它支撑 html 原型,然后在 html 标签里增添分外的属性来到达模板 数据的展现体式格局。浏览器诠释 html 时会疏忽未界说的标签属性,以是 thymeleaf 的模板能够静态地运转;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显现。

  • 2.Thymeleaf 开箱即用的特征。它供应范例和spring范例两种方言,能够直接套用模板完成JSTL、 OGNL表达式效果,制止天天套模板、该jstl、改标签的搅扰。同时开辟职员也能够扩大和建立自界说的方言。

  • 3.Thymeleaf 供应spring范例方言和一个与 SpringMVC 圆满集成的可选模块,能够疾速的完成表单绑定、属性编纂器、国际化等功用。

摘自:spring boot(四):thymeleaf运用详解-贞洁的笑容

00#先把须要情况搭起来

也就是SpringBoot项目的搭建,很通例,疾速搭起来:

轻微改改包名另有形貌,点击【Next】:

勾选上Web/Thymeleaf支撑,然后点击【Next】:

挑选项目生存地位,点击【Finish】:

至此就简朴建立了一个用于进修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

项目运转以后,我们在地址栏输入localhost:8080/hello,就会看到意料之中效果准确的页面:

然则你也可能会注意到,这个模板并非一个真正有用的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】给勾选上:

然后按下快捷键【Ctrl Alt Shift /】,召唤出【Maintenance】菜单,进入【Registry】:

把【compiler.automake.allow.when.app.running】这个选项的 √ 给打上:

然后再把【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稍稍做一些修正,稍等一会儿,你就可以革新页面看到效果,圆满。

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>

不消重启,革新一下页面就可以够或许看到效果,圆满:

2. 数据推断

Thymeleaf 的前提推断是经由过程th:if来做的,只要前提为真的时刻才会显现以后元素,取反能够用notth: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";
}

重启项目,革新页面,能看到准确的毛病提醒信息(关于如许的,须要有毛病提醒的页面我也不晓得应当怎样写好,这里就简朴树模一下,若是晓得怎样写好的小伙伴记得提醒一下啊):

代码诠释:

经由过程${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"

革新项目,能准确取得提醒信息:

然后我们把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,就可以够或许在掌握台中看到准确的信息了:

代码诠释:

经由过程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>

革新页面,能够看到效果:

代码诠释:

我们能够运用th:fragment属性来界说被包罗的模板片断,然后运用th:includeth: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教程里的源码写的,原文在这里:【传送门】,运转以后,能够看到大概是如许的效果,圆满:

至此,我们就差未几算是对Thymeleaf入了门。

依照通例黏一个尾巴,话说有木有懂民众号运营的小伙伴啊?求指教!

迎接转载,转载请说明出处!
简书ID:@我没有三颗心脏
github:wmyskxz
迎接存眷民众微旌旗灯号:wmyskxz
分享本身的进修 & 进修材料 & 生涯
想要交换的同伙也能够加qq群:3382693

-玖富娱乐是一家为代理招商,直属主管信息发布为主的资讯网站,同时也兼顾玖富娱乐代理注册登录地址。