likes
comments
collection
share

Spring Boot项目如何集成 HTML？这你必须得会的！

作者站长头像
站长
· 阅读数 47

🏆本文收录于《Spring Boot从入门到精通》，专门攻坚指数提升。

本专栏致力打造最硬核 Spring Boot 从零基础到进阶系列学习内容，🚀均为全网独家首发，打造精品专栏，专栏持续更新中…欢迎大家订阅持续学习。

环境说明：Windows10 + Idea2021.3.2 + Jdk1.8 + SpringBoot 2.3.1.RELEASE

 1. 前言🔥

        我们都知道，Spring Boot作为一款广泛应用于企业级的开发框架，其通过简化开发过程、提高开发效率赢得了众多开发者的青睐。在实际项目开发中，集成 HTML作为 Web 应用程序中的一个基本需求，也是现在极其常见的场景之一。在此，我将为大家分享一下Spring Boot如何集成HTML的实现方法。

        首先，我们需要明确两个前提：Spring Boot作为一个 Web 框架，其实现的核心原则就是 Restful。其次，HTML是常用的结构性标记语言，它是构建 Web 应用程序的必备语言之一。鉴于这两个前提，我们可以通过引入 Thymeleaf 模板引擎来实现 HTML 的集成。

        那么，具体如何集成Html呢？这将又会是干货满满的一期，全程无尿点不废话只抓重点教，具有非常好的学习效果，拿好小板凳准备就坐！希望学习的过程中大家认真听好好学，学习的途中有任何不清楚或疑问的地方皆可评论区留言或私信，bug菌将第一时间给予解惑，那么废话不多说，直接开整！Fighting！！ 

Spring Boot项目如何集成 HTML？这你必须得会的！

2. 环境说明🔥

本地的开发环境：

  • 开发工具：IDEA 2021.3
  • JDK版本： JDK 1.8
  • Spring Boot版本：2.3.1 RELEASE
  • Maven版本：3.8.2

3. 正文🔥 

        具体而言，我们可以按照以下步骤来实现：

3.1 引入 Thymeleaf 依赖

        引入 Thymeleaf 依赖：在你的项目pom依赖配置中 Maven 或 Gradle 配置文件中，引入 Thymeleaf 的相关依赖，如下是maven依赖：

<!-- pom.xml -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

3.2 配置 Thymeleaf 模板

        配置 Thymeleaf 模板，在 Spring Boot应用的配置文件 application.properties 或 application.yml 中，配置 Thymeleaf 模板的相关信息，我是直接配置在dev环境配置中，你们如果作为演示，则直接在配置文件中配置如下即可，后续可以迁移指定到不同的配置文件中，这样针对不同的部署环境可以切换不同的配置，配置如下，仅供参考：

spring:
  thymeleaf:
    cache: false
    mode: HTML
    prefix: classpath:/templates/
    suffix: .html

3.3 编写 HTML 页面

        编写 HTML 页面：在 src/main/resources/templates 目录下，编写 HTML 页面，通过 Thymeleaf 填充 HTML 模板，演示代码如下，仅供参考：

<!DOCTYPE html>
<!--xmlns属性 定义一个命名空间-->
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf邮件模板</title>
</head>
<body>
<p>这是一份学生名单：请查收</p>
<table border="1">
    <tr>
        <td>学校</td>
        <td th:text="${school}"></td>
    </tr>
    <tr>
        <td>班级</td>
        <td th:text="${className}"></td>
    </tr>
    <tr>
        <td>姓名</td>
        <td th:text="${name}"></td>
    </tr>
</table>
<div style="color: red;">以上是学生名单！</div>
</body>
</html>

完整项目目录文件结构，仅供参考：

Spring Boot项目如何集成 HTML？这你必须得会的！

3.4 定义Controller

        编写 一个Controller，在 Spring Boot 应用的 Controller 中，通过 @RequestMapping 注解等方式配置该 Controller 处理的请求，代码参考如下:

@Controller
@RequestMapping("/html")
@Api(tags = "静态访问模块", description = "静态访问模块")
public class HtmlController {

    @RequestMapping("/mail")
    public String hello(ModelMap model) {
        model.addAttribute("school", "闵行小学");
        model.addAttribute("className", "六(2)班");
        model.addAttribute("name", "赵云");
        return "mail";
    }
}

3.5 重启项目

        运行应用程序：运行Spring Boot 应用程序，访问http://localhost:8080/html/mail，即可看到输出的mail, Thymeleaf 静态页面的结果。

Spring Boot项目如何集成 HTML？这你必须得会的！

        很明显，我们通过指定addAttribute()设置参数，school，name等，然后通过在html页面中通过指定的获取手段获取addAttribute()，如上看页面，很明显是将指定设置的数据渲染到了html页面之中，测试完全ok。

拓展：

addAttribute()作用是往前台传数据，可以传对象，可以传List，通过el表达式 ${}可以获取到。类似于request.setAttribute("sts",sts)效果一样。

3.6 小结

        总之，通过 Thymeleaf 模板引擎，我们可以实现 Spring Boot 与 HTML 的高效集成，提升 Web 应用程序的开发效率。当然，需要注意模板渲染的性能和安全问题，可以采用缓存和 CSRF 防御措施等方式进行优化和保护。

... ...

    ok，以上就是我这期的全部内容啦，如果还想学习更多，你可以看看如下的往期热文推荐哦，每天积累一个奇淫小知识，日积月累下去，你一定能成为令人敬仰的大佬。

「赠人玫瑰，手留余香」，咱们下期拜拜~~

4. 热文推荐💭

若想学习更多，可以参考这篇专栏总结《2023最新首发，全网最全 Spring Boot 学习宝典(附思维导图)》，本专栏致力打造最硬核 Spring Boot 进阶系列学习内容，🚀均为全网独家首发，打造精品专栏，专栏持续更新中。欢迎大家订阅持续学习。

在入门及进阶之途，我必助你一臂之力，系统性学习，从入门到精通，带你不走弯路，直奔终点；投资自己，永远性价比最高，都这么说了，你还不赶紧来学？？

5. 文末💭

Spring Boot项目如何集成 HTML？这你必须得会的！

转载自:https://juejin.cn/post/7244057643526537253
评论
请登录