Springboot—thymeleaf的web页面引用JS、css等静态资源

最新推荐文章于 2024-10-13 22:11:23 发布
最新推荐文章于 2024-10-13 22:11:23 发布
阅读量1.5k 收藏
点赞数 1
文章标签： java html css web javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sakura_LiYan/article/details/106090037
版权 
最近在写一些项目，就从网上下载了一些前端资源

如图所示，所有的资源文件都在一个包下
如图所示，所有的资源文件都在一个包下
然后我就直接把整个项目拷进了我的springboot项目的thymeleaf路径下

在这里插入图片描述
结果在我启动项目打开前端页面时，那些样式和js文件都没起作用
在这里插入图片描述
然后我F12打开控制台，显示报了一堆 “Failed to load resource: the server responded with a status of 404 (Not Found)”错误在这里插入图片描述
然后我就想可能是路径引用出问题了，就把所有JS、CSS文件的引用路径检查了几遍，都没问题，后来公司的一位老哥说JS、和CSS、图片等静态资源必须要放在static文件夹下面才可以被项目访问到，于是我就在resources下面新建了static文件，把除了web页面以外，所有的js、css、jq、图片等资源都移动到了static文件下

在这里插入图片描述

然后在application配置文件中再加一个static文件的路径映射

在这里插入图片描述
之后只需要把web页面中的引用路径改成这种的就可以咯

在这里插入图片描述
最后再启动就没事了

在这里插入图片描述

Sakura_LiYan
关注
springboot访问静态页面，并加载css、js样式
qq_45947664的博客
09-16 6126
src="/js/jquery.min.js" 也就是地址 src="/static/js/jquery.min.js"2、因为是通过地址栏访问，所以使用@GetMapping注解，注解后的内容可随意写，访问时的地址就是：“3、return“ ”里面填的字符串一定要是自己放入templates里的html页面的名字。1、一定要用@Controller注解，不能用@Restcontroller；虽然href或src内的内容idea会标识不认识，但地址是没有问题。
SpringBoot +thymeleaf 访问(static)静态资源的处理方法
xhalg的专栏
11-24 2872
1.问题 最近使用SpringBoot框架+thymeleaf模板做一个简单网站，代码目录如下 项目启动之后，静态资源（css、js、图片）都不能访问，通过浏览器访问，加载开发工具控制台，得到如下404错误信息 GET http://localhost/css/buju.css net::ERR_ABORTED 404 2.分析问题 404错误，无非就是没找到资源，将http://localhost/css/buju.css拷贝到浏览器中访问，也无法访问到，百度了各种解决方案，..
springboot——使用模板引擎thymeleaf后，在templates文件夹下的页面 无法访问加载图片资源
知北行的博客
08-07 1796
解决办法： 方法1.修改图片资源路径，使用绝对路径，前面要以static开头，因为这是springboot的默认静态资源文件夹。 方法2：自定义静态资源默认存储位置 spring boot工程默认情况下，浏览器可以直接访问到4个目录下的静态资源，但是若想浏览器访问自定义的目录，我们也可以手动指定。 可以使用如下代码创建一个配置类： @Configuration public class MyMvcConfig extends WebMvcConfigurerAdapter { @O
SpringBoot的Thymeleaf支持+Thymeleaf基础语法
weixin_63043528的博客
10-13 1001
常见的内置对象如下。: Map操作的内置对象，参照 java.util.Map。：日期格式化的内置对象，操作的方法是 java.util.Date类的方法。在Thymeleaf模板的表达式中可以使用+、一、*、/、%等各种算术运算符，也可以使用>，
thymeleaf之导入js css
weixin_34378969的博客
05-31 706
thymeleaf导入js css文件无效，一直报404 解决办法如下 <link rel="stylesheet" type="text/css" th:href="@{/vanilla-cream-css/css/bootstrap.css}" /> <script type="text/javascript" th:src="@{/js/jquery.min.js}"&...
thymeleaf引入js和css方式
weixin_33695450的博客
09-24 587
2019独角兽企业重金招聘Python工程师标准>>> ...
springboot thymeleaf 引入js
十一仓
10-05 3321
由于springboot默认会扫描resources/static文件夹下面 所以引入js路径： <script th:src="@{js/echarts.min.js}"></script>
【thymeleaf】Thymeleaf引入css js写法
梓莘
08-20 2872
HTML引入方法： <link href="/css/bootstrap.min.css" rel="stylesheet"> <link th:href="/css/animate.css" rel="stylesheet"/> <script src="/js/jquery.js"></script> thymeleaf引入方法： <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"
SpringBoot+thymeleaf
04-29
10. **静态资源处理**：SpringBoot默认会处理静态资源，如CSS、JavaScript文件，这些资源通常放在`src/main/resources/static`目录下。 学习"SpringBoot+thymeleaf"，不仅能够掌握如何构建Web应用，还能深入理解...
springboot + thymeleaf静态资源访问404
weixin_30687587的博客
09-13 2108
在使用springboot 和thtmeleaf开发时引用静态资源404，静态资源结如下： index.html文件： <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset = "UFT-8" /&gt...
springboot thymeleaf静态css、js文件导入失败
11-02
在Spring Boot项目中，当你尝试通过Thymeleaf模板引入静态CSS和JS文件时，如果遇到导入失败的问题，可能是以下几个原因： 1. **路径问题**：确认资源文件的路径是否正确。Thymeleaf期望静态资源位于`src/main/...
thymeleaf引入css js写法
weixin_30598225的博客
10-29 310
以下是HTML引入方法，如果springboot使用thymeleaf模板，下面写法无法正常引入资源文件，需改为thymeleaf引入方法HTML引入方法： <link href="/css/bootstrap.min.css" rel="stylesheet"> <script src="/js/jquery.js"></script> thym...
踩坑日记——thymeleaf 模板引入js 报错：cannot find declaration to go to
金蒂
03-05 3049
thymeleaf 模板引入js 报错：cannot find declaration to go to
springboot 通过thymeleaf引入静态html页面并引入js、css文件
weixin_41463944的博客
05-16 906
springboot 通过thymeleaf引入静态html页面并引入js、css文件
thymeleaf爬坑：引入静态资源及模板页面
hxy793518971的博客
03-21 3945
thymeleaf中引入静态资源需要使用到 th:xxx 属性，否则无法在动态资源中访问静态资源 访问css 需要用到 th:href 来引入css资源，格式为 th:href = “@{文件路径}” <link rel="stylesheet" href="css/jquery-ui.min.css" th:href="@{/css/jquery-ui.min.css}" /> ...
SpringBoot Web开发 静态资源&Thymeleaf
Happy_change的博客
03-02 668
SpringBoot Web开发 jar: webapp！ 自动装配 SpringBoot到底帮我们配置了什么？能不能进行修改？能修改哪些东西？能不能扩展？ xxxAutoConfiguration… 想容器中自动配置组件 xxxProperties：自动配置类，装配配置文件中自定义的一些内容！ 要解决的问题： 导入静态资源… 首页 jsp，模板引擎Thymeleaf 装配扩展SpringMVC 增删改查 拦截器 国际化 静态资源 在springboot，我们可以使用以下方式处理静态资源 webj
SpringBoot+Thymeleaf静态资源的引入问题
搬砖の隔壁老王
04-23 2537
springboot与thymeleaf模板的搭建，在pom文件中需要引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifac...
SB5.spring boot 使用引入Thymeleaf
wenfeifang的博客
04-28 273
介绍Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎，能够处理HTML，XML，JavaScript，CSS甚至纯文本。Thymeleaf的主要目标是提供一个优雅和高度可维护的创建模板的方式。为了实现这一点，它建立在自然模板的概念上，将其逻辑注入到模板文件中，不会影响模板被用作设计原型。这改善了设计的沟通，弥合了设计和开发团队之间的差距。Thymeleaf也从一开始就设计了W...
springboot thymeleaf静态资源配置
最新发布
11-10
Spring Boot结合Thymeleaf时，静态资源配置通常发生在WebMvc配置中。当你需要在HTML模板中引用图片、CSS、JavaScript等静态文件时，Spring Boot会自动处理这些文件的访问路径。以下是基本步骤： 1. 将静态资源目录放在项目的`src/main/resources/static`或`public`（推荐）下。Spring Boot默认会扫描这两个目录作为静态资源。 2. 在Spring Boot的启动类上添加`@EnableWebMvc`注解，启用Web MVC功能。 3. 如果你想自定义静态资源映射路径，可以在`application.properties`或`application.yml`中设置`spring.resources.static-locations`属性，例如： ``` # application.properties spring.resources.static-locations=classpath:/static/,file:///var/www/app/static/ ``` 4. 或者直接在`WebMvcConfigurer`接口或其实现类中覆写`addResourceHandlers`方法，如： ```java @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/css/**").addResourceLocations("classpath:/META-INF/resources/css/", "static/css/"); registry.addResourceHandler("/js/**").addResourceLocations("classpath:/META-INF/resources/js/", "static/js/"); } ``` 5. 现在，你可以通过URL如`http://localhost:8080/css/styles.css`或`http://localhost:8080/js/main.js`访问静态资源了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值