版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_16855077/article/details/84941707
1 thymeleaf入门
1.1 pom.xml
<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>
<groupId>com.cloudtech</groupId>
<artifactId>01-springboot-hello</artifactId>
<version>0.0.1-SNAPSHOT</version>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.4.RELEASE</version>
<relativePath />
<!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<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>
<!-- 热部署 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>
</dependencies>
</project>
注意:测试后发现,界面改动后,没有立即生效,需要重启服务,所以这里增加热部署的配置。
1.2 创建存放视图的目录templates
不允许通过浏览器url直接访问目录下的资源
2 Thymeleaf的使用
2.1thymeleaf的特点
Thymeleaf Spring官方也推荐使用Thymeleaf,Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个Web应用。
2.2 demo
2.2.1 controller代码
package com.cloudtech.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class DemoController {
@RequestMapping("/show")
public String showInfo(Model model){
model.addAttribute("msg", "spring boot集成Thymeleaf");
return "thymeleft";
}
}
2.2.2 前端代码
新创建thymeleft.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>thymeleft学习</title>
</head>
<body>
<span th:text="hello"></span>
<hr/>
<span th:text="${msg}"></span>
</body>
</html>
2.2.3 测试
注意:建议thymeleaf的版本跟我一样2.0左右,低版本的对标签要求检查很严,会有各种各样的报错。
2.3 Thymeleaf语法
2.3.1controller代码
package com.cloudtech.controller;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import com.cloudtech.entity.User;
@Controller
public class DemoController {
@RequestMapping("/show")
public String showInfo(Model model,HttpServletRequest request){
model.addAttribute("msg", "spring boot集成Thymeleaf");
model.addAttribute("date", new Date());
model.addAttribute("sex", "男");
model.addAttribute("id", 1);
List<User> users= new ArrayList<>();
users.add(new User("张三","男"));
users.add(new User("李四","女"));
model.addAttribute("users", users);
Map<String,Object> maps = new HashMap<>();
maps.put("u1",new User("张三","男") );
maps.put("u2",new User("李四","女"));
model.addAttribute("map", maps);
request.setAttribute("req", "HttpServletRequest");
request.getSession().setAttribute("sess", "HttpSession");
request.getSession().getServletContext().setAttribute("app", "Application");
return "thymeleft";
}
}
2.3.2 前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>thymeleft学习</title>
</head>
<body>
<h3>字符串操作</h3>
测试字符串:
<span th:text="hello"></span>
<hr/>
测试后台传过来的字符串输出:
<span th:text="${msg}"></span>
<hr/>
可以将一个值放入到input中:
<input th:value="测试">
<hr/>
判断字符串是否为空,为空返回true,否则返回false:<br/>
<span th:text="${#strings.isEmpty(msg)}"></span>
<hr/>
判断字符串是否包含子字符串,包含返回true,否则返回false:<br/>
<span th:text="${#strings.contains(msg,'spring123')}"></span>
<hr/>
判断字符串是否以xx开头
<span th:text="${#strings.startsWith(msg,'sx')}"></span>
<hr/>
判断字符串是否以xx结尾
<span th:text="${#strings.endsWith(msg,'Thymeleaf')}"></span>
<hr/>
判断字符串长度
<span th:text="${#strings.length(msg)}"></span>
<hr/>
判断字符串所在下标
<span th:text="${#strings.indexOf(msg,'s')}"></span>
<hr/>
截取字字符串:<br/>
<span th:text="${#strings.substring(msg,13)}"></span><br/>
<span th:text="${#strings.substring(msg,13,15)}"></span>
<hr/>
字符串大小写:
<span th:text="${#strings.toUpperCase(msg)}"></span><br/>
<span th:text="${#strings.toLowerCase(msg)}"></span>
<hr/>
<h3>时间格式化</h3>
格式化日期:
<span th:text="${#dates.format(date)}"></span><br/>
自定义格式化日期:
<span th:text="${#dates.format(date,'YYYY-MM-dd')}"></span><br/>
<span th:text="${#dates.format(date,'YYYY-MM-dd')}"></span>
<hr/>
<h3>条件判断</h3>
<span th:if="${sex} == '男'">
性别男
</span>
<span th:if="${sex} == '女'">
性别女
</span>
<br/>
<div th:switch="${id}">
<p th:case="1">张三</p>
<p th:case="2">李四</p>
<p th:case="3">王五</p>
</div>
<div>
迭代循环:
<table border="1">
<tr>
<td>名称</td>
<td>性别</td>
</tr>
<tr th:each="u:${users}">
<td th:text="${u.userName}"></td>
<td th:text="${u.sex}"></td>
</tr>
</table>
</div>
<br/>
<div>
迭代循环状态变化:
<table border="1">
<tr>
<td>名称</td>
<td>性别</td>
<td>Index</td>
<td>Count</td>
<td>Size</td>
<td>Even</td>
<td>Odd</td>
<td>First</td>
<td>last</td>
</tr>
<tr th:each="u,var : ${users}">
<td th:text="${u.userName}"></td>
<td th:text="${u.sex}"></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>
<!--
状态属性描述
index:索引从0开始
count:计数,从1开始
size: 被迭代对象的长度
even/odd:当前循环为偶数/奇数 从0开始
first:判断当前行数是否为第一行,是为true,否则为false
last:判断当前行数是否为最后一行,是为true,否则为false
-->
</table>
</div>
<br/>
<div>
迭代Map循环:
<table border="1">
<tr>
<td>名称</td>
<td>性别</td>
</tr>
<tr th:each="maps : ${map}">
<td th:each="entry:${maps}" th:text="${entry.value.userName}"></td>
<td th:each="entry:${maps}" th:text="${entry.value.sex}"></td>
</tr>
</table>
</div>
<hr/>
<h3>域对象操作</h3>
requset:<span th:text="${#httpServletRequest.getAttribute('req')}"></span><br/>
Session:<span th:text="${session.sess}"></span><br/>
Application:<span th:text="${application.app}"></span>
<hr/>
</body>
</html>
效果图:
字符串操作
测试字符串: hello
测试后台传过来的字符串输出: spring boot集成Thymeleaf
可以将一个值放入到input中:
测试
判断字符串是否为空,为空返回true,否则返回false:
false
判断字符串是否包含子字符串,包含返回true,否则返回false:
false
判断字符串是否以xx开头 false
判断字符串是否以xx结尾 true
判断字符串长度 22
判断字符串所在下标 0
截取字字符串:
Thymeleaf
Th
字符串大小写: SPRING BOOT集成THYMELEAF
spring boot集成thymeleaf
时间格式化
格式化日期: 2018年12月11日 下午04时09分04秒
自定义格式化日期: 2018-12-11
2018-12-11
条件判断
性别男
张三
迭代循环:
名称 性别
张三 男
李四 女
迭代循环状态变化:
名称 性别 Index Count Size Even Odd First last
张三 男 0 1 2 false true true false
李四 女 1 2 2 true false false true
迭代Map循环:
名称 性别
张三 男
李四 女
域对象操作
requset:HttpServletRequest
Session:HttpSession
Application:Application
3. URL
<a th:href="@{http://www.baidu.com}">绝对路径</a><br/>
<hr/>
<!-- 相对于项目上下文 -->
<a th:href="@{/show}">相对路径</a><br/>
<!-- 相对于服务器来讲,假设一个tomcat下有两个项目,从这个项目访问另外一个项目 -->
<a th:href="@{~/project2/test}">相对于服务器的根</a><br/>
<hr/>
<a th:href="@{/show(id=1,name=张三)}">相对路径传参</a><br/>