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. Storm知识点笔记

    Spark和Storm Spark基于MapReduce算法实现的分布式计算,不同于MapReduce的是,作业中间结果可以保存在内存中,而不要再读写HDFS, Spark适用于数据挖掘和机器学习等需 ...

  2. 谈谈一些有趣的CSS题目（十六）-- 奇妙的 background-clip: text

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. 16bit CRC算法C语言实现

    #define CRC_16_POLYNOMIALS 0x8005 unsigned short CRC16_3(unsigned char* pchMsg, unsigned short wData ...

  4. Maven整合SSM测试

    前面也说到了关于SSM的整合,话不多说直接从创建项目开始CRUD之路(参考前面写过的Mybatis和Spring整合,SSM简单整合),这是整个项目的结构 以及最终的结果.(附上下载地址) 一.创建M ...

  5. Html/CSS前端如何实现文字边框阴影

    上次我们聊了<Html5前端如何实现文字阴影>,其实在开发中现在对于阴影效果的使用已经越来越广泛了,那么今天我们就来说一说用同样的手法实现边框阴影. 一.边框阴影box-shadow 边框 ...

  6. dom4j 解析XML文件

    <?xml version="1.0" encoding="UTF-8"?> <!-- 手机的根节点 --> <Phones> ...

  7. GitHub 近 100,000 程序员“起义”：向“996”开炮！

    作者 | 伍杏玲 出品 | 程序人生(ID:coder_life) 平常CSDN推送关于程序员加班的文章时,很多程序员边吐槽边调侃地留言“比拼”:“我们也是996”.“007来报道”…… 可在简单的数 ...

  8. 选择IT事业，意味着终身学习

    八月,炎阳如火. 前几天书记找我交流,问我离职的原因,我跟他仔细的分析了一下我的职业发展规划和我对于未来的预期,书记也向我分析了一下他所认为的原因,他说,无外乎是三个原因:第一个是钱的问题:第二个是行 ...

  9. Tools - 正版Windows7系统的下载与安装

    下载 微软原版系统下载地址:https://msdn.itellyou.cn/ 根据系统类型.语言和版本,下载合适的系统ISO文件. 例如: Windows 7 Professional with S ...

  10. [Oracle]使用InstantClient访问Oracle数据库

    环境 操作系统: Win8.1 Enterprise Oracle开发工具: PL/SQL Developer 7.0.1.1066 (MBCS) 步骤 下载InstantClient Oracle官 ...