WebJars能使Maven的依赖管理支持OSS的JavaScript库/CSS库，比如jQuery、Bootstrap等。

（1）添加js或者css库 
pom.xml

  1. <dependency>
  2. <groupId>org.webjars</groupId>
  3. <artifactId>bootstrap</artifactId>
  4. <version>3.3.7-1</version>
  5. </dependency>
  6. <dependency>
  7. <groupId>org.webjars</groupId>
  8. <artifactId>jquery</artifactId>
  9. <version>3.1.1</version>
  10. </dependency>

src/main/resources/static/demo.html

  1. <html>
  2. <head>
  3. <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
  4. <script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
  5. <title>WebJars Demo</title>
  6. <link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" />
  7. </head>
  8. <body>
  9. <div class="container"><br/>
  10. <div class="alert alert-success">
  11. <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
  12. Hello, <strong>WebJars!</strong>
  13. </div>
  14. </div>
  15. </body>
  16. </html>

启动应用后可以看到以下log：

引用
2017-02-09 13:52:48.117  INFO 6188 --- [           main] o.s.w.s.handler.SimpleUrlHandlerMapping  : Mapped URL path [/webjars/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]

启动应用访问 http://localhost:8080/demo.html 

（2）省略版本号

很少在代码中硬编码版本号，所以需要隐藏它。

pom.xml添加webjars-locator 
org.springframework.web.servlet.resource.WebJarsResourceResolver

  1. <dependency>
  2. <groupId>org.webjars</groupId>
  3. <artifactId>webjars-locator</artifactId>
  4. <version>0.31</version>
  5. </dependency>

src/main/resources/static/demo.html

引用
<script src="/webjars/jquery/3.1.1/jquery.min.js"></script> 
<script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script> 
<title>WebJars Demo</title> 
<link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" />

->

<script src="/webjars/jquery/jquery.min.js"></script> 
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script> 
<title>WebJars Demo</title> 
<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css" />

启动应用再次访问 http://localhost:8080/demo.html 结果和上边一样。

引入的开源JavaScript库/CSS库将会以jar的形式被打包进工程! 
spring-boot-demo1-0.0.1-SNAPSHOT.jar\BOOT-INF\lib

引用
bootstrap-3.3.7-1.jar 
└─ META-INF 
    └─ resources 
        └─ webjars 
            └─ bootstrap 
                └─ 3.3.7-1 
                    ├─ css 
                    |   ├─ bootstrap.min.css 
                    |   ├─ bootstrap.min.css.gz # Gzip文件 
                    ...
引用
jquery-3.1.1.jar 
└─ META-INF 
    └─ resources 
        └─ webjars 
            └─ jquery 
                └─ 3.1.1 
                    ├─ jquery.min.js 
                    ...

SpringBoot之前端文件管理的更多相关文章

  1. SpringBoot接收前端参数的三种方法

    都是以前的笔记了,有时间就整理出来了,SpringBoot接收前端参数的三种方法,首先第一种代码: @RestController public class ControllerTest { //访问 ...

  2. SpringBoot 获取前端页面参数的集中方式总结

    SpringBoot的一个好处就是通过注解可以轻松获取前端页面的参数,之后尅将参数经过一系列处理传送到后台数据库,前端时间正好用到.大致分为一下几种: 1.指定前端URL请求参数名称与方法名称一致,这 ...

  3. SpringBoot 接收前端参数的几种方式

    昨天和前端小伙伴在联调是碰到了参数接收不到的错误,我在postman上测试接口是正常的,但是与前端对接时就接受不到参数,请求方式都是get,但是问题就在于json  和 form-data 的区别!这 ...

  4. docker Compose 部署springboot+vue前端端分离项目

    温馨提示:如果有自己的服务器最好不过了,这样部署网项目就可以上线了.没有的话,只能使用localhost 本机访问啦,记得替换 ngixn 中的ip地址.域名为localhost. (一) 准备工作 ...

  5. SpringBoot集成前端模版（thymeleaf）

    1.在application.properties配置文件中添加 thymeleaf 的配置信息 spring.datasource.driverClassName=com.mysql.jdbc.Dr ...

  6. SpringBoot获取前端传递JSON的几种方法

    一.Json对象+@RequestBody接收 var val = {id: 1, name: "小明"}; $.ajax({ url: "/getJson", ...

  7. SpringBoot vue

    springboot 整合vue就行前后端完全分离,监听器,过滤器,拦截器 https://github.com/ninuxGithub/spring-boot-vue-separateA blog ...

  8. SpringBoot使用WebJars

    本人主要做的是java,但是从第一份工作开始,就一直在做一个写前端又写后端的程序员,相信很多朋友和我一样,不仅要会后台代码,还要懂得很多的前端代码,例如javascipt和css样式. 本文就为大家简 ...

  9. 全栈开发——动手打造属于自己的直播间（Vue+SpringBoot+Nginx）

    前言 大学的学习时光临近尾声,感叹时光匆匆,三年一晃而过.同学们都忙着找工作,我也在这里抛一份简历吧,欢迎各位老板和猎手诚邀.我们进入正题.直播行业是当前火热的行业,谁都想从中分得一杯羹,直播养活了一 ...

随机推荐

  1. NLP文本相似度

    NLP文本相似度 相似度 相似度度量:计算个体间相似程度 相似度值越小,距离越大,相似度值越大,距离越小 最常用--余弦相似度:​ 一个向量空间中两个向量夹角的余弦值作为衡量两个个体之间差异的大小 余 ...

  2. 【笔记】css基于box的一行时垂直方向居中，多行平均居中，多出部分还省略号代替

    题目很长,其实他就是这样的: 看标题,一行的时候是这样的,在行中间 标题文字多的时候是这样的,变成2行,超出部分用省略号: 但是为了更好的兼容性,没有使用flex,使用的是box布局. 核心代码就是这 ...

  3. 在CentOS 7上安装和使用GlusterFS

    GlusterFS aggregates various storage servers over Ethernet or Infiniband RDMA interconnect into one ...

  4. radio点击一下选中，再点击恢复未选状态

    radio点击一下选中,再点击恢复未选状态 实现方式1: <input   type="radio"   id="cat"   name="ca ...

  5. Javascript高级编程学习笔记（45）——DOM 操作表格及DOM动态集合

    操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...

  6. JDK8 新增的日期时间API

    背景 JDK8中增加了一套全新的日期时间API,这里进行总结下,方便查询使用. 新的时间及日期API位于 java.time 包中,下面是一些关键类. Instant:代表的是时间戳. LocalDa ...

  7. java 堆 栈 方法区的简单分析

    Java里的堆(heap)栈(stack)和方法区(method) 基础数据类型直接在栈空间分配, 方法的形式参数,直接在栈空间分配,当方法调用完成后从栈空间回收.   引用数据类型,需要用new来创 ...

  8. 《Java 多线程编程核心技术》- 笔记

    作为业务开发人员,能够在工作中用到的技术其实不多.虽然平时老是说什么,多线程,并发,注入,攻击!但是在实际工作中,这些东西不见得用得上.因为,我们用的框架已经把这些事做掉了. 比如web开发,外面有大 ...

  9. dubbo集群容错解决方案

    dubbo主要核心部件 Remoting:网络通信框架,实现了sync-over-async和request-response消息机制. RPC:一个远程过程调用的抽象,支持负载均衡.容灾和集群功能. ...

  10. yolov3中 预测的bbox如何从特征图映射到原图？

    Anchor Box的边框 选取标准的k-means(欧式距离来衡量差异),在box的尺寸比较大的时候其误差也更大,而我们希望的是误差和box的尺寸没有太大关系.所以通过IOU定义了如下的距离函数,使 ...