SpringBoot整合Thymeleaf

最新推荐文章于 2024-07-23 10:00:00 发布

落花雨时

最新推荐文章于 2024-07-23 10:00:00 发布

阅读量258

点赞数

CC 4.0 BY-SA版权

分类专栏： Java微服务架构

本文链接：https://blog.youkuaiyun.com/mengxianglong123/article/details/99732886

Java微服务架构专栏收录该内容

17 篇文章

订阅专栏

1. 创建 Thymeleaf 的入门项目

1.1 创建项目

1.2 修改 pom 文件添加坐标

<?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 http://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.10.RELEASE</version> 
  </parent>  
  <groupId>com.bjsxt</groupId>  
  <artifactId>10-spring-boot-view-thymeleaf</artifactId>  
  <version>0.0.1-SNAPSHOT</version>  
  <properties> 
    <java.version>1.7</java.version> 
  </properties>  
  <dependencies> 
    <!-- springBoot 的启动器 -->  
    <dependency> 
      <groupId>org.springframework.boot</groupId>  
      <artifactId>spring-boot-starter-web</artifactId> 
    </dependency>  
    <!-- Thymeleaf相关依赖 -->  
    <dependency> 
      <groupId>org.springframework.boot</groupId>  
      <artifactId>spring-boot-starter-thymeleaf</artifactId> 
    </dependency> 
  </dependencies> 
</project>

1.3 创建存放视图的目录

目录位置：src/main/resources/templates templates：该目录是安全的。意味着该目录下的内容是不允许外界直接访问的。

2. Thymeleaf 的基本使用

2.1Thymeleaf 特点：

Thymelaef 是通过他特定语法对 html 的标记做渲染。

2.2 编写 Controller

/**
* Thymeleaf 入门案例
*
*
*/
@Controller
public class DemoController {
    @RequestMapping("/show")
    public String showInfo(Model model) {
        model.addAttribute("msg", "Thymeleaf 第一个案例");

        return "index";
    }
}

2.3 创建视图 .html

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title>Thymeleaf 入门</title> 
 </head> 
 <body> 
  <span th:text="Hello"></span> 
  <hr /> 
  <!-- 获取model中的值 -->
  <span th:text="${msg}"></span>  
 </body>
</html>

2.4 编写启动类

/**
*
*Thymeleaf 入门案例
*
*/
@SpringBootApplication
public class App {
    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
}

2.5 解决异常（仅低版本存在）

2.5.1 解决异常方式 1

让 html 的标记按照严禁的语法去编写。

2.5.2 解决异常方式 2

thymeleaf.jar:更新为 3.0 以上的版本

thymeleaf-layout-dialect.jar：更新为 2.0 以上的版本

更换 thymeleaf 的 jar 包的版本：

<properties> 
  <java.version>1.7</java.version>  
  <thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>  
  <thymeleaf-layout-dialect.version>2.0.4</thymeleaf-layout-dialect.version> 
</properties>

3. Thymeleaf 语法详解

3.1 变量输出与字符串操作

3.1.1 th:text

在页面中输出值

<span th:text="Hello"></span>

3.1.2 th:value

可以将一个值放入到 input 标签的 value 中

<input th:value="123">

3.1.3 内置对象strings

Thymeleaf 内置对象注意语法：

1，调用内置对象一定要用#

2，大部分的内置对象都以 s 结尾 strings、numbers、dates

${#strings.isEmpty(key)}	判断字符串是否为空，如果为空返回 true，否则返回 false
${#strings.contains(msg,'T')}	判断字符串是否包含指定的子串，如果包含返回 true，否则返回 false
${#strings.startsWith(msg,'a')}	判断当前字符串是否以子串开头，如果是返回 true，否则返回 false
${#strings.endsWith(msg,'a')}	判断当前字符串是否以子串结尾，如果是返回 true，否则返回 false
${#strings.length(msg)}	返回字符串的长度
${#strings.substring(msg,13)}${#strings.substring(msg,13,15)}	截取子串，用户与 jdk String 类下 SubString 方法相同
${#strings.indexOf(msg,'h')}	查找子串的位置，并返回该子串的下标，如果没找到则返回-1
${#strings.toUpperCase(msg)} ${#strings.toLowerCase(msg)}	字符串转大小写。

3.2 日期格式化处理

${#dates.format(key)}	格式化日期，默认的以浏览器默认语言为格式化标准
${#dates.format(key,'yyy/MM/dd')}	按照自定义的格式做日期转换
${#dates.year(key)} ${#dates.month(key)} ${#dates.day(key)}	year：取年 month：取月 day：取日

3.3 条件判断

3.3.1 th:if

<html>
 <head></head>
 <body>
  <span th:if="${sex} == '男'"> 性别：男 </span> 
  <span th:if="${sex} == '女'"> 性别：女 </span>
 </body>
</html>

3.3.2 th:switch

<div th:switch="${id}">
    <span th:case="1">ID 为 1</span>
    <span th:case="2">ID 为 2</span>
    <span th:case="3">ID 为 3</span>
</div>

3.4 迭代遍历

3.4.1 th:each

@RequestMapping("/show3")
    public String showInfo3(Model model){
        List<Users> list = new ArrayList<>();
        list.add(new Users(1,"张三",20));
        list.add(new Users(2,"李四",22));
        list.add(new Users(3,"王五",24));
        model.addAttribute("list", list);
        return "index3";
    }

<table border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr th:each="u : ${list}">
        <td th:text="${u.userid}"></td>
        <td th:text="${u.username}"></td>
        <td th:text="${u.userage}"></td>
    </tr>
</table>

3.4.2 th:each 状态变量

<table border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Index</th>
        <th>Count</th>
        <th>Size</th>
        <th>Even</th>
        <th>Odd</th>
        <th>First</th>
        <th>lase</th>
    </tr>
    <tr th:each="u,var : ${list}">
        <td th:text="${u.userid}"></td>
        <td th:text="${u.username}"></td>
        <td th:text="${u.userage}"></td>
        <td th:text="${var.index}"></td>
        <td th:text="${var.count}"></td>
        <td th:text="${var.size}"></td>
        <td th:text="${var.even}"></td>
        <td th:text="${var.odd}"></td>
        <td th:text="${var.first}"></td>
        <td th:text="${var.last}"></td>
    </tr>
</table>

状态变量属性
1,index:当前迭代器的索引从 0 开始
2,count:当前迭代对象的计数从 1 开始
3,size:被迭代对象的长度
4,even/odd:布尔值，当前循环是否是偶数/奇数从 0 开始
5,first:布尔值，当前循环的是否是第一条，如果是返回 true 否则返回 false
6,last:布尔值，当前循环的是否是最后一条，如果是则返回 true 否则返回 false

3.4.3 th:each 迭代 Map

public class Controller {
    @RequestMapping("/show")
    public String show(Model model){
        Map<String,Object> map = new HashMap<>();
        map.put("1",new User(1,"李四",10));
        map.put("2",new User(2,"王五",10));
        map.put("3",new User(4,"张三",10));
        map.put("4",new User(5,"汤姆",10));
        map.put("5",new User(6,"杰瑞",10));
        model.addAttribute("map",map);
        return "index.html";
    }

}

<table border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr th:each="maps : ${map}">
        <td th:text="${maps.value.id}"></td>
        <td th:text="${maps.value.name}"></td>
        <td th:text="${maps.value.money}"></td>
    </tr>
</table>

3.5 域对象操作

3.5.1HttpServletRequest

request.setAttribute("req", "HttpServletRequest");

Request:<span th:text="${#httpServletRequest.getAttribute('req')}"></span>

3.5.2HttpSession

request.getSession().setAttribute("sess", "HttpSession");

Session:<span th:text="${session.sess}"></span><br/>

3.5.3ServletContext

request.getSession().getServletContext().setAttribute("app","Application");

Application:<span th:text="${application.app}"></span>

3.6 URL

表达式 th:href th:src

3.6.1 url 表达式语法

基本语法：@{}

3.6.2 URL 类型

3.6.2.1 绝对路径

<a th:href="@{/show(id=1,name=zhagnsan)}">相对路径-传参</a>

3.6.2.2 相对路径

1)相对于当前项目的根相对于项目的上下文的相对路径

<a th:href="@{/show}">相对路径</a>

2) 相对于服务器路径的根

<a th:href="@{~/project2/resourcename}">相对于服务器的根</a>

3.6.3 在 url 中实现参数传递

<a th:href="@{/show(id=1,name=zhagnsan)}">相对路径-传参</a>

3.6.4 在 url 中通过 restful 风格进行参数传递

<a th:href="@{/path/{id}/show(id=1,name=zhagnsan)}"> 相 对 路 径 - 传 参-restful</a>

3.7 SRC

动态加载图片

@org.springframework.stereotype.Controller
public class Controller {
    @RequestMapping("/show")
    public String show(Model model){
        model.addAttribute("map",map);
        model.addAttribute("path","/123.png");
        return "index.html";
    }

}

<img th:src="@{'images'+${path}}" alt="">