Spring Boot + WebJars 整合运用

Spring Boot + WebJars 整合运用

示例：SpringBoot | 第十八章：web应用开发之WebJars使用

WebJars介绍及使用

WebJars是一个很神奇的东西，可让你们以jar包的形式来使用前端的各类框架、组件。

####　什么是WebJars

WebJars是将客户端（浏览器）资源（JavaScript，Css等）打成jar包文件，以对资源进行统一依赖管理。WebJars的jar包部署在Maven中央仓库上

####　为何使用

咱们在开发Java web项目的时候会使用像Maven，Gradle等构建工具以实现对jar包版本依赖管理，以及项目的自动化管理，可是对于JavaScript，Css等前端资源包，咱们只能采用拷贝到webapp下的方式，这样作就没法对这些资源进行依赖管理。那么WebJars就提供给咱们这些前端资源的jar包形势，咱们就能够进行依赖管理。

####　原理

本来咱们在进行web开发时，通常上都是讲静态资源文件放置在webapp目录下，在SpringBoot里面，通常是将资源文件放置在src/main/resources/static目录下。而在Servlet3中，容许咱们直接访问WEB-INF/lib下的jar包中的/META-INF/resources目录资源，即WEB-INF/lib/{*.jar}/META-INF/resources下的资源能够直接访问,WebJars也是利用了此功能，将全部前端的静态文件打包成一个jar包，这样对于引用放而言，和普通的jar引入是同样的，还能很好的对前端静态资源进行管理。

如何使用

1. Maven依赖

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>3.3.7</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.3.1</version>
</dependency>  


<!-- Package as an executable jar/war -->
<plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
    <configuration>
        <addResources>true</addResources>
    </configuration>
</plugin>

2. 界面引用

<!--若是未引入webjars-locator，相关静态资源须要版本号，此处不便于升级-->
<script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"/>

3. 省略页面引用时的版本号

写死版本号不利于项目资源升级，可额外使用webjars-locator来省略引用时的版本号：
添加以后的pom文件以下：
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator</artifactId>
    <version>0.34</version>
</dependency>

而后就能够不带版本号访问了：
<!--由于额外引入了webjars-locator，因此相关静态资源的引入可省略版本号便于升级-->
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
<link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"/>

完整示例

静态文件工程