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

灰太狼 2023-02-19 14:23 15阅读 0赞

### Spring Boot 集成 Thymelaf 模板 ###

*  集成 Jsp 模板
 *   *  引入依赖 + 配置文件
     *  启动项目
     *  控制器访问 jsp 页面
 *  集成 Thymeleaf 模板
 *   *  引入依赖 + 配置文件
     *  控制器访问 html 页面
 *  Thymeleaf 基本使用
 *   *  展示单个数据 th:text、th:utext、th:value
     *  展示对象数据
     *  条件展示数据 th:if、运算符
     *  展示多条数据 th:each
     *  引入静态资源
 *  综合案例

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

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

# 集成 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>
        
        <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

## 启动项目 ##

*  第一种方式：使用插件启动  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]
 *  第二种方式：使用 idea 中指定工作目录启动\[推荐\]  
    ![在这里插入图片描述][20200621010921657.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]  
    通过 `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`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]

# 集成 Thymeleaf 模板 #

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

## 引入依赖 + 配置文件 ##

<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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]

# Thymeleaf 基本使用 #

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

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

## 展示单个数据 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 标签 的数据：

*  将数据赋值给表单元素：

<input type="text" th:value="${name}"/>

总结：

1.  使用 `th:text="${属性名}"` 获取对应数据，获取数据时会将对应标签中数据清空；
2.  使用 `th:utext="${属性名}"` 获取对应的数据，可以将数据中 html 先解析再渲染到页面；
3.  使用 `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()));

运算符：

*  `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, 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` 目录中

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

# 综合案例 #

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>
        
        <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>

访问：`http://localhost:8080/user/findAll`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]

[SpringBoot]: https://blog.csdn.net/weixin_43734095/article/details/106864711
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020062513211426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200621010326546.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[20200621010921657.png]: https://img-blog.csdnimg.cn/20200621010921657.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200621010806757.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200621012718299.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200621020219341.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200625141844388.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70
[20200621024613816.png]: https://img-blog.csdnimg.cn/20200621024613816.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200621030020344.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70