springboot整合thymeleaf

一、介绍

二、Thymeleaf 的特点

三、语法规则

四、springboot中集成Thymeleaf

五、使用

六、将数据存入页面并取出

6.1 存入普通数据

6.1.2 存入对象

6.1.3 存入List

6.2 跳转另一个页面

6.3 判断

写在最后

一、介绍

Thymeleaf 是新一代 Java 模板引擎，Thymeleaf 支持 HTML 原型，其文件后缀为“.html”，因此它可以直接被浏览器打开，此时浏览器会忽略未定义的 Thymeleaf 标签属性，展示 thymeleaf 模板的静态页面效果；当通过 Web 应用程序访问时，Thymeleaf 会动态地替换掉静态内容，使页面动态显示。

二、Thymeleaf 的特点

动静结合、开箱即用、多方言支持等

三、语法规则

在使用 Thymeleaf 之前，首先要在页面的 html 标签中声明名称空间
xmlns:th="http://www.thymeleaf.org"
Thymeleaf 语法分为以下 2 类：

标准表达式语法

变量表达式：${...}

选择变量表达式：*{...}

链接表达式：@{...}

国际化表达式：#{...}

片段引用表达式：~{...}等

th 属性

th:id 、 th:text、 th:utext、 th:object、 th:each、 th:if 等等、用来替换原有的html属性。

四、springboot中集成Thymeleaf

1、导入依赖

        <dependency><groupId>org.thymeleaf</groupId><artifactId>thymeleaf-spring5</artifactId></dependency>

2、配置

spring:thymeleaf:mode: HTMLcache: false

五、使用

1、在resource目录下新建templates、存放页面资源

index.html如下

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>首页</title>
</head>
<body><h1>hello,Thymeleaf</h1>
</body>
</html>

2、在IndexController,新建一个方法，拦截Get请求，拦截路劲为"/index",如下

代码：

@Controller
public class IndexController {@GetMapping("/index")public String index(){return "index";}}

启动后访问改路径：http://localhost:8889/index

如此、便是测试成功了

六、将数据存入页面并取出

6.1 存入普通数据

6.1.1 存入普通数据 msg

    @GetMapping("/index")public String index(Model model){model.addAttribute("msg","hello ,springboot");return "index";}

取出msg

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>首页</title>
</head>
<body><h1>hello,Thymeleaf</h1><h1 th:text="${msg}"></h1><h1 th:utext="${msg}"></h1></body>
</html>

访问页面后的结果

6.1.2 存入对象

 @Controller
public class IndexController {@GetMapping("/index")public String index(Model model){IUser user = new IUser();user.setUserName("张三");user.setEmail("123456@qq.com");user.setPassWord("123");model.addAttribute("user",user);}}

取出存入对象

<h1 th:utext="${user}"></h1>

测试

取出存入对象的某个值

<div th:object="${user}"><h1 th:text="${user.userName}"></h1><h1 th:text="${user.passWord}"></h1>
</div>

测试

6.1.3 存入List

    @GetMapping("/index")public String index(Model model){
//        model.addAttribute("msg","hello ,springboot");IUser user1 = new IUser();user1.setUserName("张三");user1.setEmail("123456@qq.com");user1.setPassWord("123");IUser user2 = new IUser();user2.setUserName("张四");user2.setEmail("123456@qq.com");user2.setPassWord("1234");IUser user3 = new IUser();user3.setUserName("张五");user3.setEmail("123456@qq.com");user3.setPassWord("12345");List<IUser> userList = new ArrayList<>();userList.add(user1);userList.add(user2);userList.add(user3);model.addAttribute("userList",userList);return "index";}

遍历List并取出1

<h1 th:each="user :${userList}" th:text="${user}" ></h1>

测试

遍历List并取出2

<div th:each="user :${userList}" ><h1 th:text="${user}"></h1>
</div>

测试

遍历List并取出3

<div th:each="user :${userList}" >[[${user}]]
</div>

测试：

遍历userList,得到user,取出user的某个属性的值，

直接通过以属性的方式获取即可，例如：

<div th:each="user :${userList}" >[[${user.userName}]]
</div>

测试

6.2 跳转另一个页面

准备：

    @GetMapping("/getUser")@ResponseBodyprivate String getUser(){return "getUserDate";}
模拟下，访问此接口，得到User的所有数据并转为Json格式

跳转链接：
<a th:href="@{/getUser}">Thymeleaf写法：查询用户</a>
<hr>
<a href="/getUser">原生写法：查询用户</a>
两种方法否可以实现跳转：

6.3 判断

  @GetMapping("/index")public String index(Model model){int a =1;model.addAttribute("msg",a);return "index";}
将int a =1,存入model对象，页面取出后进行判断
<div th:if="${msg<1}"><h1>a<1</h1>
</div><div th:unless="${msg>2}"><h1>a<=2</h1>
</div>
基于可以根据条件展示不同结果、按钮等等

springboot整合thymeleaf相关推荐

Springboot整合thymeleaf模板
Thymeleaf是个XML/XHTML/HTML5模板引擎,可以用于Web与非Web应用. Thymeleaf的主要目标在于提供一种可被浏览器正确显示的.格式良好的模板创建方式,因此也可以用作静态建 ...
SpringBoot整合Thymeleaf模板引擎以及静态资源的访问
SpringBoot整合Thymeleaf模板引擎静态资源访问的配置 Thymeleaf是一个现代服务器端Java模板引擎,适用于Web和独立环境,能够处理HTML,XML,JavaScript,CS ...
SpringBoot整合thymeleaf之模糊查询操作模块
SpringBoot整合thymeleaf之模糊查询操作模块引言 1.一般情况下,Mybatis的模糊查询操作模糊查询操作 2.在实战中的模糊查询操作 web页面提交数据 <form act ...
SpringBoot整合Thymeleaf+EasyExcel实现excel文件的读取并展示，附加swagger2配置（超详细示范！）
目录 1.Springboot整合Thyemleaf+EasyExcel 步骤 1.1 pom文件引入依赖 1.2 yml文件配置 1.3 config配置类 1.3.1 Swagger2配置类 1. ...
SpringBoot 整合 Thymeleaf 如何使用后台模板快速搭建项目
如果你和我一样,是一名 Java 道路上的编程男孩,其实我不太建议你花时间学 Thymeleaf,当然他的思想还是值得借鉴的.但是他的本质在我看来就是 Jsp 技术的翻版(Jsp 现在用的真的很少很少 ...
SpringBoot2.1.5(33)---SpringBoot整合 Thymeleaf 模板引擎
目录一. Thymeleaf 简介: 官网官方文档入门资料参考: 二.代码实践 1.maven依赖 2.yml 文件配置 3.Thymeleaf 文件 4.测试Controller 5.启动项 ...
SpringBoot整合thymeleaf及常用th:标签使用方法
pom文件加入启动依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId& ...
springboot整合thymeleaf启动错误
错误图: 可以看见提示错误是 datasource,原因是我上一次项目是整合mybatis,pom文件没有删除数据库得依赖,删除相关依赖即可!
SpringBoot 实战 (十二) | 整合 thymeleaf
微信公众号:一个优秀的废人如有问题或建议,请后台留言,我会尽力解决你的问题. 前言如题,今天介绍 Thymeleaf ,并整合 Thymeleaf 开发一个简陋版的学生信息管理系统. Spring ...

springboot整合thymeleaf

一、介绍

二、Thymeleaf 的特点

三、语法规则

四、springboot中集成Thymeleaf

五、使用

启动后访问改路径：http://localhost:8889/index

六、将数据存入页面并取出

6.1 存入普通数据

6.1.2 存入对象

6.1.3 存入List

6.2 跳转另一个页面

6.3 判断

springboot整合thymeleaf相关推荐

最新文章

热门文章