Thymeleaf（替代JSP）

最新推荐文章于 2023-02-15 15:58:15 发布

北方有梦_hsp

最新推荐文章于 2023-02-15 15:58:15 发布

阅读量2.5k

点赞数 2

分类专栏： SpringBoot

本文链接：https://blog.csdn.net/qq_30245525/article/details/111787412

版权

SpringBoot 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Thymeleaf

1.简介

Thymeleaf 是一个跟 FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下特点：

动静结合：Thymeleaf 在有网络和无网络的环境下皆可运行，无网络显示静态内容，有网络用后台得到数据替换静态内容
与SpringBoot完美整合，springboot默认整合thymeleaf

2.编写接口

2.1 service层

@Service
public class UserService {
    
    //在通用mapper文章中已经定义好了的类
    @Autowired
    private UserMapper userMapper;
    
    public List<User> findAll() {
        return userMapper.selectAll();
    }
}

2.2 controller层

@Controller
public class UserController {

    @Autowired
    private UserService userService;

    @RequestMapping("/all")
    public String findAll(ModelMap map) {
        List<User> all = userService.findAll();
        map.addAttribute("all",all);
        //跳转classpath:/templates/users.html
        return "user";
    }
}

3.引入启动器

3.1依赖文件

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

3.2自动生成ThymeleafProperties

指定静态资源路径为"classpath:/templates/"
指定后缀为html

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;
    private String prefix = "classpath:/templates/";
    private String suffix = ".html";
    private String mode = "HTML";
    private Charset encoding;
    private boolean cache;
    private Integer templateResolverOrder;
    private String[] viewNames;
    private String[] excludedViewNames;
    private boolean enableSpringElCompiler;
    private boolean enabled;
    private final ThymeleafProperties.Servlet servlet;
    private final ThymeleafProperties.Reactive reactive;

    public ThymeleafProperties() {
        this.encoding = DEFAULT_ENCODING;
        this.cache = true;
        this.enabled = true;
        this.servlet = new ThymeleafProperties.Servlet();
        this.reactive = new ThymeleafProperties.Reactive();
    }

3.3创建静态资源到/templates

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span style="">欢迎光临！</span>
    <hr/>
   <table>
       <tr>
           <th>序号</th>
           <th>id</th>
           <th>姓名</th>
           <th>用户名</th>
           <th>年龄</th>
           <th>性别</th>
           <th>生日</th>
           <th>备注</th>
           <th>操作</th>
       </tr>
   </table>
</body>
</html>

3.4.启动主程序测试

4.修改html命名空间

把html 的名称空间，改成： xmlns:th=“http://www.thymeleaf.org” 会有语法提示

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style type="text/css">
        table {border-collapse: collapse; font-size: 14px; width: 80%; margin: auto}
        table, th, td {border: 1px solid darkslategray;padding: 10px}
    </style>
</head>
<body>
<div style="text-align: center">
    <span style="color: darkslategray; font-size: 30px">欢迎光临！</span>
    <hr/>
    <table class="list">
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>用户名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>生日</th>
            <th>备注</th>
            <th>操作</th>
        </tr>
    </table>
</div>
</body>
</html>

5.案例

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style type="text/css">
        table {border-collapse: collapse; font-size: 14px; width: 80%; margin: auto}
        table, th, td {border: 1px solid darkslategray;padding: 10px}
    </style>
</head>
<body>
<div style="text-align: center">
    <span style="color: darkslategray; font-size: 30px">欢迎光临！</span>
    <hr/>
    <table class="list">
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>用户名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>生日</th>
            <th>备注</th>
            <th>操作</th>
        </tr>
        <tr th:each="user : ${all}">
            <td th:text="${user.id}">123</td>
            <td th:text="${user.name}">zhangsan</td>
            <td th:text="${user.userName}">zhangsan</td>
            <td th:text="${user.age}">22</td>
            <td th:text="${user.sex} == 1 ? '男': '女'">男</td>
            <td th:text="${#dates.format(user.birthday,'yyyy-MM-dd')}">1998-01-01</td>
            <td th:text="${user.note}">1</td>
            <td>
                <a href="">删除</a>
                <a href="">修改</a>
                <a href="">审核</a>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

静态显示静态内容

在这里插入图片描述

动态显示数据库内容

在这里插入图片描述

6.缓存

Thymeleaf会在第一次对模板解析之后进行缓存，极大的提高了并发处理能力。但是这给我们开发带来了不便，修改页面后并不会立刻看到效果，我们开发阶段可以关掉缓存使用：

# 开发阶段关闭thymeleaf的模板缓存
spring.thymeleaf.cache=false

北方有梦_hsp

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录