SpringBoot Boostrap前端js/css文件配置

感谢作者的分享:https://www.cnblogs.com/smiler/p/6857213.html

http://blog.csdn.net/isea533/article/details/50412212


1.按理SpringBoot会自动加载resources/static下面的静态文件(js/css等),但因为路径的问题前台页面引用都失败。

考虑到项目肯定会有自定义的css.js.img等静态文件,这个需要后续更新处理;

2.方式1没有成功,在网上找到另外一种方式:WebJars

2.1pom文件中添加:

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
    <webjars-locator>0.32-1</webjars-locator>
    <bootstrap>4.0.0</bootstrap>
    <jquery>3.3.1</jquery>
  </properties>
<!-- webjars-locator-->
<!--webjars-locator 包的作用是省略 webjar 的版本。比如对于请求 http://localhost:8080/webjars/jquery/3.1.0/jquery.js省略版本号 3.2.1 直接使用http://localhost:8080/webjars/jquery/jquery.js也可访问。-->
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator</artifactId>
    <version>${webjars-locator}</version>
</dependency>

<!-- bootstrap -->
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>${bootstrap}</version>
</dependency>

<!-- jquery -->
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>${jquery}</version>
</dependency>
2.2前台文件引用

<head>
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css"/>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
2.3启动验证

ps我的demo地址:https://github.com/luomouren/springbootdemo


3.方式1找到解决方法了,无意中看到参考文档2解决的(感谢作者分享)

配置资源映射

Spring Boot 默认配置的/**映射到/static(或/public ,/resources/META-INF/resources),/webjars/**会映射到classpath:/META-INF/resources/webjars/

所以在application.properties文件中添加配置:

#设定静态文件路径,js,css等
spring.mvc.static-path-pattern=/**
在前台中引用

<script src="/js/test/test.js"></script>
在resources下新建static文件,里面直接放js文件夹,存js文件

配置资源映射

Spring Boot 默认配置的/**映射到/static(或/public ,/resources/META-INF/resources),/webjars/**会映射到classpath:/META-INF/resources/webjars/


  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值