脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → Springboot引入公共CSS和JS文件

Springboot整合Thymeleaf引入公共的CSS和JS文件的方法及注意点

 更新时间：2024年06月21日 09:23:56   作者：specialHeych  
有时候很多css文件是公共的,我们必须要在每个html文件中引入它们,下面这篇文章主要给大家介绍了关于Springboot整合Thymeleaf引入公共的CSS和JS文件的方法及注意点,需要的朋友可以参考下

最近想搭建一个简单的web网站，以便以后接点私活，所以首先考虑单机模式下的框架搭建，分布式的框架相对前段搭建成本有点高，另外暂时对前端代码不是很熟悉，所以采用了SpringBoot搭配Thymeleaf模版的开发模式，开发过程中想把共通的CSS和JS文件放在一个共通的base.html下，所以根据网上的说明，自己也研究了一阵子，代码如下，亲测好用。

HTML的文件目录如下：signIn.html为我的登录页面，base.html为我的共通的文件

base.html代码如下：

title和links是以变量的形式传入的，因为每个引入base.html的页面的Title和css需要自定义，所以留有变量

注意：application.yml下需要追加如下配置：

mvc:
  static-path-pattern: /static/**
  view:
    prefix: classpath:/templates/
    suffix: .html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head th:fragment="common_header(title,links)">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback" rel="external nofollow" >
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{../../static/plugins/fontawesome-free/css/all.min.css}" rel="external nofollow" >
   <!-- Theme style -->
    <link rel="stylesheet" th:href="@{../../static/dist/css/adminlte.min.css}" rel="external nofollow" >
    <!-- jQuery -->
    <script type="text/javascript"  th:src="@{../../static/plugins/jquery/jquery.min.js}"></script>
    <!-- jQuery UI 1.11.4 -->
    <script type="text/javascript"  th:src="@{../../static/plugins/jquery-ui/jquery-ui.min.js}"></script>
    <!-- Bootstrap 4 -->
    <script type="text/javascript"  th:src="@{../../static/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <!-- AdminLTE App -->
    <script type="text/javascript"  th:src="@{../../static/dist/js/adminlte.min.js}"></script>
    <!-- DataTables  & Plugins -->
    <script type="text/javascript"  th:src="@{../../static/plugins/datatables/jquery.dataTables.min.js}"></script>
    <script type="text/javascript"  th:src="@{../../static/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js}"></script>
    <script type="text/javascript"  th:src="@{../../static/plugins/datatables-responsive/js/dataTables.responsive.min.js}"></script>
    <script type="text/javascript"  th:src="@{../../static/plugins/datatables-responsive/js/responsive.bootstrap4.min.js}"></script>
    <script type="text/javascript"  th:src="@{../../static/plugins/datatables-buttons/js/dataTables.buttons.min.js}"></script>
    <script type="text/javascript"  th:src="@{../../static/plugins/datatables-buttons/js/buttons.bootstrap4.min.js}"></script>
    <script type="text/javascript"  th:src="@{../../static/plugins/jszip/jszip.min.js}"></script>
    <script type="text/javascript"  th:src="@{../../static/plugins/pdfmake/pdfmake.min.js}"></script>
    <script type="text/javascript"  th:src="@{../../static/plugins/datatables-buttons/js/buttons.html5.min.js}"></script>
    <script type="text/javascript"  th:src="@{../../static/plugins/datatables-buttons/js/buttons.print.min.js}"></script>
    <script type="text/javascript"  th:src="@{../../static/plugins/datatables-buttons/js/buttons.colVis.min.js}"></script>
</head>
</html>

signIn.html的代码如：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
<!--需要添加此行标注为thymeleaf模板 -->
<head th:replace="common/base :: common_header(~{::title},~{})">
    <title>Sign In</title>
</head>

需要注意点：

1.是这里base是没有后缀html的

2.这里的title需要自定义，但是css文件不需要所以格式为：

common_header(~{::title},~{})

如果css也需要自定义的话格式为：

common_header(~{::title},~{::link})

附：不能引用最可能的原因

SpringBoot项目的所有文件都必须要编译到target文件夹下才能运行，因此首先检查你的target目录下有没有静态资源。

如果这里根本就没有静态资源，自然肯定不能引用了。

是什么原因导致target/classes文件夹下没有静态资源的呢？

最可能的原因就是在项目的pom文件中，你没有指明要将.css、.js等这些文件编译进target文件夹中。必须要申明，这些文件才会被正确编译进去。

<build>
    <resources>
        <resource>
            <directory>src/main/resources</directory>
            <includes>
                <include>**/*.*</include>
            </includes>
            <filtering>true</filtering>
        </resource>
        <resource>
            <directory>src/main/java</directory>
            <includes>
                <include>**/*.properties</include>
                <include>**/*.xml</include>
                <include>**/*.yml</include>
            </includes>
            <filtering>true</filtering>
        </resource>
    </resources>
</build>

这里申明了，resources目录下，**/*.*类型的文件将被编译进target/classes文件夹，也即是所有的文件，因此.css和.js类的文件就可以正确的编译进去。

如果改成如下这样：

<build>
    <resources>
        <resource>
            <directory>src/main/resources</directory>
            <includes>
                <include>**/*.properties</include>
                <include>**/*.xml</include>
                <include>**/*.yml</include>
            </includes>
            <filtering>true</filtering>
        </resource>
        <resource>
            <directory>src/main/java</directory>
            <includes>
                <include>**/*.properties</include>
                <include>**/*.xml</include>
                <include>**/*.yml</include>
            </includes>
            <filtering>true</filtering>
        </resource>
    </resources>
</build>

代表只将resources下的.properties文件、.xml文件、.yml文件编译进去target/classes文件夹，自然就没有静态资源了，就没法引用了。编译得到的target文件夹如下：

可以看到，按照如上pom文件，编译得到的target/classes文件夹下根本就没有静态资源，不可能引用成功。

总结

到此这篇关于Springboot整合Thymeleaf引入公共的CSS和JS文件的方法及注意点的文章就介绍到这了,更多相关Springboot引入公共CSS和JS文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

  • Java8中时区与不同历法处理指南

    Java8中时区与不同历法处理指南

    Java 8 的 java.time API 不仅修复了旧版日期时间 API 的设计缺陷,还提供了对时区和多历法的全面支持,下面小编就来讲讲具体的处理操作,有需要的可以了解下
    2025-04-04
  • Java接入支付宝授权第三方登录的完整步骤

    Java接入支付宝授权第三方登录的完整步骤

    不管是支付宝支付,还是微信支付,还是银联支付等,大部分的支付流程都是相似的,这篇文章主要给大家介绍了关于Java接入支付宝授权第三方登录的相关资料,使用支付宝的沙盒环境示例,需要的朋友可以参考下
    2021-07-07
  • springboot常用的请求参数的接收方式

    springboot常用的请求参数的接收方式

    在Spring Boot中,接收请求参数的方式有多种,这篇文章主要为大家整理了9个常用的方式,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-12-12
  • Lombok中@Builder和@SuperBuilder注解的用法案例

    Lombok中@Builder和@SuperBuilder注解的用法案例

    @Builder 是 lombok 中的注解，可以使用builder()构造的Person.PersonBuilder对象进行链式调用，给所有属性依次赋值，这篇文章主要介绍了Lombok中@Builder和@SuperBuilder注解的用法,需要的朋友可以参考下
    2023-01-01
  • 详解Java如何应对常见的安全威胁和攻击类型

    详解Java如何应对常见的安全威胁和攻击类型

    随着信息技术的快速发展,网络安全问题日益突出,本文将以Java开发语言为例,深入探讨网络协议的安全性问题,通过分析常见的安全威胁和攻击类型,设计和实施安全协议等主题,为读者提供一些有益的思路和方法,需要的朋友可以参考下
    2023-11-11
  • java中阻塞队列和非阻塞队列的实现

    java中阻塞队列和非阻塞队列的实现

    在Java并发编程中,阻塞队列和非阻塞队列是两种主要的队列类型,分别适用于不同的场景,了解这两种队列的特点和工作机制,可以帮助开发者更好地选择合适的数据结构解决并发问题
    2024-10-10
  • Java如何从List中删除元素的正确用法举例

    Java如何从List中删除元素的正确用法举例

    这篇文章主要给大家介绍了关于Java如何从List中删除元素的正确用法, 列表List是Java中的一种数据结构,存放按照添加顺序的元素,是个有序的集合,需要的朋友可以参考下
    2023-07-07
  • 一个简单的Spring容器初始化流程详解

    一个简单的Spring容器初始化流程详解

    这篇文章主要给大家介绍了一个简单的Spring容器初始化流程的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Java实现企业微信回调配置的详细步骤与测试

    Java实现企业微信回调配置的详细步骤与测试

    这篇文章主要给大家介绍了关于Java实现企业微信回调配置的详细步骤与测试,企业微信回调是指企业微信通过HTTP POST请求将业务数据回调到指定的URL上,文中给出了详细的代码示例,需要的朋友可以参考下
    2023-09-09
  • Spring SseEmitter推送消息及常用方法

    Spring SseEmitter推送消息及常用方法

    SseEmitter 是 Spring Framework 提供的用于支持 Server-Sent Events（SSE）的类,它允许服务器端向客户端推送事件流,实现服务器到客户端的单向通信,这篇文章主要介绍了Spring SseEmitter推送消息,需要的朋友可以参考下
    2024-07-07

最新评论