11、Spring Boot：使用WebJars

什么是WebJars？

WebJars是被打包成JAR文件 (Java Archive)形式的客户端web资源库（例如：jQuery、Bootstrap等）。

 

优点：

• 使用WebJars技术可以对Java web项目的前端资源（例如：jQuery、Bootstrap、CSS等）进行统一的依赖管理。解决了传统的往静态文件夹下（例如/src/main/resources/static/）直接拷贝*.js、*.css等文件造成的不便于依赖管理的问题。
• WebJars提供了可以在展示页面（例如JSP）中，对前端资源的引用路径里省略书写版本号的功能。
• 自动解析引用资源的依赖关系，并且可以通过RequireJS技术自定义导入。

 

官网写的优点：

• 简单明了的对基于JVM的web应用程序的客户端依赖资源进行管理。
• 可由基于JVM的构件工具（例如：Maven, Gradle, sbt, 等）下载客户端依赖资源。
• 清楚的知道你正在使用的客户端依赖资源都有哪些。
• 自动解析引用资源的依赖关系，并且可以通过RequireJS技术自定义导入。
• WebJars的JAR包部署在Maven中央仓库上。
• 由JSDELIVR提供公共CDN支持

 

原理：

任何兼容Servlet 3标准的容器，都会自动把WEB-INF/lib目录中的WebJars的JAR包视作静态资源。

这是因为任何在WEB-INF/lib目录中的JAR包中的META-INF/resources目录中的内容都会自动视作公开的静态资源。

 

使用方法：

1、pom.xml中添加依赖（WebJars的JAR包部署在Maven中央仓库上。）

        
             org.webjars
             jquery
             3.3.1-1
         

 

2、在页面中引用

 

测试：

1、新建一个测试TestController：

package com.example.WEB_demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class TestController
{
     @RequestMapping("/test")
     public String testHello()
     {
        return "test";  
     }
}

 

2、新建一个测试页面test.html：

注意目录应该在：src/main/resources/templates/下

     
         
         
           
           
     
     
         
测试由WebJars引入的jQuery包是否生效
         
     

 

3、启动Spring Boot项目，打开浏览器，访问http://localhost:8080/test/

 

4、点击TEST按钮

 

补充1：

由于在页面引用中使用了版本号做为引用路径的一部分，这违背了WebJars方便版本管理的初衷。因此WebJars为我们准备了忽略版本号引用的方法。

 

1、在pom.xml中添加自动版本管理引用：

        
             org.webjars
             webjars-locator
             0.30
         

 

2、在页面中的引用方式改为

特别注意，只可以删掉目录中的版本号部分，否则关联导入可能无法工作。

 

补充2：

如何知道pom.xml的依赖中version版本写多少？

 

1、打开https://www.webjars.org官网，找到下方的Popular WebJars

找到要引用的框架（也可以在Search框内输入要引用的框架名称），选择合适的版本号，选择合适的Build Tool，然后直接复制生成的引用代码即可。

 

补充3：

如何知道引用地址：

1、在WebJars官网找到引用的框架后，点击最后一列对应的Files

 

2、在打开的页面中观察：

META-INF/resources路径之后的字样就是引用路径。

 

3、可以在项目工程目录的Maven Dependencies下找到导入的jar包，打开观察目录结构：