Springboot WebJar打包及使用实现流程解析

下面提供关于SpringBoot使用WebJar的完整攻略，包括打包和实现流程解析。

什么是WebJar

WebJar 是一个将客户端 Web 应用程序的广泛的客户端库打包成 JAR 文件的项目。 这是一个 Maven 仓库中的普通 JAR 文件，但它包含关于静态资源（如 CSS、JavaScript 等）的有用的元数据。 使用 WebJar 您不仅可以更轻松地构建您的应用程序，而且可以使结构更清晰易于维护。

SpringBoot中的WebJar打包和使用

以下是在 Spring Boot 中使用 WebJar 的指南。

1. 在Maven的pom.xml文件中添加下列依赖项

<!--引入webjar不同版本的资源-->
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.5.1</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.6.0</version>
</dependency>

2. 编写HTML头引入资源文件

<link rel="stylesheet" href="/webjars/bootstrap/4.6.0/css/bootstrap.min.css"/>
<script src="/webjars/jquery/3.5.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/4.6.0/js/bootstrap.min.js"></script>

3. 打包

执行如下命令将WebJar打包到项目中。

```shell script
mvn clean package

### 4. 测试

通过SpringBoot中的嵌入式Tomcat快速启动并运行SpringBoot应用程序。

```java
@SpringBootApplication
@Controller
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

    @GetMapping("/")
    public String index(Model model) {
        return "index";
    }
}

5. 示例

示例1 基于SpringBoot、WebJar和Bootstrap4.x的访问

定义html头CSS引入资源文件和JS引入资源文件

<link rel="stylesheet" href="/webjars/bootstrap/4.6.0/css/bootstrap.min.css"/>
<b>代码块1：</b>
<div class="d-flex justify-content-center align-items-center position-absolute h-100 w-100">
　　<div class="alert alert-success container" role="alert" style="max-width:600px;">
　　    <h4 class="alert-heading text-center">SpringBoot、WebJar和Bootstrap4.x</h4>
　　    <hr>
　　    <p class="mb-0">
　　　　编写程序使用SpringBoot、WebJar和Bootstrap4.x快速构建Web应用。 
　　    </p>
　　</div>
</div>
<b>代码块2：</b>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <h4 class="alert-heading">Have A Good Day!</h4>
    <hr>
    <p>新的一天开始了，请继续保持好心情哦！</p>
    <p>.</p>
    <hr>
    <a href="#" class="alert-link">X关闭</a>
</div>

<script src="/webjars/jquery/3.5.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/4.6.0/js/bootstrap.min.js"></script>

示例2 基于SpringBoot、WebJar和jQuery的访问

定义HTML头CSS引入资源文件和JS引入资源文件

<link rel="stylesheet" href="/webjars/bootstrap/4.6.0/css/bootstrap.min.css"/>

<div class="d-flex justify-content-center align-items-center position-absolute h-100 w-100">
　　<div class="alert alert-success container" role="alert" style="max-width:600px;">
　　    <h4 class="alert-heading text-center">SpringBoot、WebJar和jQuery</h4>
　　    <hr>
　　    <p class="mb-0">
　　　　    编写程序使用SpringBoot、WebJar和jQuery快速构建Web应用。 
　　    </p>
　　</div>
</div>

<script src="/webjars/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".alert").fadeTo(2000, 500).slideUp(500, function () {
            $(".alert").slideUp(500);
        });
    }); 
</script>

以上示例可以直接使用SpringBoot运行。使用访问主机以及端口号，访问页面即可。

shell script
http://localhost:8080/

这就是完整的 SpringBoot 和 WebJar 整合攻略。我们可以在项目中简单易用地使用 WebJar，使得前端静态资源管理更加清晰，结构更容易维护。