springBoot基础三之thymeleaf(一)

最新推荐文章于 2024-02-06 20:17:12 发布

夜的全章

最新推荐文章于 2024-02-06 20:17:12 发布

阅读量496

点赞数

分类专栏： springBoot学习文章标签： html web java javascript

本文链接：https://blog.csdn.net/qq_45321679/article/details/113503273

版权

springBoot学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

这是学习springBoot初期的学习笔记。。。欢迎各位大佬指正！！！

版本

springBoot版本：1.5.9
jdk：1.8

什么是thymeleaf？

官网引用：

Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎。
Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板-HTML可以在浏览器中正确显示，并且可以作为静态原型工作，从而可以在开发团队中加强协作。

百度了下，Boot Thymeleaf初步使用这个文章中
说的很清楚，更符合定位：

Thymeleaf 在无网络的条件下也可以可运行，它可以让美工直接在浏览器看到效果，也可以直接应用成动态页面。因为Thymeleaf 可以在 html 标签里增加额外的属性，而浏览器解释 html 时会忽略这些未定义的标签属性，而当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。使用Thymeleaf 之后，我们就可以使用html 模板了！

也就是说，thymeleaf是一种属于html的jsp模板技术。。。哈哈哈，薛定谔的模板。。。。总而言之就是比HTML要强大！

hello入门，使用th:text

创建springBoot文件，以及添加的其它依赖，已经在springBoot基础(一)中说好了，不赘述哈；
在pom.xml中添加依赖，如下：

<!--        添加对thymeleaf的支持-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

配置application.properties,如下：

# thymeleaf的配置

#不设置缓存，易于开发
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html

配置一个Controller，其存储数据到Request域中，如下：

package com.drillsb.springboot.web.thymeleaf;

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

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

在resource文件下的template下面，创建一个HTML文件，为啥要在这个template下面创建，而不是在webapp下面创建？
因为这是springBoot默认的模板文件，默认会访问；
在这里插入图片描述
创建的HTML文件跟原有的不同在于，声明了这是一个thymeleaf模板文件，当然也需要h5的声明，如下：

<!DOCTYPE html>
<!--这个是错误的写法，这不是一个标签，这是一个引用，不能加/-->
<!--<html xmlns:th="http://www.thymeleaf.org"/>-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta  http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>helloThymeleaf</title>
</head>
<body>
<p th:text="${name}">name</p>
<!--写法一-->
<p th:text="'Hello '+${name}+ '!'">name</p>
<!--写法二-->
<p th:text="|Hello  ${name}!|">name</p>
</body>
</html>

注意点

引用thymeleaf的xmls约束的时候不要加 / !!!
也不要自己加一个结尾的< /html>这样的结尾，因为默认已经有了这个结尾标签，所以如果加了的话就会报错

然后启动主程序，访问http://localhost:8080/hello，如下:
在这里插入图片描述
这样就入门实现了thymeleaf；

还记得前面说thymeleaf是一个薛定谔的状态吗？以及定义thymeleaf都说到了其html特性，所以当我们不启动主程序，关闭主程序，并且修改p标签的内容，然后再在磁盘上访问如下：
在这里插入图片描述

所以能够跟html一样的使用，我觉得这就是跟jsp的不同之处，jsp必须要启动服务器，才能够显示出数据！！！

在thymeleaf中使用链接表达式@:{}

这里演示使用th:href和th:src引入css和js文件；
首先在webapp创建一个静态文件夹static，然后再创建两个文件分别是js和css文件，然后形成如下的目录结构：
在这里插入图片描述

注意点

因为自己使用的是1.5.9版本的springBoot，并且在pom.xml文件中指明了资源文件的路径，如下：

<!--        资源路径-->
        <resources>
            <resource>
                <directory>src/main/webapp</directory>
                <targetPath>META-INF/resources</targetPath>
                <includes>
                    <include>**/*.*</include>
                </includes>
            </resource>
        </resources>

所以，没有在resource中创建了。实际上也可以在static中创建文件，因为在springBoot中static默认就是存放静态文件的；
在这里插入图片描述
在style.css中：

div.showing{
    width:80%;
    margin:20px auto;
    border:1px solid grey;
    padding:30px;
}

.even{
    background-color: red;
}
.odd{
    background-color: green;
}

在js文件中，很简单的输出语句：

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

然后修改上面入门的hello.html代码，添加了引入上面的css和js文件如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta  http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>helloThymeleaf</title>
    <link rel="stylesheet" type="text/css" th:media="all" th:href="@{/static/css/style.css}"/>
    <script type="text/javascript" th:src="@{/static/js/thymeleaf.js}"/>
</head>

<script>testFunction()</script>

<body>
<div class="showing">
    <p th:text="${name}">这是未启动的name</p>
    <!--写法一-->
    <p th:text="'Hello '+${name}+ '!'">这是未启动的name</p>
    <!--写法二-->
    <p th:text="|Hello  ${name}!|">这是未启动的name</p>
</div>

</body>
</html>

启动主程序类，访问，如下：
在这里插入图片描述

对比

a.不使用thymeleaf的th:src和th:href，原始的src和href，可以做到不启动程序仍然可以访问，也是实现上述的效果；但是th:src和th:href并不能实现，因为是动态的一部分；

b.使用thymeleaf的会自动生成上下文对象，也就是会在src和href的路径上自动生成应用上下文对象(项目路径)；

在thymeleaf中其它表达式

在前面的例子基础上；
创建一个Product实体类，用于thymeleaf显示数据用，如下：

package com.drillsb.springboot.dao;

public class Product {
    private int id;
    private String name;
    private int price;

    public Product(int id, String name, int price) {
        this.id = id;
        this.name = name;
        this.price = price;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getPrice() {
        return price;
    }

    public void setPrice(int price) {
        this.price = price;
    }
}

然后在原有的hello请求映射的Controller中，再添加一个映射，如下：

package com.drillsb.springboot.web.thymeleaf;

import com.drillsb.springboot.dao.Product;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

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

    @RequestMapping("/test")
    public String test(Model model){
        String htmlContent="<p style='color:red'>红色文字</p>";
        Product product=new Product(5,"product1",500);
        model.addAttribute("htmlContent",htmlContent);
        model.addAttribute("product",product);
        return "test";
    }
}

在原有的hello.html下再新建一个test.html文件，如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta  http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>testThymeleaf</title>
    <link rel="stylesheet" type="text/css" th:media="all" th:href="@{/static/css/style.css}"/>
    <script type="text/javascript" th:src="@{/static/js/thymeleaf.js}"/>
</head>
<style>
    h2{
        color:green;
    }
</style>
<body>
<div class="showing">
    <h2>显示text和utext区别</h2>
    <p th:text="'text不会解析html，而是直接输出 '+${htmlContent}"/>
    <p th:utext="' utext会解析html  '+${htmlContent}"/>
</div>

<div class="showing">
    <h2>显示对象以及对象属性</h2>
    <p th:text="'使用${product}:  '+${product}" ></p>
    <p th:text="'使用${product.name}:  '+${product.name}" ></p>
    <p th:text="'使用${product.getName}:  '+${product.getName()}" ></p>
</div>

<div class="showing" th:object="${product}">
    <h2>*{}方式显示属性</h2>
    <p th:text="*{name}"/>
</div>

<div th:class="showing">
    <h2>算数运算</h2>
    <p th:text="|原price500加100后  ${product.price + 100}|"/>
    <p th:text="|原price500减100后  ${product.price - 100}|"/>
    <p th:text="|原price500乘100后  ${product.price * 100}|"/>
    <p th:text="|原price500除100后  ${product.price / 100}|"/>
</div>
</body>
</html>

重启之后，访问http://localhost:8080/test，如下：
在这里插入图片描述

在thymeleaf中引入其它的html页面内容

HTML页面要想引入其它的HTML的话，需要用到iframe标签，或者是使用是使用js引入，参考如何将一个.html导入进另一个.html页面?
在thymeleaf中引入其它HTML的内容，使用的标签是:
th:include
th:insert
th:replace

在前面的基础上，在test.html 同目录下，添加一个introduction.html页面，在某个元素上使用th:fragment，表明这个元素内容是可以被引用的内容
如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta  http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>testThymeleaf</title>
    <link rel="stylesheet" type="text/css" th:media="all" th:href="@{/static/css/style.css}"/>
    <script type="text/javascript" th:src="@{/static/js/thymeleaf.js}"/>
</head>
<body>
<footer th:fragment="footer1">
    <p>hello introduction.html的内容1，我是妲己</p>
</footer>
<footer th:fragment="footer2(husband,wife)">
    <p th:text="|hello introduction.html的内容2 --- ${husband} 是 ${wife}的丈夫|"/>
</footer>
</body>
</html>

然后在刚刚的test.html页面上，引用introduction.html的内容，如下：

<div th:class="showing">
    <h2>引入其它文件</h2>
    <div th:replace="introduction::footer1">我是 th:replace div1</div>
    <div th:replace="introduction::footer2('吕布','貂蝉')">我是 th:replace div2</div>
    <div th:insert="introduction.html::footer1"></div>
    <div th:insert="introduction.html::footer2('吕布','貂蝉')"></div>
    <div th:include="introduction::footer1">我是 th:include div1</div>
    <div th:include="introduction::footer2('吕布','貂蝉')">我是 th:include div2</div>
</div>

然后运行主程序，如下：
在这里插入图片描述
可以看到，本来是六个内容的，但是只有四个内容显示出来了，打开F12，查看源码如下：

insert实现不了。。。。

不同之处

关于这三个的不同之处，结合百度加自己的实践，如下：

replace：保留引入元素的父元素，移除被引入内容的父元素；
insert：保留引入元素的父元素，保留被引入内容的父元素；
include：移除引入元素的父元素，保留被引入内容的父元素;

参考博文：
thymeleaf include引入公共页面

遗留的问题

上面说到了，insert为什么没有引入成功，我查找百度了好久，还是没有解决，这个问题。。。。。暂时解决不了

在thymeleaf中条件判断

在上面的例子的基础上；

在Controller类中添加一个Boolean类型的变量，并且添加到request域中去，如下:

@RequestMapping("/test")
    public String test(Model model){
        String htmlContent="<p style='color:red'>红色文字</p>";
        Product product=new Product(5,"product1",500);
        //        添加一个boolean类型的变量
        boolean testBool=true;
        model.addAttribute("htmlContent",htmlContent);
        model.addAttribute("product",product);
        model.addAttribute("testBool",testBool);
        return "test";
    }

然后在test.html中使用条件判断语句，如下：

<div th:class="showing">
    <h2>条件判断</h2>
    <p th:if="${testBool}">使用${testBool}，testBool</p>
    <p th:if="not${testBool}">使用not${testBool}，testBool，这一条不显示</p>
    <p th:if="${not testBool}">使用${not testBool}，testBool，这一条不显示</p>
    <p th:unless="${testBool}">使用unless=${testBool}，这个unless的作用是和if判断相反，这一条不显示</p>
    <p th:text="${testBool}?'这是使用三元运算符，为true您就能看到这句话':''"></p>
</div>

启动主程序之后，访问如下：
在这里插入图片描述

注意点

a.th:if是为null，为0，为false的时候，本标签以及子标签都不显示；但是在三元运算符中，判断为false的时候其标签体还存在的；这不是一个概念！！！

举例：将上面的最后的三元运算符改为false，如下：

<p th:text="${not testBool}?'这是使用三元运算符，为true您就能看到这句话':''"></p>

重启之后访问如下:
在这里插入图片描述

b.th:unless是跟th:if判断结果取反

在thymeleaf中遍历

在上面的例子的基础上；
新建一个产品类Product，其中给一个带三个参数的构造函数
如下：

package com.drillsb.springboot.dao;

public class Product {
    private int id;
    private String name;
    private int price;

    public Product(int id, String name, int price) {
        this.id = id;
        this.name = name;
        this.price = price;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getPrice() {
        return price;
    }

    public void setPrice(int price) {
        this.price = price;
    }
}

然后在Controller类中添加一个映射地址以及对应的方法，方法的内容如下：

 @RequestMapping("/test2")
    public String test2(Model model){
        List<Product> productList= new ArrayList<Product>();
        Product product;
        for (int i = 1; i < 11; i++) {
            product=new Product(i,"product"+i,i*100);
            productList.add(product);
        }
        model.addAttribute("ps",productList);
        return "test2";
    }

然后添加一个对应的视图解析器对应的test2的HTML文件，如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta  http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>testThymeleaf</title>
    <link rel="stylesheet" type="text/css" th:media="all" th:href="@{/static/css/style.css}"/>
    <script type="text/javascript" th:src="@{/static/js/thymeleaf.js}"/>
</head>
<style>
    h2{
        color:green;
    }
</style>
<body>
<div th:class="showing">
    <h2>在表格中遍历</h2>
    <table>
        <thead>
        <tr>
            <th>id</th>
            <th>产品名称</th>
            <th>价格</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="p:${ps}">
            <td th:text="${p.id}"/>
            <td th:text="${p.name}"/>
            <td th:text="${p.price}"/>
        </tr>
        </tbody>
    </table>
</div>
<div th:class="showing">
    <h2>在表格中遍历，带有集合数据状态的</h2>
    <table>
        <thead>
        <tr>
            <th>index</th>
            <th>id</th>
            <th>产品名称</th>
            <th>价格</th>
        </tr>
        </thead>
        <tbody>
        <tr th:class="${status.even}?'even':'odd'" th:each="p,status:${ps}">
            <td th:text="${status.index}"/>
            <td th:text="${p.id}"/>
            <td th:text="${p.name}"/>
            <td th:text="${p.price}"/>
        </tr>
        </tbody>
    </table>
</div>
<div th:class="showing">
    <h2>遍历下拉框select</h2>
    <select>
        <option th:each="p:${ps}" th:value="${p.id}"
                th:selected="${p.id==5}" th:text="${p.name}"></option>
    </select>
</div>
<div th:class="showing">
    <h2>遍历单选框redio</h2>
    <input name="product" type="radio"
           th:each="p:${ps}" th:value="${p.id}"
           th:checked="${p.id==5}" th:text="${p.name}" />
</div>
</body>
</html>

重启之后访问，效果如下:
在这里插入图片描述

注意点

a.使用th:each遍历中还可以获取当前元素的其它信息，利用当前元素的状态获取，这个跟el表达式的状态可以获取到当前元素的信息是一样的，如下：

在这里插入图片描述

thymeleaf中的内置工具

延续上面的基础上；

在thymeleaf中内置了许多工具，先看一个使用时间内置工具的小例子；
在Controller中，添加一个新方法，很简单，如下：

/*
    * 内置工具，使用Date
    * */
    @RequestMapping("/test3")
    public String test3(Model model){
        model.addAttribute("now",new Date());
        return "test3";
    }

然后写对应的HTML页面，test3.html内容如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta  http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>testThymeleaf</title>
    <link rel="stylesheet" type="text/css" th:media="all" th:href="@{/static/css/style.css}"/>
    <script type="text/javascript" th:src="@{/static/js/thymeleaf.js}"/>
</head>
<style>
    h2{
        color:green;
    }
    div.testDate p{
        color:red;
    }
</style>
<body>
<div class="showing testDate">
    <h2>格式化日期</h2>
    使用${now}直接输出日期：
    <p th:text="${now}"></p>
    <hr/>

    使用默认格式化${#dates.format(now)}输出日期：
    <p th:text="${#dates.format(now)}"></p>
    <hr/>

    使用自定义格式${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}输出日期：
    <p th:text="${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}"></p>
    <hr/>

</div>
</body>
</html>

重启主程序，访问如下：
在这里插入图片描述

注意点

a.使用thymeleaf的内置工具的主要符号是 **${#}**
b.thymeleaf中还有其它许多工具，总共有十六种，如下：

Execution Info：获取页面模板的处理信息
Messages：在变量表达式中获取外部消息的方法，与使用＃{…}语法获取的方法相同
URIs/URLs：转义部分URL / URI的方法
Conversions：用于执行已配置的转换服务的方法
Dates：时间操作和时间格式化等
Calendars：用于更复杂时间的格式化
Numbers：格式化数字对象的方法
Strings：字符串工具类
Objects：一般对象类，通常用来判断非空
Booleans：常用的布尔方法
Arrays：数组工具类
Lists List：工具类
Sets Set：工具类
Maps：常用Map方法
Aggregates：在数组或集合上创建聚合的方法
IDs：处理可能重复的id属性的方法

这里不重复造轮子了，详情看这个博客，如下：
thymeleaf其他的内置工具（共16种）

结合数据库

初步入门之后，最终还是要实战运用的，实现一个小的结合数据库的curd操作例子；

创建数据库，创建表，以及插入数据，这些都是常规的操作了，这里不赘述了；

表名是category_;
表结构，就是id自增加上一个name属性如下：
在这里插入图片描述
原有的数据28条如下：

在pom.xml 中添加对mysql，mybatis以及mybatis第三方的分页助手的支持，如下：

<?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 https://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>1.5.9.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.drillsb</groupId>
    <artifactId>springboot</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot</name>
    <packaging>war</packaging>
    <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>

<!--        添加对thymeleaf的支持-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </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>
<!--        添加对mysql的支持-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.21</version>
        </dependency>
<!--        添加对mybatis的支持-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.1.1</version>
        </dependency>
<!--        这个是使用mybatis添加分页助手插件-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>4.1.6</version>
        </dependency>

        </dependency>
<!--        添加对jna的支持，以防报错-->
        <dependency>
            <groupId>net.java.dev.jna</groupId>
            <artifactId>jna</artifactId>
            <version>4.1.0</version>
        </dependency>
    </dependencies>

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

<!--        资源路径-->
        <resources>
            <resource>
                <directory>src/main/webapp</directory>
                <targetPath>META-INF/resources</targetPath>
                <includes>
                    <include>**/*.*</include>
                </includes>
            </resource>
        </resources>
    </build>

</project>

然后在application.properties中添加对mysql的配置，如下：

# thymeleaf的配置
#不设置缓存，易于开发
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html

#数据库
server.context-path=/
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/sb_test?characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=admin
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

创建能在视图层显示数据的实体类Category，如下:

package com.drillsb.springboot.pojo;
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import org.springframework.data.annotation.Id;

import javax.persistence.*;

public class Category {
    private int id;
    private String name;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    @Override
    public String toString() {
        return "Category{" +
                "id=" + id +
                ", name='" + name + '\'' +
                '}';
    }
}

然后再新建一个CategoryMapper类，用于处理对数据库的增删改查，如下：

package com.drillsb.springboot.mapper;

import com.drillsb.springboot.pojo.Category;
import org.apache.ibatis.annotations.*;
import org.springframework.stereotype.Repository;

import java.util.List;
@Repository
@Mapper
public interface CategoryMapper {
    @Select("select * from category_ ")
    public List<Category> findAll();

    @Insert("insert into category_(name) values(#{name}) ")
    public int save(Category category);

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

    @Select("select * from category_ where id= #{id} ")
    public Category get(int id);

    @Update("update category_ set name=#{name} where id=#{id} ")
    public int update(Category category);
}

新建一个CategoryThyController类，用于映射以及处理数据，如下：

package com.drillsb.springboot.web.thymeleaf;

import com.drillsb.springboot.mapper.CategoryMapper;
import com.drillsb.springboot.pojo.Category;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
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 CategoryThyController {
    @Autowired
    CategoryMapper categoryMapper;

    @RequestMapping("/listThyCategory")
    public String listThyCategory(Model model,
                                  @RequestParam(value = "start", defaultValue = "0") int start,
                                  @RequestParam(value = "size", defaultValue = "5") int size){
        PageHelper.startPage(start,size,"id desc");
        List<Category> all = categoryMapper.findAll();
        PageInfo<Category> page = new PageInfo<>(all);
        model.addAttribute("page",page);
        return "listThyCategory";
    }

    @RequestMapping("/addThyCategory")
    public String listThyCategory(Category c) throws Exception {
        categoryMapper.save(c);
        return "redirect:listThyCategory";
    }

    @RequestMapping("/deleteThyCategory")
    public String deleteThyCategory(Category c) throws Exception {
        categoryMapper.delete(c.getId());
        return "redirect:listThyCategory";
    }

    @RequestMapping("/updateThyCategory")
    public String updateThyCategory(Category c) throws Exception {
        categoryMapper.update(c);
        return "redirect:listThyCategory";
    }
    @RequestMapping("/editThyCategory")
    public String listThyCategory(int id,Model m) throws Exception {
        Category c= categoryMapper.get(id);
        m.addAttribute("c", c);
        return "editThyCategory";
    }
}

基于前面Controller的映射，创建HTML页面；
创建listThyCategory.html页面，如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta  http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>listThyCategory</title>
</head>
<body>
<div style="width: 500px;margin: 20px auto;text-align: center">
    <table align="center" border="1" cellspacing="0">
        <thead>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>编辑</td>
            <td>删除</td>
        </tr>
        </thead>

        <tbody>
        <tr th:each="c:${page.list}">
            <td th:text="${c.id}"></td>
            <td th:text="${c.name}"></td>
            <td><a th:href="@{/editThyCategory(id=${c.id})}">编辑</a> </td>
            <td><a th:href="@{/deleteThyCategory(id=${c.id})}">删除</a> </td>
        </tr>
        </tbody>
    </table>
    <br/>
    <div>
        <a th:href="@{/listThyCategory(start=0)}">[首页]</a>
        <a th:href="@{/listThyCategory(start=${page.pageNum - 1})}">[上一页]</a>
        <a th:href="@{/listThyCategory(start=${page.pageNum + 1})}">[下一页]</a>
        <a th:href="@{/listThyCategory(start=${page.total -1})}">[下一页]</a>
    </div>
    <br/>
    <form action="/addThyCategory" method="post">
        name:<input name="name"/><br/>
        <button type="submit">提交</button>
    </form>
</div>
</body>
</html>

以及editThyCategory.html页面，如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta  http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>editThyCategory</title>
</head>
<body>
<div style="margin: 50px auto;width:500px ">
    <form action="/updateThyCategory" method="post">
        name:<input name="name" th:value="${c.name}"/>
        <button type="submit">提交</button>
    </form>
</div>
</body>
</html>

重启主程序类，访问
http://localhost:8080/listThyCategory?start=0，如下:
在这里插入图片描述
尝试一下crud操作，都没有问题，nice！！！

夜的全章

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
springBoot基础三之thymeleaf(一)

文章目录前言版本什么是thymeleaf？hello入门，使用th:text注意点在thymeleaf中使用链接表达式@:{}注意点对比在thymeleaf中其它表达式在thymeleaf中引入其它的html页面内容不同之处遗留的问题在thymeleaf中条件判断注意点在thymeleaf中遍历注意点thymeleaf中的内置工具注意点更多th的标签结合数据库前言这是学习springBoot初期的学习笔记。。。欢迎各位大佬指正！！！版本springBoot版本：1.5.9jdk：1.8什么是
复制链接

扫一扫