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. Codeforces831A Unimodal Array

    A. Unimodal Array time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  2. 命令行方式登录PostgreSQL

    目录: 一.在默认配置条件下,本机访问PostgreSQL 二.创建新用户来访问PostgreSQL 三.最简单的做法 四.开启远程访问 一.在默认配置条件下,本机访问PostgreSQL 切换到Li ...

  3. 1.Spring AOP应用

    首先咱们来了解一下具体的业务场景(这是个真实的项目的业务场景):具体的业务是这样的,现在系统中有六十多个主档(功能模块),每个主档都有新增.修改.删除功能,当我们在对每个主档做这些操作时需要对其记录日 ...

  4. iptables log日志记录功能扩展应用：iptables自动配置临时访问策略，任意公网登录服务器

    一.修改日志记录: 1. 修改配置文件: vi /etc/rsyslog.conf 添加以下内容 #iptables log kern.=notice /var/log/iptables.log 2. ...

  5. 包建强的培训课程（7）：iOS企业级开发实战

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  6. 利用python完成大学刷课（从0到完成的思路）

    i春秋作家:tllm 原文来自:利用python完成大学刷课(从0到完成的思路) 最近刚刚开学,学校总是有很多让人无语的课要修,还不能不修.然后我想写一个自动修课的脚本.大佬们不要笑我 是边面向百度学 ...

  7. Java定时任务解决方案

    很多项目中都会遇到需要定时任务的情况,本篇文章就结合了Spring中以及SpringBoot.SpringCloud中定时任务的解决方案. 在Spring中使用定时器 用SpringBoot比较多的同 ...

  8. python中的进制转换

    python中常用的进制转化通常有两种方法: 1.用内置函数hex(),oct(),bin(),对应的数字表示为0x,0o,0b,功能是把十进制数字转化为其他进制  >>> int( ...

  9. Java中的enum枚举类

    首先说说为什么要写这个enum枚举类吧,是群里有个新手问:怎样把enum类中的值遍历得到,其实自己用的也很少.自己也是确实不知道,于是我去网上搜了不少,总结了些,希望对大家有帮助:首先我说说怎样遍历枚 ...

  10. WebSocket(1)---WebSocket介绍

    WebSocket介绍   一.为什么需要 WebSocket? 初次接触 WebSocket 的人,都会问同样的问题:我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处? 答案很 ...