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. eclipse设置新建jsp文件默认字符编码为utf-8

    在使用Eclipse开发中,编码默认是ISO-8859-1,不支持中文.这样我们每次新建文件都要手动修改编码,非常麻烦.其实我们可以设置文件默认编码,今后再新建文件时就不用修改编码了. 1.打开Ecl ...

  2. WebPackBrows

    一个http工具,通过java编写 调用方法 s.y.webpackbrows.fac.WebPackFactor.getConnection 还会继续完善 下载位置 https://pan.baid ...

  3. 公司项目接触到了FormData，总结一下

    Javascript FormData() 对象! 1.创建 var formData = new FormData(); 2.如果有form对象 则先获取form表单 然后初始化时直接加入进去 eg ...

  4. 14.不同条目的listview

    分类界面 整个项目的逻辑就是这样的 CategoryInfo  public class CategoryInfo { private String title; private String url ...

  5. Java核心技术卷一基础知识-第6章-接口与内部类-读书笔记

    第6章 接口与内部类 本章内容: * 接口 * 对象克隆 * 接口与回调 * 内部类 * 代理 接口技术主要用来描述类具有什么功能,而并不给出每个功能的具体实现.一个类可以实现(implement)一 ...

  6. 吴恩达机器学习笔记46-K-均值算法（K-Means Algorithm）

    K-均值是最普及的聚类算法,算法接受一个未标记的数据集,然后将数据聚类成不同的组. K-均值是一个迭代算法,假设我们想要将数据聚类成n 个组,其方法为: 首先选择

  7. 吴恩达机器学习笔记36-正则化和偏差/方差(Regularization and Bias_Variance)

    在我们在训练模型的过程中,一般会使用一些正则化方法来防止过拟合.但是我们可能会正则化的程度太高或太小了,即我们在选择λ 的值时也需要思考与刚才选择多项式模型次数类似的问题. 我们选择一系列的想要测试的

  8. 微信小程序实现标签页滑块效果

    微信小程序实现标签页滑块效果 小程序完整代码: wxml: <view class="swiper-tab"> <view class="swiper- ...

  9. Java对象的克隆和深浅问题

    Java实现克隆的方式 Java实现克隆的方式有如下两种, 推荐采用实现Cloneable接口的方式 实现Cloneable接口, 重写clone方法, 调用父类的clone方法 还有另一种方法, 不 ...

  10. idea导入maven项目 傻瓜都能看懂

    1.找到你需要导入的项目 2.打开idea ------------------------------------------------------------------------------ ...