3.3 spring boot整合Thymeleaf(重点)

版权声明:本文为博主原创文章,未经博主允许不得转载。 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/>

猜你喜欢

转载自blog.csdn.net/qq_16855077/article/details/84941707
今日推荐