SpringBoot2.x引入Thymeleaf后CSS、JS失效解决办法

最新推荐文章于 2023-09-29 09:47:13 发布

原创最新推荐文章于 2023-09-29 09:47:13 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何在HTML文件中使用Thymeleaf模板引擎，包括如何正确引入Thymeleaf命名空间、CSS和JS资源文件。通过实例展示了Thymeleaf的基本用法和页面结构，适合初学者快速上手。

1.在页面上方加上

xmlns:th="http://www.thymeleaf.org"

变成这样：

<html lang="en" xmlns:th="http://www.thymeleaf.org">

之后，

CSS和JS这样引入

<link  th:href="@{/static/asserts/css/dashboard.css}" rel="stylesheet">
<script type="text/javascript" th:src="@{/static/asserts/js/jquery-3.2.1.slim.min.js}"></script>

目录结构：

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Zero .

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

使用Thymeleaf模板封装页面公有部分CSS、JS失效，导航栏发生变化等问题

莫得感情的小猪头的博客

04-04

926

简述一般来说，一个网站的各个网页中的导航栏，页尾，菜单等部分都是相同或相似的，可以将这部分代码提取成模板供其它页面使用。要实现该功能，可以使用Thymeleaf模板的 th:replace、th:include或th:insert属性，借助th:fragment属性来实现。属性特点 th:replace 不保留自己的主标签，保留th:fragment的主标签 th:in...

六、流行框架介绍(SpringBoot框架详解(含底层原理介绍，适用于springBoot1.x和springBoot2.x,属于通用版本))

kejizhentan的博客

04-07

9424

一、SpringBoot的概述 1.简介 Spring Boot 是 Pivotal 团队在 Spring 的基础上提供的一套全新的开源框架，其目的是为了简化 Spring 应用的搭建和开发过程。Spring Boot 去除了大量的 XML 配置文件，简化了复杂的依赖管理。 Spring Boot 具有 Spring 一切优秀特性，Spring 能做的事，Spring Boot 都可以做，而且使用更加简单，功能更加丰富，性能更加稳定而健壮。随着近些年来微服务技术的流行，Spring Boot 也成了时下炙手

参与评论您还未登录，请先登录后发表或查看评论

SpringBoot2.x｜Thymeleaf页面不能正常载入css、js文件

qq_37244513的博客

09-02

8802

Html css及js文件引入采用绝对路径。 &amp;amp;amp;lt;!-- reset, layui and login --&amp;amp;amp;gt; &amp;amp;amp;lt;link rel=&amp;amp;quot;stylesheet&amp;amp;quot; th:href=&amp;amp;quot;@{~/static/css/reset.css}&amp

springboot项目中使用thymeleaf模板引擎引入js库失效

1号帅比的博客

10-05

5411

js资源文件所处位置：在html文件引用js库 <script src="../static/scripts/jquery-1.7.2.min..js"></script>  <script src="../static/scripts/jquery.validate.m...

Thymeleaf 引入css js 无效终极解决方案

qq_44859233的博客

12-13

4073

关于springboot集成thymeleaf后引入css和js无效的问题，下面给出了解决方案，直接上图：以下是关于静态资源的项目结构在html代码中引用如代码： <!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" > <head> <th:block th:include="include :: header('预览图片')" /> &..

thymeleaf引入css,js失效

superxmh的博客

07-03

2728

使用SpringBoot开发时,在页面中使用thymeleaf引入css和js资源没有效果，解决办法如下：查看thymeleaf的命名空间有没有写错 <html lang="en" xmlns:th="http://www.thymeleaf.org"> 2.检测导入css和js资源的语法有没有错,如  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css"

spring boot 2.x html中引用css和js失效问题及解决方法

10-17

Spring Boot 2.x版本中，在HTML页面中引用CSS和JavaScript资源时可能会遇到资源不被正确加载的问题。通常情况下，资源文件放在项目的静态文件夹（默认为/static或/public或/resources）中。但在某些情况下，即便配置...

springboot.zip+springboot使用+spring thymeleaf+semantic UI使用+spring data jpa

08-20

通过引入Semantic UI的CSS和JS库，开发者可以在Thymeleaf模板中使用预定义的样式和组件，如按钮、表单、网格系统等，提升用户体验。 4. **Spring Data JPA** Spring Data JPA是Spring项目的一部分，它提供了一种...

SpringBoot页面跳转访问css、js等静态资源引用无效解决.docx

06-03

在SpringBoot应用中，开发人员经常遇到一个常见问题，即在尝试访问页面时，CSS、JavaScript等静态资源引用失效。这通常是因为SpringBoot的默认资源配置导致的。在本篇文章中，我们将深入探讨这个问题的原因以及解决...

Springboot访问templates下的html页面，CSS，JS失效

03-02

然而，有时在尝试访问`templates`目录下的HTML页面时，可能会遇到CSS和JavaScript失效的问题。这个问题通常是由于静态资源处理配置不正确或者路径引用不准确导致的。以下是一些可能的原因及解决方案： 1. **静态...

thymeleaf 引入js css 无效

weixin_33910759的博客

03-22

243

转自:https://blog.csdn.net/qq_33833327/article/details/81388502

Thymeleaf模板引擎下使用局部刷新后 jQuery事件绑定失效的问题

SilentWu的博客

09-26

3372

前端页面： <table class="table" th:fragment="user_content"> <thead class=" text-primary"> <th>用户名</th> <th>密码</th> <th>手机号码&lt...

Idea引入thymeleaf失败解决方法

xiaowang_lj的博客

09-29

902

在setting–>plugins–>搜索thymeleaf。原因：html没有使用thymeleaf。会出来个插件，下载，应用。类似与这样显示为灰色。那就是在写的代码有问题。

ThymeLeaf失效原因

m0_47909382的博客

06-29

2440

Thymeleaf失效原因记录

springboot是用thymeleaf模板不生效

weixin_43849280的博客

03-27

6674

发现thymeleaf 完全无效看网上的视频学习的过程中，教程中使用的SpringBoot版本很多，有1.5.10有2.1.7还有自己使用的idea是2.2.x之后的版本，在通过网上查找资料发现，2.x之后版本变动较大，会和以前的有所不同，在做静态资源映射的过程中出现的问题比如在更改网站标题图片的时候，在2.2之前的版本中有faviconRequestHandler()方法，2.2.2版本中...

thymeleaf没有自动渲染

qq_39728274的博客

09-10

1152

Thymeleaf使用源码：导入名称空间 <html lang="en" xmlns:th="http://www.thymeleaf.org"> 使用相关语法 <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF‐8"> <title>Title</title&

SpringBoot、thymeleaf完全解决修改CSS，JS文件没有产生效果的问题

qq_38959715的博客

03-25

3767

首先前提是本来CSS与JS文件是有效果的，没有的话可以看另一篇文章Thymeleaf引入静态文件https://blog.csdn.net/qq_38959715/article/details/87886539 查了好多遍代码，检查了各种环境。重启了各种机制，最后还是没改成功，DEBUG了好多次，最后还是无效，现在整理下排错步骤。一、首先要查看对应静态文件，确保修改的文件是引入...

thymeleaf在js中使用问题