Spring Boot(四) Spring Boot 整合视图层技术（Jsp、Freemarker、Thymeleaf）

最新推荐文章于 2022-04-20 17:53:13 发布

plenilune-望月

最新推荐文章于 2022-04-20 17:53:13 发布

阅读量367

点赞数

分类专栏： Spring Boot

本文链接：https://blog.csdn.net/donglinjob/article/details/108617664

版权

Spring Boot 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

Spring Boot 整合视图层技术（Jsp、Freemarker、Thymeleaf）

1 Spring Boot 整合 JSP 技术

1.1 创建项目

1.2 修改 POM 文件，添加 JSP 引擎与 JSTL 标签库

<?xml version="1.0" encoding="UTF-8"?>
<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
https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.2.0.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.bjsxt</groupId>
	<artifactId>springbootjsp</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>springbootjsp</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<java.version>1.8</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<!-- 添加 jsp 引擎， SpringBoot 内置的 Tomat 中没有此依赖 -->
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
		</dependency>
		<!-- 添加 JSTL 坐标依赖 -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
			<exclusions>
				<exclusion>
					<groupId>org.junit.vintage</groupId>
					<artifactId>junit-vintage-engine</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>
</project>

1.3 创建 webapp 目录

1.4 标记为 web 目录

1.5 创建 JSP

<%@ page contentType="text/html;charset=UTF-8"
language="java" %>
<html>
	<head>
		<title>Title</title>
	</head>
	<body>
		<h2>Hello JSP</h2>
	</body>
</html>

1.6 修改配置文件，配置视图解析器

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

1.7 创建 Controller

/**
* 页面跳转 Controller
*/
@Controller
public class PageController {
	/**
	* 页面跳转
	*/
	@GetMapping("/{page}")
	public String showPage(@PathVariable String page){
		return page;
	}
}

如果在 IDEA 中项目结构为聚合工程。那么在运行 jsp 是需要指定路径。如果项目结构为独立项目则不需要。

2 Spring Boot 整合 Freemarker

2.1 创建项目

2.2 修改 POM 文件，添加 Freemarker 启动器

<?xml version="1.0" encoding="UTF-8"?>
<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
https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.2.0.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.bjsxt</groupId>
	<artifactId>springbootfreemarker</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>springbootfreemarker</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<java.version>1.8</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<!--Freemarker 启动器依赖 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-freemarker</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
			<exclusions>
				<exclusion>
					<groupId>org.junit.vintage</groupId>
					<artifactId>junit-vintage-engine</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>
</project>

2.3 创建 Users 实体

public class Users {
	private String username;
	private String usersex;
	private String userage;
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getUsersex() {
		return usersex;
	}
	public void setUsersex(String usersex) {
		this.usersex = usersex;
	}
	public String getUserage() {
		return userage;
	}
	public void setUserage(String userage) {
		this.userage = userage;
	}
	public Users(String username, String usersex, String userage) {
		this.username = username;
		this.usersex = usersex;
		this.userage = userage;
	}
	public Users() {
	}
}

2.4 创建 Controller

/**
* UsersController
*/
@Controller
public class UsersController {
	/**
	* 处理请求，返回数据
	*/
	@GetMapping("/showUsers")
	public String showUsers(Model model){
		List<Users> list = new ArrayList<>();
		list.add(new Users("admin","F","32"));
		list.add(new Users("Lisi","M","23"));
		list.add(new Users("xiaoli","F","23"));
		model.addAttribute("list",list);
		return "userList";
	}
}

2.5 创建视图

<!DOCTYPE html>
<html lang="en">
<head>
		<meta charset="UTF-8">
		<title>Title</title>
</head>
<body>
	<table border="1" align="center" width="50%">
		<tr>
			<th>Name</th>
			<th>Sex</th>
			<th>Age</th>
		</tr>
		<#list list as user>
		<tr>
			<td>${user.username}</td>
			<td>${user.usersex}</td>
			<td>${user.userage}</td>
		</tr>
		</#list>
	</table>
</body>

2.6 修改配置文件添加后缀

spring.freemarker.suffix=.ftl

3 Spring Boot 整合 Thymeleaf

3.1 Thymeleaf 介绍

Thymeleaf 的主要目标是将优雅的自然模板带到开发工作流程中，并将 HTML 在浏览器中正确显示，并且可以作为静态原型，让开发团队能更容易地协作。Thymeleaf 能够处理HTML，XML，JavaScript，CSS 甚至纯文本。

长期以来,jsp 在视图领域有非常重要的地位,随着时间的变迁,出现了一位新的挑战者:Thymeleaf,Thymeleaf 是原生的,不依赖于标签库.它能够在接受原始 HTML 的地方进行编辑和渲染.因为它没有与Servelet规范耦合,因此Thymeleaf模板能进入jsp所无法涉足的领域。

3.2Thymeleaf 基本使用

3.2.1 创建项目

3.2.2 修改 POM 文件，添加 Thymeleaf 启动器依赖

<?xml version="1.0" encoding="UTF-8"?>
<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
https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.2.0.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.bjsxt</groupId>
	<artifactId>springbootthymeleaf</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>springbootthymeleaf</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<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-starter-test</artifactId>
			<scope>test</scope>
			<exclusions>
				<exclusion>
					<groupId>org.junit.vintage</groupId>
					<artifactId>junit-vintage-engine</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>
</project>

3.2.3 创建 Controller

/**
* 页面跳转 Controller
*/
@Controller
public class PageController {
	/**
	* 页面跳转方法
	*/
	@GetMapping("/show")
	public String showPage(Model model){
		model.addAttribute("msg","Hello Thymeleaf");
		return "index";
	}
}

3.2.4 创建视图

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>北京尚学堂首页</title>
	</head>
	<body>
		<span th:text=" 北京尚学堂"></span>
		<hr/>
		<span th:text="${msg}"></span>
	</body>
</html>

3.3Thymeleaf 语法讲解

命名空间：xmlns:th="http://www.thymeleaf.org"

3.3.1 字符串与变量输出操作

3.3.1.1 th:text

th:text 在页面中输出值

3.3.1.2 th:value

th:value 可以将一个值放入到 input 标签的 value 中

3.3.2 字符串操作

Thymeleaf 提供了一些内置对象，内置对象可直接在模板中使用。这些对象是以#引用的。

3.3.2.1 使用内置对象的语法

1）引用内置对象需要使用#

2）大部分内置对象的名称都以 s 结尾。如：strings、numbers、dates

${#strings.isEmpty(key)}

判断字符串是否为空，如果为空返回 true，否则返回 false

${#strings.contains(msg,'T')}

判断字符串是否包含指定的子串，如果包含返回 true，否则返回 false

${#strings.startsWith(msg,'a')}

判断当前字符串是否以子串开头，如果是返回 true，否则返回 false

${#strings.endsWith(msg,'a')}

判断当前字符串是否以子串结尾，如果是返回 true，否则返回 false

${#strings.length(msg)}

返回字符串的长度

${#strings.indexOf(msg,'h')}

查找子串的位置，并返回该子串的下标，如果没找到则返回-1

${#strings.substring(msg,2)}

${#strings.substring(msg,2,5)}

截取子串，用户与 jdk String 类下 SubString 方法相同

${#strings.toUpperCase(msg)}

${#strings.toLowerCase(msg)}

字符串转大小写。

3.3.3 日期格式化处理

${#dates.format(key)}

格式化日期，默认的以浏览器默认语言为格式化标准

${#dates.format(key,'yyyy/MM/dd')}

按照自定义的格式做日期转换

${#dates.year(key)}

${#dates.month(key)}

${#dates.day(key)}

Year：取年

Month：取月

Day：取日

3.3.4 条件判断

3.3.4.1 th:if

th:if 条件判断

3.3.4.2 th:switch / th:case

th:switch / th:case

th:switch / th:case 与 Java 中的 switch 语句等效，有条件地显示匹配的内容。如果有多个匹配结果只选择第一个显示。

th:case="*"表示 Java 中 switch 的 default，即没有 case 的值为 true 时则显示 th:case="*"的内容。

3.3.5 迭代遍历

3.3.5.1 th:each

th:each迭代器，用于循环迭代集合

3.3.5.2 th:each 状态变量

1) index:当前迭代器的索引从 0 开始

2) count:当前迭代对象的计数从 1 开始

3) size:被迭代对象的长度

4) odd/even:布尔值，当前循环是否是偶数/奇数从 0 开始

5) first:布尔值，当前循环的是否是第一条，如果是返回 true 否则返回 false

6) last:布尔值，当前循环的是否是最后一条，如果是则返回 true 否则返回 false

3.3.6 th:each 迭代 Map

<table border="1" width="50%">
	<tr>
		<th>ID</th>
		<th>Name</th>
		<th>Age</th>
		<th>Key</th>
	</tr>
	<tr th:each="m : ${map}">
		<td th:text="${m.value.id}"></td>
		<td th:text="${m.value.name}"></td>
		<td th:text="${m.value.age}"></td>
		<td th:text="${m.key}"></td>
	</tr>
</table>

3.3.7 操作域对象

3.3.7.1 HttpServletRequest

request.setAttribute("req", "HttpServletRequest");

<span th:text="${#httpServletRequest.getAttribute('req')}"></span>
<span th:text="${#request.getAttribute('req')}"></span>

3.3.7.2 HttpSession

request.getSession().setAttribute("sess", "HttpSession");

<span th:text="${session.ses}"></span><br/>
<span th:text="${#session.getAttribute('ses')}"></span><br/>

3.3.7.3 ServletContext

request.getSession().getServletContext().setAttribute("app","Application");

<span th:text="${application.app}"></span>
<span th:text="${#servletContext.getAttribute('app')}"></span>

3.3.8 URL 表达式

3.3.8.1 语法

在 Thymeleaf 中 URL 表达式的语法格式为@{}

3.3.8.2 URL 类型

3.3.8.2.1 绝对路径

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

3.3.8.2.2 相对路径

相对于当前项目的根

<a th:href="@{/show}">相对路径</a>

相对于服务器路径的根

<a th:href="@{~/project2/resourcename}">相对于服务器的根</a>

3.3.8.3 在在 URL 中传递参数

3.3.8.3.1 在普通格式的 URL 中传递参数

<a th:href="@{/show?id=1&name=zhangsan}">普通 URL 格式传参</a>
<a th:href="@{/show(id=1,name=zhangsan)}">普通 URL 格式传参</a>
<a th:href="@{'/show?id='+${id}+'&name='+${name}}">普通 URL 格式传参</a>
<a th:href="@{/show(id=${id},name=${name})}">普通 URL 格式传参</a>

3.3.8.3.2在在 restful 格式的 URL 中传递参数

<a th:href="@{/show/{id}(id=1)}">restful 格式传参</a>
<a th:href="@{/show/{id}/{name}(id=1,name=admin)}">restful 格 式 传 参</a>
<a th:href="@{/show/{id}(id=1,name=admin)}">restful 格式传参</a>
<a th:href="@{/show/{id}(id=${id},name=${name})}">restful 格式传参</a>

3.3.9 在配置文件中配置 Thymeleaf

spring.thymeleaf.prefix=classpath:/templates/suibian/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML # 配置视图模板类型，如果视图模板使用的是 是 html5  需要配置
spring.thymeleaf.encoding=utf-8
spring.thymeleaf.servlet.content-type=text/html # 响应类型
# 配置页面缓存
spring.thymeleaf.cache=false