欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

SpringBoot+ Thymeleaf模板引擎使用介绍

程序员文章站 2022-04-15 23:01:54
1. Thymeleaf概述thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。(其他模板引擎，如Velocity、FreeMarker等)特点:开箱即用，Thymeleaf允许您处理六种模板，每种模板称为模板模式：XML有效的XMLXHTML有效的XHTMLHTML5旧版HTML52. Springboot整合thymeleaf2.1 步骤:1. 创建一个sprinboot项目2. 添加thymeleaf的起步依赖3.添加...

1. Thymeleaf概述

thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。
(其他模板引擎，如Velocity、FreeMarker等)

特点:开箱即用，Thymeleaf允许您处理六种模板，每种模板称为模板模式：

  • XML
  • 有效的XML
  • XHTML
  • 有效的XHTML
  • HTML5
  • 旧版HTML5

2. Springboot整合thymeleaf

2.1 步骤:
1. 创建一个sprinboot项目
2. 添加thymeleaf的起步依赖
3.添加spring web的起步依赖
4.编写html 使用thymleaf的语法获取变量对应后台传递的值
5.编写controller 设置变量的值到model中
2.2 入门案列:
2.2.1 创建一个springboot工程,案例工程名取为springboot-thymeleaf,导入pom.xml依赖 
 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> <version>2.2.1.RELEASE</version> </dependency> </dependencies>
2.2.2 创建包com.cf.thymeleaf.并创建启动类ThymeleafApplication 
@SpringBootApplication public class ThymeleafApplication { public static void main(String[] args) { SpringApplication.run(ThymeleafApplication.class,args); } }
2.2.3 创建application.yml 
# 设置thymeleaf的缓存设置，设置为false。默认加缓存的，用于测试 spring: thymeleaf: cache: false
2.2.4 控制层,创建controller用于测试后台 设置数据到model中,com.cf.thymeleaf.controller.ThymeleafController 
@Controller @RequestMapping("/thymeleaf") public class ThymeleafController { /***
     * 访问/test/hello  跳转到demo1页面
     * @param model
     * @return
     */ @RequestMapping("/hello") public String hello(Model model){ model.addAttribute("hello","hello welcome"); return "demo"; } }
2.2.5 在resources中创建templates目录，在templates目录创建 demo.html 
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--输出hello数据--> <p th:text="${hello}"></p> </body> </html>

3. Thymeleaf基本语法

3.1 th:action
  1. 修改demo.html 
<!--form表单--> <form th:action="@{/thymeleaf/hello}" > <input th:type="text" th:name="id"> <button>提交</button> </form>
  1. 修改后台内容 
 @RequestMapping("/hello") public String hello(Model model,String id){ model.addAttribute("hello","hello welcome"); System.out.println("接受的值:"+id); }
  1. 测试访问url:http://localhost:8080/thymeleaf/hello 在文本框中输入值adff，然后提交,提交之后会自动拼接到url地址栏中，在后台控制台中可以打印出“adff”.
3.2 th:each

对象遍历，功能类似jstl中的<c:forEach>标签。

  1. 创建com.cf.model.User,代码如下： 
public class User { private Integer id; private String name; private String address; //..get..set }
  1. Controller添加数据 
 @RequestMapping("/hello") public String hello(Model model,String id){ model.addAttribute("hello","hello welcome"); System.out.println("接受的值:"+id); //集合数据 List<User> users = new ArrayList<>(); users.add(new User(1,"张三","深圳")); users.add(new User(2,"李四","北京")); users.add(new User(3,"王五","武汉")); model.addAttribute("users",users); }
  1. 页面输出demo.html 
<!--th:each遍历--> <table> <tr> <td>下标</td> <td>编号</td> <td>姓名</td> <td>住址</td> </tr> <tr th:each="user,userstate:${users}"> <td th:text="${userstate.index}"></td> <td th:text="${user.id}"></td> <td th:text="${user.name}"></td> <td th:text="${user.address}"></td> </tr> </table> <!--
	注意:th:each表示循环遍历，user表示users集合的泛型名称，userstate表示别名
	userstate.index表示获取下标从0开始
-->
3.3 Map输出
  1. 后台添加Map 
 //Map定义 Map<String,Object> dataMap = new HashMap<String,Object>(); dataMap.put("No","123"); dataMap.put("address","深圳"); model.addAttribute("dataMap",dataMap);
  1. 页面输出demo.html 
<!--map输出遍历--> <div th:each="map,mapstate:${dataMap}"> <!--获取map中的k=v--> <div th:text="${map}"></div> key:<span th:text="${mapstate.current.key}"></span><br> value:<span th:text="${mapstate.current.value}"></span><br> </div>

解析：
${map}表示获取的是key=value的形式
${mapstate.current.key}表示获取key值
${mapstate.current.value}表示获取map集合中的value值

3.4 数组输出

1、后台添加数组 

 //存储一个数组 String[] names = {"张三","李四","王五"}; model.addAttribute("names",names);

2、页面输出 

<!--数组输出--> <div th:each="name,namestate:${names}"> 序号:<span th:text="${namestate.count}"></span> 姓名:<span th:text="${name}"></span> </div>

${namestate.count}表示获取序号，从1开始

3.5 Date输出

1、后台添加日期 

 //日期 model.addAttribute("now",new Date());

2、页面输出 

<!--日期输出--> <div> <!--默认时间格式--> <span th:text="${now}"></span><br> <!--转化日期格式--> <span th:text="${#dates.format(now,'yyyy-MM-dd hh:mm:ss')}"></span> </div>

${#dates.format(日期，输出的日期格式)}表示用来转化日期格式
${#dates.format()}表示日期转化格式的固定方法

3.6 th:if条件
  1. 后台添加年龄 
 //if条件 model.addAttribute("age",22);
  1. 页面输出 
<!--if判断--> <div> <span th:if="${age>20}" th:text="你终于长大了"></span> </div>
3.6 th:fragment &th:includ

1、创建一个foot.html代码如下： 

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div th:fragment="copy"> 关于我们<br> </div> </body> </html>

2、在demo.html中引入foot.html如下代码： 

<!--引入模块--> <div th:include="foot::copy"></div>

解析：
th:include表示在当前页面中引入其他页面或者模块的意思
foot::copy
其中foot表示要引入页面的名称，copy表示引入页面的模块名称，两者之间用“::”双冒号关联.

本文地址：https://blog.csdn.net/ABestRookie/article/details/108229803

相关标签： Spring spring boot java

上一篇： LeetCode Week 4：第 31 ~ 40 题

下一篇： 吐血整理_专升本_计算机文化基础

推荐阅读