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文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
SpringBoot集成WebService(wsdl)实践
文章介绍了Spring Boot项目中通过缓存IWebService接口实现类的泛型入参类型,减少反射调用提升性能的实现方案,包含依赖配置、工具类封装、接口定义及soapUI调用参数说明2025-09-09
Run Dashboard 是 IntelliJ IDEA 中的一个工具窗口,用于管理和监视项目中正在运行的应用程序和配置,它提供了一种集中管理运行和调试过程的方式,本文给大家介绍了IDEA开启Run Dashboard的几种方式,需要的朋友可以参考下2024-03-03
这篇文章主要为大家分享了最有价值的三道java面试题，涵盖内容全面，包括数据结构和算法相关的题目、经典面试编程题等，感兴趣的小伙伴们可以参考一下2021-07-07
文章介绍了Java中实现树形结构递归查询的方法,首先找出所有的根节点,然后通过循环遍历根节点,找到每个根节点的子节点,最终构建完整的树形结构,这是一种有效的递归查询思路,适用于需要层次化展示数据的场景2024-12-12
这篇文章主要介绍了java更改图片大小示例，方法中指定路径 ,旧文件名称 ,新文件名称,n 改变倍数就可以完成更改图片大小,需要的朋友可以参考下2014-03-03
这篇文章主要介绍了Java中判断字符串是否相等的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
中缀表达式是一个通用的算术或逻辑公式表示方法。，中缀表达式不容易被计算机解析，但仍被许多程序语言使用，因为它符合人们的普遍用法。本文介绍了实现中缀表达式的方法，需要的可以参考一下2022-07-07
这篇文章主要介绍了分享一个简单的java爬虫框架，具有一定参考价值，需要的朋友可以了解下。2017-11-11
一篇文章教你如何在SpringCloud项目中使用OpenFeign
这篇文章主要介绍了SpringCloud 使用Open feign 优化详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2021-08-08
ReentrantLock和Synchronized都是Java开发中最常用的锁，与Synchronized这种JVM内置锁不同的是，ReentrantLock提供了更丰富的语义。本文就来深入剖析一下ReentrantLock源码，需要的可以参考一下2022-11-11
最新评论