springboot2.0+thymeleaf技术-入门

其他 2021-01-24 11:46:50 阅读次数: 0

文章目录

1.什么thymeleaf?

简单说， Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。

2.thymeleaf的特点

  1. Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
  2. 2.Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
  3. 3. Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

3.项目创建

thymeleaf手动配置

如果不配置，会自动应用默认设置

#thymelea模板配置
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=false
spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

3.1导入相关包

thymeleaf 是spring官方推荐的视图层技术，所以spring提供了thymeleaf的启动包

	<!--thymeleaf 是spring官方推荐的视图层技术，所以spring提供了thymeleaf的启动包-->
	<dependency>
  		<groupId>org.springframework.boot</groupId>
  		<artifactId>spring-boot-starter-thymeleaf</artifactId>
  	</dependency>

3.2 thymeleaf视图层文件存放目录

在classpath:templates目录下，对应的maven映射目录：src/resoures/templates

3.3 实现

3.3.1 视图层

下面html文件应该放在templates目录下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>hello world</h1>
	<h2 th:text="${msg}"></h2>
</body>
</html>

3.3.2 java代码

App

package cn.liuhao;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class App {
    
    

	public static void main(String[] args) {
    
    

		SpringApplication.run(App.class, args);

	}

}

controller

package cn.liuhao.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("api")
public class ApiController {
    
    

	@RequestMapping("index")
	public String index(Model model) {
    
    
		model.addAttribute("msg", "你好！现在你应该看到了这条信息");
		return "index";
	}

}

3.3.3 结果

在这里插入图片描述

3.4 异常处理

在这里插入图片描述

3.4.1 出现原因

在thymeleaf中因为语法比较严谨，所以必须认定所有的html标签都必须有结束标记

3.4.2 处理异常

方式一

在mate标签后加结束标签即可

方式儿

更改thymeleaf包的版本，更改到更高版本即可解决这个问题
在pom.xml中加入以下代码

	<properties>
  	<thymeleaf.version>3.0.11.RELEASE</thymeleaf.version>
  	<thymeleaf-layout-dialect.version>2.0.4.RELEASE</thymeleaf-layout-dialect.version>
  </properties>

4.thymeleaf常用语法

4.1常用语法格式表

格式 作用
th:text 在页面上输出值
th:value 可以将一个值放到input标签value属性中
th:if if判断语句
th:switch th:switch与th:case配合构成多分支语句
th:each 遍历集合和键值对

4.2 thymeleaf内置对象

  1. thymeleaf内置了一些对象，用来帮助我们做更多更方便的操作
  2. thymeleaf中的内置对象，大多都以s结尾，例如：strings,dates,numbers
  3. 调用内置对象必须要以#开头
  4. thymeleaf内置对象的方法名与java里类提供方法名完全一摸一样，例如：java里String判断字符串是否为空的方法叫isEmpty，在thymeleaf内置对象strings里的方法名完全一摸一样

4.2.1 strings对象

4.2.1.1 判断字符串是否为空

如果为空，则返回true,否则返回false

<h1 th:text="${#strings.isEmpty(msg)}"></h1>

4.2.1.2 判断字符串是否含有指定字串，有返回true反之返回false

<!-- 判断字符串是否含有指定字符串 -->
<h1 th:text="${#strings.contains(msg,'你好')}"></h1>

4.2.1.3 测试此字符串是否以指定的前缀开始

<!-- 测试此字符串是否以指定的前缀开始。  -->
<h1 th:text="${#strings.startsWith(msg,'你好')}"></h1>

4.2.1.4 测试此字符串是否以指定的后缀结尾。

<!-- 测试此字符串是否以指定的后缀结尾。  -->
<h1 th:text="${#strings.endsWith(msg,'你好')}"></h1>

4.2.1.5 返回字符串的长度

<!-- 返回字符串的长度。  -->
<h1 th:text="${#strings.length(msg)}"></h1>

4.2.1.6 返回字符串在当前字符串所在索引值。

<!-- 返回字符串在当前字符串所在索引值。  -->
<h1 th:text="${#strings.indexOf(msg,'s')}"></h1>

4.2.1.7 截取字符串

<!-- 截取字符串  -->
<h1 th:text="${#strings.substring(msg,1,4)}"></h1>

4.2.1.8 转换大小写

<!-- 将英文字母转换为小写  -->
<h1 th:text="${#strings.toLowerCase(msg)}"></h1>
<!-- 将英文字母转换为大写  -->
<h1 th:text="${#strings.toUpperCase(msg)}"></h1>

4.2.2 dates对象

dates常用方法

<!-- 不给格式，默认转换为当前时区格式 -->
	<h2 th:text="${#dates.format(date)}"></h2>
	<!-- 指定格式 -->
	<h2 th:text="${#dates.format(date,'yyyy/MM/dd')}"></h2>
	<!-- 获取年份 -->
	<h2 th:text="${#dates.year(date)}"></h2>
	<!-- 获取月份 -->
	<h2 th:text="${#dates.month(date)}"></h2>
	<!-- 获取日份 -->
	<h2 th:text="${#dates.day(date)}"></h2>

在这里插入图片描述

4.3 常用逻辑判断

<body>
	<!-- 简单的if判断 -->
	<span th:if="${sex} == 'boy'">我是个男孩</span>
	<span th:if="${sex} == 'girl'">我是个女孩</span>
	
	<!-- switch分支 -->
	<div th:switch="${id}">
		<span th:case="1">分支1</span>
		<span th:case="2">分支2</span>
		<span th:case="3">分支3</span>
	</div>
</body>

4.4 遍历 list 与 map

4.4.1 遍历 list

controller控制器

@Controller
public class UserController {
    
    

	@RequestMapping("showUsers")
	public String showUsers(Model model) {
    
    
		List<User> users = new ArrayList<User>();
		users.add(new User(1, "张三", 99.9));
		users.add(new User(2, "李四", 88.9));
		users.add(new User(3, "王五", 77.9));
		model.addAttribute("list", users);
		return "showUsers";
	}
}

showUsers.html

<body>
	<table border="1px">
		<thead>
			<tr>
				<th>#ID</th>
				<th>#name</th>
				<th>#score</th>
			</tr>
		</thead>
		<tbody>
			<tr th:each="item : ${list}">
				<td th:text="${item.id}"></td>
				<td th:text="${item.name}"></td>
				<td th:text="${item.score}"></td>
			</tr>
		</tbody>
	</table>
	<table border="1px">
		<thead>
			<tr>
				<th>#ID</th>
				<th>#name</th>
				<th>#score</th>
				
				<th>#当前索引</th>
				<th>#当前条数</th>
				<th>#齐数</th>
				<th>#偶数</th>
				<th>#集合大小</th>
				<th>#当前是否为第一条</th>
				<th>#当前是否为最后一条</th>
			</tr>
		</thead>
		<tbody>
			<tr th:each="item,var : ${list}">
				<td th:text="${item.id}"></td>
				<td th:text="${item.name}"></td>
				<td th:text="${item.score}"></td>
				
				<td th:text="${var.index}"></td>
				<td th:text="${var.count}"></td>
				<td th:text="${var.even}"></td>
				<td th:text="${var.odd}"></td>
				<td th:text="${var.size}"></td>
				<td th:text="${var.first}"></td>
				<td th:text="${var.last}"></td>
			</tr>
		</tbody>
	</table>
</body>

4.4.2 遍历 map

controller控制器

@Controller
public class UserController {
    
    

	@RequestMapping("showUsers")
	public String showUsers(Model model) {
    
    
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("use1", new User(1, "张三", 99.9));
		map.put("use2", new User(2, "李四", 88.8));
		map.put("use3", new User(3, "王五", 77.7));
		model.addAttribute("map", map);
		return "showUsers";
	}
}

showUsers.html

<body>
	<table border="1px" align="center">
		<thead>
			<tr>
				<th>key</th>
				<th>value</th>
				<th>id</th>
				<th>name</th>
				<th>score</th>
			</tr>
		</thead>
		<tbody>
			<tr th:each="item : ${map}">
				<td th:text="${item.key}"></td>
				<td th:text="${item.value}"></td>
				<td th:text="${item.value.id}"></td>
				<td th:text="${item.value.name}"></td>
				<td th:text="${item.value.score}"></td>
			</tr>
		</tbody>
	</table>
</body>

4.5 从request,session,application作用域中传值取值

controller内容

@Controller
public class UserController {
    
    

	@RequestMapping("showUsers")
	public String showUsers(HttpServletRequest request) {
    
    
		// 向request作用域存入数据
		request.setAttribute("requestMsg", "this is a msg in request field");
		// 向seesion作用域存入数据
		request.getSession().setAttribute("sessionMsg", "this is a msg in session field");
		// 向application作用域存入数据
		request.getSession().getServletContext().setAttribute("applicationMsg", "this is a msg in application field");
		return "showUsers";
	}
}

showUsers.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!--request作用域取数据 -->
	<h2 th:text="${#httpServletRequest.getAttribute('requestMsg')}"></h2>
	<!-- session作用域取数据 -->
	<h2 th:text="${session.sessionMsg}"></h2>
	<!-- applcation作用域取数据 -->
	<h2 th:text="${application.applicationMsg}"></h2>
</body>
</html>

thymeleaf对url的处理

基本语法

与普通语法不同，url需要用@{}包括起来

@{
    
    }

绝对路径

<a th:href="@{http://www.baidu.com}">thymeleaf绝对路径写法</a>

相对路径（相对于当前项目）

<a th:href="@{/showUsers}">相对路径（相对当前项目而言）</a>

相对路径（相对于服务器根路径）

//  projectName  当前项目名
//  pageName	页面名
<a th:href="@{~/projectName/pageName}">相对路径（相对服务器根路径）</a>

传递参数

<a th:href="@{/showUsers(id=1,name=saddad)}">相对路径,传递参数（相对当前项目而言）</a>

restful风格传递参数

<a th:href="@{/showUsers/{pagename}(pagename=weq)}">相对路径,传递参数（相对当前项目而言）</a>

猜你喜欢

转载自blog.csdn.net/qq_42418169/article/details/108956489
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022