SpringBoot小知识点(三)_springboot 宏文件-优快云博客

本文链接：https://blog.youkuaiyun.com/u010247166/article/details/107594249

本文介绍SpringBoot中静态资源的管理及如何使用WebJars简化css和js资源的版本控制。探讨了Java模板引擎的选型，包括Freemarker和Thymeleaf的整合与应用，以及它们在前后端分离开发模式中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.静态资源访问目录
2.使用WebJars管理css&js
3.java模板引擎的选型
4.整合freemarker
5.整合thymeleaf
6
7
8
9

1.静态资源访问目录

SpringBoot默认配置下，提供了以下几个静态资源目录：

/static： classpath:/static/
/public： classpath:/public/
/resources： classpath:/resources/
/META-INF/resources：classpath:/META-INF/resources/

src 路径下的文件在编译后都会放到 WEB-INF/classes 路径下。默认classpath 就是指这里。
用maven构建项目时，resources 目录就是默认的classpath（一般springboot项目里classpath目录指的是resources文件夹）

当然，可以通过spring.resources.static-locations配置指定静态文件的位置。但是要特别注意，一旦自己指定了静态资源目录，系统默认的静态资源目录就会失效。所以系统默认的就已经足够使用了，尽量不要自定义。

#配置静态资源
spring:
  resources:
    #指定静态资源目录
    static-locations: classpath:/mystatic/

2.使用WebJars管理css&js

WebJars是将这些通用的Web前端资源打包成Java的Jar包，然后借助Maven工具对其管理，保证这些Web资源版本唯一性，升级也比较容易。关于webjars资源，有一个专门的网站https://www.webjars.org/，我们可以到这个网站上找到自己需要的资源，在自己的工程中添加入maven依赖，即可直接使用这些资源了。

说白了，就是把web一些css,js等资源打包成jar包，然后用Maven的方式进行管理，我们不用自己去网上单独下载这些，直接通过Pom方式引入即可

1.pom引入依赖

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.5.1</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>4.5.0</version>
        </dependency>

2.添加静态页面index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="/webjars/jquery/3.5.1/jquery.min.js "></script>
    <script src="/webjars/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"><br/>
    <div class="alert alert-success">
        <strong>成功!</strong>bootstrap webjar 完美！
    </div>
</div>
</body>
</html>

3.访问http://localhost:8887/
在这里插入图片描述

项目结构：
在这里插入图片描述

3.java模板引擎的选型

以前的页面开发，都是jsp等技术来进行开发，html和java代码耦合性太高，而且最后需要翻译成servlet来执行，效率比较低。
后续出现了模板引擎，宏定义或者说是组件模板，比jsp标签好用，极大的减少了重复页面组件元素的开发。另外，相对于jsp而言，模板引擎的开发效率会更高。
但是java模板引擎，仍然是使用的服务器端的渲染技术，也就是没有办法将html页面和后台服务层面全面解耦。在ajax和nodejs相继出现之后，可以说为前端的发展带来了革命性的变化，前端可以做自己的工程化实践。这些新的前端技术通常是“所见即所得”，写完的代码可以直接在浏览器上查看，将前端后端的串行化工作模式转变为并行工作的模式。
随着VUE、angularjs、reactjs的大行其道，开始实现真正的前后端分离技术。前端的工程师负责页面的美化与结构，后端工程师可以专注于业务的处理。

后续前段开发，基本上不再使用模板引擎开发，而是使用vue等框架来开发，实现前后端分离并行开发

常见的模板引擎有Freemarker、Thymeleaf、Velocity等，下面我们就分别来说一下。
spring boot目前官方集成的框架只有freemarker和Thymeleaf，官方明确建议放弃velocity。很多人说thymeleaf是官方推荐使用的模板引擎，不过有些读者官网却没有看到推荐这句话，这个有待后续查证。暂时推荐freemarker

4.整合freemarker

FreeMarker是一个模板引擎，一个基于模板生成文本输出的通用工具，使用纯Java编写。一般对FreeMarker第一印象是用来替代JSP的，但是与JSP 不同的是FreeMarker 模板可以在 Servlet容器之外使用。可以使用它们来生成电子邮件、配置文件、 XML 映射等。或者可以直接生成HTML文件，以及其他的文件，用来做代码自动生成的工具。
在这里插入图片描述
Freemarker作为页面模板引擎的核心能力在于，将以HTML为基础的模板中的相关语法占位符用数据进行填充，填充之后形成可以被浏览器渲染的HTML文件。

1.引入依赖，通过maven坐标的方式将freemarker引入到项目中来，因为freemarker是Spring Boot父项目支持的模板引擎，所以不用加版本号，版本由父项目统一管理。

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>

yml文件指定前端配置

spring:
  freemarker:
    cache: false # 缓存配置 开发阶段应该配置为false 因为经常会改
    suffix: .ftl # 模版文件后缀名
    charset: UTF-8 # 文件编码
    template-loader-path: classpath:/templates/

2.创建模板文件夹，编写静态网页
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="/webjars/jquery/3.5.1/jquery.min.js "></script>
    <script src="/webjars/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"><br/>
    <div class="alert alert-success">
        <strong>成功!</strong>bootstrap webjar 完美！
    </div>

    <#list Persons as person>
    <tr>
        <td>${person.pid}</td>
        <td>${person.pname}</td>
    </tr>
    </#list>
</div>
</body>
</html>

3.编写后端

    @GetMapping("/persons")
    public String index(Model model) {
        List<Person> personList = new ArrayList<>();
        personList.add(Person.builder().pid(1).pname("k1").build());
        personList.add(Person.builder().pid(2).pname("k2").build());
        model.addAttribute("Persons", personList);
        //模版名称，实际的目录为：resources/templates/tmp.ftl
        return "tmp";
    }

4.访问
在这里插入图片描述
如果想进一步学习freemarker语法，请参考: freemarker

5.整合thymeleaf

Thymeleaf 是一个服务器端 Java 模板引擎，能够处理 HTML、XML、CSS、JAVASCRIPT 等模板文件。Thymeleaf 模板可以直接当作静态原型来使用，它主要目标是为开发者的开发工作流程带来优雅的自然模板，也是 Java 服务器端 HTML5 开发的理想选择。

1.增加依赖

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

yml增加配置

spring:
  thymeleaf:
    cache: false # 启用缓存:建议生产开启
    check-template-location: true # 检查模版是否存在
    enabled: true # 是否启用
    encoding: UTF-8 # 模版编码
    excluded-view-names: # 应该从解析中排除的视图名称列表（用逗号分隔）
    mode: HTML5 # 模版模式
    prefix: classpath:/templates/ # 模版存放路径
    suffix: .html # 模版后缀

2.编写前端 tmp2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="/webjars/jquery/3.5.1/jquery.min.js "></script>
    <script src="/webjars/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"><br/>
    <div class="alert alert-success">
        <strong>成功!</strong>bootstrap webjar 完美！
    </div>

    <div class="container">
        <table class="table">
            <tr>
                <td>主键</td>
                <td>姓名</td>
            </tr>

            <tr th:each="item : ${Persons}">
                <td th:text="${item.pid}"></td>
                <td th:text="${item.pname}"></td>
            </tr>
        </table>
    </div>

</div>
</body>
</html>

3.编写后端

    @GetMapping("/persons2")
    public String persons2(Model model) {
        List<Person> personList = new ArrayList<>();
        personList.add(Person.builder().pid(1).pname("k1").build());
        personList.add(Person.builder().pid(2).pname("k2").build());
        model.addAttribute("Persons", personList);
        return "tmp2";
    }