Thymeleaf快速入门(整合SpringBoot)

Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎,它可以完全替代 JSP 。相较与其他的模板引擎,它有如下三个极吸引人的特点:

  • 动静结合:Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。
  • 开箱即用:它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
  • 多方言支持:Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。

与SpringBoot完美整合,SpringBoot提供了Thymeleaf的默认配置,并且为Thymeleaf设置了视图解析器,我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别,就是在模板语法上有区别。

  1. 导入启动器
        <!--thymeleaf模板引擎-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
  1. 编写Controller接口
    @GetMapping("all")
    public String queryUserAll(Model model){
        // 查询用户
        List<User> users = userService.queryUserAll();
        // 放入模型
        model.addAttribute("users",users);
        // 返回模板名称(classpath:/templates/目录下html文件名)
        return "users";
    }
  1. 静态页面
    注意:把html的名称空间,改成xmlns:th="http://www.thymeleaf.org"会有语法提示,模板默认放在classpath:/templates/目录下
    在这里插入图片描述
<!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>
        </tr>
        <tr th:each="user : ${users}">
            <td th:text="${user.id}">1</td>
            <td th:text="${user.username}">张三</td>
            <td th:text="${user.sex}"></td>
            <td th:text="${user.address}">广东</td>
            <td th:text="${user.birthday}">1980-02-30</td>
        </tr>
    </table>
</div>
</body>
</html>

语法:

  • ${}:ognl的语法,比el表达式更加强大
  • th 指令:th是利用html5中的自定义属性实现的,如果不支持H5,可以用data-th-来代替
    th:each:类似于c:foreach遍历集合,但是语法更加简洁
    th:text:声明标签中的文本
  1. 模板缓存
    Thymeleaf会在第一次对模板解析之后进行缓存,极大的提高了并发处理能力。但是这给我们开发带来了不便,修改页面后并不会立刻看到效果,我们开发阶段可以关掉缓存使用:
# 开发阶段关闭thymeleaf的模板缓存
spring.thymeleaf.cache=false
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Thymeleaf是一个流行的服务器端模板引擎,它可以将数据和模板相结合,生成HTML页面。而AJAX则是一种在不重新加载整个页面的情况下与服务器进行交互的技术。 在Spring Boot中集成Thymeleaf非常容易。首先,需要在pom.xml文件中添加Thymeleaf依赖项: ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> ``` 接下来,可以创建一个Controller类来处理请求并返回HTML页面。例如: ```java @Controller public class MyController { @GetMapping("/") public String home(Model model) { model.addAttribute("message", "Hello Thymeleaf!"); return "index"; } } ``` 这个Controller类处理根路径的GET请求,并将一个名为“message”的属性添加到模型中。然后,它返回名为“index”的模板。 在这个例子中,“index”模板可以使用Thymeleaf标记来渲染页面。例如: ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>My Page</title> </head> <body> <h1 th:text="${message}">Hello World!</h1> </body> </html> ``` 这个模板使用Thymeleaf语法来渲染一个标题,标题的文本来自于“message”模型属性。 现在,假设需要使用AJAX来从后端调用接口并渲染页面。可以使用jQuery库来简化这个过程。例如: ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>My Page</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $.ajax({ url: "/api/data", success: function(data) { $("h1").text(data.message); } }); }); </script> </head> <body> <h1>Hello World!</h1> </body> </html> ``` 这个模板包含了一个名为“api/data”的接口调用,当页面加载时会自动调用该接口。当接口调用成功后,页面上的标题将被替换为返回的数据。注意,这里使用了jQuery的“$.ajax”函数来执行异步请求。 最后,需要在Controller中添加一个处理接口调用的方法。例如: ```java @RestController public class MyRestController { @GetMapping("/api/data") public Map<String, String> getData() { Map<String, String> data = new HashMap<>(); data.put("message", "Hello AJAX!"); return data; } } ``` 这个RestController类处理“api/data”路径的GET请求,并返回一个包含名为“message”的属性的Map对象。这个属性将被用于渲染页面标题。 如果一切正常,现在可以启动应用程序并访问根路径。页面将加载并显示一个标题“Hello World!”,然后自动使用AJAX调用接口“/api/data”,并将标题替换为返回的数据“Hello AJAX!”。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值