devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

SpringBoot入门--整合thymeleaf_thymeleaf怎么导入xml

作者：知新_RL | 2024-03-07 09:54:05

赞

踩

thymeleaf怎么导入xml

整合thymeleaf

导入thymeleaf模板依赖

在pom.xml中添加依赖

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

  • 1
  • 2
  • 3
  • 4
  • 5

配置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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

在resources下添加页面

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

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

调用

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";
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

效果

在这里插入图片描述
直接打开，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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在这里插入图片描述

        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);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

<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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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

时间类型转换

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

  • 1
  • 2
  • 3
  • 4

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

text与utext

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

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

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

URL

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

  • 1
  • 2
  • 3

引入静态资源文件js/css

application.properties 设定

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

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

  • 1

在这里插入图片描述

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

条件判断 th:if

u.setAge(10);

  • 1
<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/>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在这里插入图片描述

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";
    }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
<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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

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

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
u.setName("superAdmin");

  • 1

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

th:selected

u.setName("superAdmin");

  • 1
<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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

默认选中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>

  • 1
  • 2
  • 3
  • 4
  • 5

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";
    }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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

在这里插入图片描述

调用自定义配置文件属性

application.properties中添加

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

在这里插入图片描述

调用

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

  • 1
  • 2

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/204904
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号