SpringBoot入门--整合thymeleaf

最新推荐文章于 2024-09-10 18:40:49 发布

|白鸦|

最新推荐文章于 2024-09-10 18:40:49 发布

阅读量170

点赞数 1

分类专栏： SpringBoot入门文章标签： spring boot

本文链接：https://blog.csdn.net/u013708817/article/details/108995420

版权

SpringBoot入门专栏收录该内容

13 篇文章 0 订阅

订阅专栏

整合thymeleaf

导入thymeleaf模板依赖
配置thymeleaf属性
在resources下添加页面
调用
效果
thymeleaf常用标签

导入thymeleaf模板依赖

在pom.xml中添加依赖

<!-- 引入 thymeleaf 模板依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

配置thymeleaf属性

在application.properties中配置thymeleaf属性

#############################################################
##
## thymeleaf 静态资源配置
##
#############################################################
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
## 关闭缓存, 即时刷新, 上线生产环境需要改为true
spring.thymeleaf.cache=false

在resources下添加页面

具体路径要对应
在这里插入图片描述
center.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
Thymeleaf模板引擎
<h1>center page</h1>
</body>
</html>

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
Thymeleaf模板引擎
<h1 th:text="${name}">hello world~~~~~~~</h1>
</body>
</html>

调用

package com.cdw.springbootmavemdemo.controller;

import com.cdw.springbootmavemdemo.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;


@Controller
@RequestMapping("th")
public class ThymeleafController {

	@RequestMapping("/index")
    public String index(ModelMap map) {
        map.addAttribute("name", "thymeleaf-cdw");
        return "thymeleaf/index";
    }
	
	@RequestMapping("center")
    public String center() {
        return "thymeleaf/center/center";
    }
}

效果

在这里插入图片描述
直接打开，EL表达式不会调用

thymeleaf常用标签

基本使用方式

对象引用方式

<div>
	用户姓名：<input th:id="${user.name}" th:name="${user.name}" th:value="${user.name}"/>
	<br/>
	用户年龄：<input th:value="${user.age}"/>
	<br/>
	用户生日：<input th:value="${user.birthday}"/>
	<br/>
	用户生日：<input th:value="${#dates.format(user.birthday, 'yyyy-MM-dd')}"/>
	<br/>
</div>

在这里插入图片描述

        User u = new User();
		u.setName("superAdmin");
		u.setAge(10);
		u.setPassword("123465");
		u.setBirthday(new Date());
		u.setDesc("<font color='green'><b>hello cdw</b></font>");
		map.addAttribute("user", u);

结果：
在这里插入图片描述
不频繁写对象方法：

<div th:object="${user}">
	用户姓名：<input th:id="*{name}" th:name="*{name}" th:value="*{name}"/>
	<br/>
	用户年龄：<input th:value="*{age}"/>
	<br/>
	用户生日：<input th:value="*{#dates.format(birthday, 'yyyy-MM-dd hh:mm:ss')}"/>
	<br/>
</div>

结果：
在这里插入图片描述

时间类型转换

    用户生日：<input th:value="${user.birthday}"/>
	<br/>
	用户生日：<input th:value="${#dates.format(user.birthday, 'yyyy-MM-dd')}"/>
	<br/>

结果：
在这里插入图片描述

text与utext

u.setDesc("<font color='green'><b>hello cdw</b></font>");

text 与 utext ：<br/>
<span th:text="${user.desc}">abc</span>
<br/>
<span th:utext="${user.desc}">abc</span>
<br/>
<br/>

结果：
在这里插入图片描述

URL

URL:<br/>
<a href="" th:href="@{http://www.baidu.com}">网站地址</a>
<br/>

引入静态资源文件js/css

application.properties 设定

#设定静态文件路径，js,css等
spring.mvc.static-path-pattern=/static/**

	<script th:src="@{/static/js/test.js}"></script>

在这里插入图片描述

结果：
在这里插入图片描述

条件判断 th:if

u.setAge(10);

<br/>
<div th:if="${user.age} == 18">十八岁的天空</div>
<div th:if="${user.age} gt 18">你老了</div>
<div th:if="${user.age} lt 18">你很年轻</div>
<div th:if="${user.age} ge 18">大于等于</div>
<div th:if="${user.age} le 18">小于等于</div>
<br/>

在这里插入图片描述

th:unless与th:if

循环th:each

@RequestMapping("test")
    public String test(ModelMap map) {
		
		User u = new User();
		u.setName("superAdmin");
		u.setAge(10);
		u.setPassword("123465");
		u.setBirthday(new Date());
		u.setDesc("<font color='green'><b>hello cdw</b></font>");
		
		map.addAttribute("user", u);
		
		User u1 = new User();
		u1.setAge(19);
		u1.setName("cdw");
		u1.setPassword("123456");
		u1.setBirthday(new Date());
		
		User u2 = new User();
		u2.setAge(17);
		u2.setName("2020");
		u2.setPassword("123456");
		u2.setBirthday(new Date());
		
		List<User> userList = new ArrayList<>();
		userList.add(u);
		userList.add(u1);
		userList.add(u2);
		
		map.addAttribute("userList", userList);
		
        return "thymeleaf/test";
    }

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>年龄备注</th>
        <th>生日</th>
    </tr>
    <tr th:each="person:${userList}">
        <td th:text="${person.name}"></td>
        <td th:text="${person.age}"></td>
        <td th:text="${person.age gt 18} ? 你老了 : 你很年轻">18岁</td>
        <td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd hh:mm:ss')}"></td>
    </tr>
</table>

结果：
在这里插入图片描述

th:switch与th:case

<div th:switch="${user.name}">
  <p th:case="'cdw'">cdw</p>
  <p th:case="#{roles.manager}">普通管理员</p>
  <p th:case="#{roles.superAdmin}">超级管理员</p>
  <p th:case="*">其他用户</p>
</div>

u.setName("superAdmin");

结果：在这里插入图片描述

th:selected

u.setName("superAdmin");

<select>
     <option >选择框</option>
     <option th:selected="${user.name eq 'chen'}">chen</option>
     <option th:selected="${user.name eq 'qq'}">qq</option>
     <option th:selected="${user.name eq 'superAdmin'}">superAdmin</option>
</select>

默认选中superAdmin 在这里插入图片描述

form表单

<form th:action="@{/th/postForm}" th:object="${user}" method="post" th:method="post">
    <input type="text" th:field="*{name}"/>
    <input type="text" th:field="*{age}"/>
    <input type="submit"/>
</form>

th:object与th:field配合使用更简洁，如下效果，省去id，name，value设置
在这里插入图片描述

@PostMapping("postForm")
    public String postForm(User u) {
		
		System.out.println("姓名：" + u.getName());
		System.out.println("年龄：" + u.getAge());
		
        return "redirect:/th/test";
    }

结果：
在这里插入图片描述

在这里插入图片描述

调用自定义配置文件属性

application.properties中添加

############################################################
#
# 配置i18n 资源文件，供thymeleaf 读取
#
############################################################
spring.messages.basename=i18n/messages
spring.messages.cache-seconds=3600
spring.messages.encoding=UTF-8

在这里插入图片描述

调用

<p th:case="#{roles.manager}">普通管理员</p>
<p th:case="#{roles.superAdmin}">超级管理员</p>

结果：在这里插入图片描述

|白鸦|

关注

1
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录