SpringBoot 集成 Jsp、Thymeleaf 模板引擎 + Thymeleaf 基本使用

最新推荐文章于 2024-06-20 23:23:58 发布

萌宅鹿同学

最新推荐文章于 2024-06-20 23:23:58 发布

阅读量1.5k

点赞数 1

分类专栏： # Spring Boot 文章标签： java spring thymeleaf html jsp

本文链接：https://blog.csdn.net/weixin_43734095/article/details/106880699

版权

Spring Boot 专栏收录该内容

21 篇文章 23 订阅

订阅专栏

Spring Boot 集成 Thymelaf 模板

集成 Jsp 模板
集成 Thymeleaf 模板
- 引入依赖 + 配置文件
- 控制器访问 html 页面
Thymeleaf 基本使用
综合案例

SpringBoot 知识点目录： SpringBoot 核心知识点整理！

什么是模板引擎？
在这里插入图片描述

集成 Jsp 模板

引入依赖 + 配置文件

引入 jsp 的集成 jar包：

<dependency>
    <groupId>jstl</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
</dependency>

<dependency>
    <groupId>org.apache.tomcat.embed</groupId>
    <artifactId>tomcat-embed-jasper</artifactId>
</dependency>

引入 jsp 运行插件：

<build>
    <finalName>springboot_day1</finalName>
    <!--引入jsp运行插件-->
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

配置文件中配置 视图解析器：

spring.mvc.view.prefix=/     # / 代表访问项目中webapp中页面
spring.mvc.view.suffix=.jsp

启动项目

第一种方式：使用插件启动
第二种方式：使用 idea 中指定工作目录启动[推荐]

通过 http://localhost:8080/index.jsp 可以访问到默认的 index.jsp 界面。

控制器访问 jsp 页面

创建一个 /webapp/back/index.jsp 页面：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<html>
<body>
<h2>this is Back Directory Hello World!</h2>

<h1>获取项目名字: ${requestScope.name}   ${name}</h1>

<c:forEach items="${requestScope.users}" var="user">
    ID: ${user.id}<br> NAME: ${user.name} <br> AGE: ${user.age} <br> BIR: ${user.bir}
    <br> --------------------------------------------- <br>
</c:forEach>

配置文件中通过 server.servlet.jsp.init-parameters.developmetn=true 开启热部署了
</body>
</html>

写一个控制器：

@Controller // 注意区别, 这里不用 @RestController
@RequestMapping("user")
public class UserController {
    @GetMapping("findAll")
    public String findAll(HttpServletRequest request, Model model) {
        System.out.println("查询所有");
        model.addAttribute("name", "zhenyu");
        List<User> users = new ArrayList<>(Arrays.asList(
                new User("1", "zhenyu", 20, new Date()),
                new User("2", "chenchen", 23, new Date())));
        model.addAttribute("users", users);
        return "back/index"; // 视图解析器: 前缀+逻辑名+后缀 = /back/index
        // return "index"; 视图解析器: 前缀+逻辑名+后缀 = /index.jsp
    }
}

访问路径：localhost:8080/user/findAll
在这里插入图片描述

集成 Thymeleaf 模板

Thymeleaf 是跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP，相较与其他的模板引擎相比，Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。（jsp 必须运行服务器才能访问）

引入依赖 + 配置文件

<!--使用thymelaf-->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

配置文件：

# 使用模板目录
spring.thymeleaf.prefix=classpath:/templates/
# 使用模板后缀
spring.thymeleaf.suffix=.html
# 使用模板编码
spring.thymeleaf.encoding=UTF-8
# 使用模板响应类型
spring.thymeleaf.servlet.content-type=text/html

# 默认无法直接访问templates下的页面, 需要设置
# 以后static下放css与js, templates下放页面
spring.resources.static-locations=classpath:/templates, classpath:/static

引入下面的依赖是为了可以直接访问 html 页面：

spring.resources.static-locations=classpath:/templates, classpath:/static

例如 不经过控制器 访问 resources/templates/hello.html：如果不配置上面则无法访问。

http://localhost:8080/index.html

控制器访问 html 页面

使用 Thymeleaf 模板页面 默认放在 resources/templates 目录中

创建一个 /resources/templates/hello.html 页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>

SpringBoot 集成 Thymeleaf!!!

</body>
</html>

编写控制器：

@Controller
@RequestMapping("/hello")
public class HelloController {
    @GetMapping("/hello")
    public String hello() {
        System.out.println("hello spring boot!");
        return "hello";
    }
}

测试访问：

http://localhost:8080/hello/hello

在这里插入图片描述

Thymeleaf 基本使用

基本语法包含以下：后面介绍一些常用的，更具体的用到还需要查阅资料。
在这里插入图片描述

在页面中使用 Thymeleaf 时必须加入以下命名空间：

<html lang="en" xmlns:th="http://www.thymeleaf.org">

展示单个数据 th:text、th:utext、th:value

控制器中设置数据：

// 控制器中设置数据
model.addAttribute("name", "振宇"); // 或者 request.setAttribute("name", "振宇");
model.addAttribute("username", "<a href=‘’>yusael</a>");

页面中获取原样数据（不解析数据中的 html 标签）：

<!-- 页面中获取数据 -->
<span th:text="${name}"/>

获取并解析含有 html 标签的数据：

<span th:utext="${username}"></span>

将数据赋值给表单元素：

<!-- 将数据赋值给表单元素 -->
<input type="text" th:value="${name}"/>

总结：

使用 th:text="${属性名}" 获取对应数据，获取数据时会将对应标签中数据清空；
使用 th:utext="${属性名}" 获取对应的数据，可以将数据中 html 先解析再渲染到页面；
使用 th:value="${属性名}" 获取数据直接作为表单元素 value 属性

展示对象数据

// 控制器中设置数据
model.addAttribute("user",  new User("1", "振宇", 21, new Date()));

id:	 <span th:text="${user.id}"></span>
name:<span th:text="${user.name}"></span>
age: <span th:text="${user.age}"></span>
bir: <span th:text="${user.bir}"></span>  ====日期格式化  
	 <span th:text="${#dates.format(user.bir, 'yyyy-MM-dd HH:mm')}"></span>

条件展示数据 th:if、运算符

// 控制器中设置数据
model.addAttribute("user",  new User("1", "振宇", 21, new Date()));

<span th:if="${user.age} eq 23">青年</span>
<!--年龄小于等于23才会展示名字-->
<span th:if="${user.age} le 23" th:text="${user.name}"></span>

运算符：

gt : great than >
ge : great equal >=
eq : equal ==
lt : less than <
le : less equal <=
ne : not equal !=

展示多条数据 th:each

// 控制器中设置数据
List<User> users = Arrays.asList(
	new User("2", "张三", 23,  new Date()),
	new User("3", "李四", 24, new Date())
);
model.addAttribute("users", users);

直接遍历集合：

<ul th:each="user : ${users}">
	<li th:text="${user.id}"/>
	<li th:text="${user.name}"/>
	<li th:text="${user.age}"/>
	<li th:text="${#dates.format(user.bir, 'yyyy年MM月dd日')}"/>
</ul>

遍历时获取遍历状态：

<ul th:each="user, userStat : ${users}">
	<li>当前遍历的次数:<span th:text="${userStat.count}"/>
		当前遍历的索引:<span th:text="${userStat.index}"/>
		当前遍历是否是奇数行:<span th:text="${userStat.odd}"/>
		当前遍历是否是偶数行:<span th:text="${userStat.even}"/>
	</li>
</ul>

引入静态资源

使用 Thymeleaf 模板项目中 静态资源 默认放在 resources/static 目录中

项目中放入对应静态资源：
在这里插入图片描述
页面中引入：通过 @{/xxx} 去获取 resources/static 路径

<link rel="stylesheet" th:href="@{/css/index.css}">
<script th:src="@{/js/jquery-3.5.0.min.js}"></script>

综合案例

User：

@Data
@AllArgsConstructor
@ToString
public class User {
    private String id;
    private String name;
    private Integer age;
    private Date bir;
}

UserController：

@Controller
@RequestMapping("user")
public class UserController {
    @GetMapping("findAll")
    public String findAll(HttpServletRequest request, Model model) {
        System.out.println("查询所有");
        model.addAttribute("name", "振宇");
        model.addAttribute("username", "<a href=‘’>yusael</a>");
        model.addAttribute("user", new User("1", "小三", 23, new Date()));
        List<User> users = Arrays.asList(new User("2", "张三", 23,  new Date()),
                                         new User("3", "李四", 24, new Date()));
        model.addAttribute("users", users);
        return "index"; // 逻辑名
    }

    @GetMapping("delete")
    @ResponseBody // 以json响应给浏览器
    public String delete(String id, String name) {
        return "删除id为:" + id + ", name为:" + name + "的信息。";
    }
}

resources/templates 目录下 index.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>

<body>
    <h1>this is thymeleaf html</h1>

    <h1>展示单个数据</h1>
    欢迎: <span th:text="${name}"/>哈哈<br>
    username: <span th:utext="${username}"></span><br>
    输入: <input type="text" th:value="${name}"><br>

    <h1>展示对象数据</h1>
    <ul>
        <li>id: <span th:text="${user.id}"/></li>
        <li>name: <span th:text="${user.name}"/></li>
        <li>age: <span th:text="${user.age}"/></li>
        <li>bir: <span th:text="${user.bir}"/> ==== 格式化:
                 <span th:text="${#dates.format(user.bir, 'yyyy-MM-dd')}"/>
        </li>
    </ul>

    <h1>有条件展示数据</h1>
    <!--年龄小于等于23才会展示-->
    <span th:if="${user.age} le 23" th:text="${user.name}"></span>

    <h1>展示多个数据</h1>
    <ul th:each="user,userStat : ${users}">
        <li>当前遍历的次数:<span th:text="${userStat.count}"/>
            当前遍历的索引:<span th:text="${userStat.index}"/>
            当前遍历是否是奇数行:<span th:text="${userStat.odd}"/>
            当前遍历是否是偶数行:<span th:text="${userStat.even}"/>
        </li>
        <li th:text="${user.id}"/>
        <li th:text="${user.name}"/>
        <li th:text="${user.age}"/>
        <li th:text="${#dates.format(user.bir, 'yyyy年MM月dd日')}"/>
        <li>集合中的总记录数: <span th:text="${userStat.size}"/></li>
    </ul>

    <h1>测试链接中的路径</h1>
    <a th:href="@{/user/delete(id=99,name='赵六')}">删除记录</a>

</body>
</html>