(16)SpringBoot - webjars&静态资源映射规则 修改图标

1 引入webjars
接下来,我们要做这个项目,我们可以把一些css样式,js导入进来,但是又一个问题,如果我们是web应用那么main底下有一个webapp文件夹,我们以前是把所用的css、js导入到webapp文件夹的。
但是我们看一下pom.xml文件:

在这里插入图片描述
那么打包成jar的方式,springboot能不能给我们写页面呢?
答案是可以的,但是css、js文件我们要放在哪里?
1.1 那么springboot有规定:

所有 /webjars/ ,都去 classpath:/META-INF/resources/webjars/ 找资源;==**
1.2 找依赖
webjars:以jar包的方式引入静态资源;http://www.webjars.org/
进入网址:Jquery以Maven这种依赖的方式,我们拿来用就简单的多了!

在这里插入图片描述
注意:3.3.1-1 或者3.3.1-1 报错 , 所以选择比较稳定的3.3.1

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.3.1</version>
</dependency>

1.3 往pom文件中引入jQuery的maven jar , 让spring boot 自动下载!

在这里插入图片描述
打开我们的External Libraries,有一个jQuery.js文件
在这里插入图片描述
1.4 我们重新启动访问一下:发现能访问js文件

在这里插入图片描述
2 静态映射规则

那么自己的js、css文件往哪里放?
放到如下的5个文件中。

2)、"/**" 访问当前项目的任何资源,都去(静态资源的文件夹)找映射
2.1 静态资源的位置

"classpath:/META-INF/resources/", 
"classpath:/resources/",
"classpath:/static/", 
"classpath:/public/" 
"/":当前项目的根路径

2.1.1 classpath:(代表的意思是类路径的跟路径):
在这里插入图片描述
2.1.2 classpath:/resources/
代表的意思是 在resources下创建一个resources文件夹:
在这里插入图片描述
2.1.3 “classpath:/static/”:
代表的意思是 在resources下创建一个static文件夹:
在这里插入图片描述
2.1.4 “classpath:/public/” :
代表的意思是 在public下创建一个static文件夹:
在这里插入图片描述

如果我们访问的时候输入:localhost:8080/abc
代表的含义就是去静态资源文件夹里面找abc
2.1.5 我们做一个测试:

在这里插入图片描述
访问端口:http://localhost:8080/asserts/js/Chart.min.js
在这里插入图片描述
发现是能访问到js文件的。
以上就是静态资源保存的位置。

2.2 欢迎页;
静态资源文件夹下的所有index.html页面;被"/**"映射;

​比如我们输入:localhost:8080/ 含义:去静态资源中找index页面

2.2.1 新建一个HTML File文件
我们在resources文件夹下的public文件夹下新建一个HTML File文件
在这里插入图片描述
写入内容:
在这里插入图片描述
运行端口测试一下:
在这里插入图片描述
2.3 制作图标
这是访问时候的默认图标:
在这里插入图片描述
如果我们想制作一个自己喜欢的图标:
找到图片命名为:favicon.ico
存放的路径:在静态资源文件下寻找!!
所有的 **/favicon.ico 都是在静态资源文件下找;

在这里插入图片描述
结果发现: 图标已经改变
2.4 改变静态资源位置:

在全局配置文件中,
spring.resources.static-location=xxxx

#格式 classpath:/xx ····等等
spring.resources.static-location=classpath:/xx/,classpath:/xxx/

即可改变

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值