📌  相关文章
📜  在 Spring Boot 中使用 webjars (1)

📅  最后修改于: 2023-12-03 15:07:49.329000             🧑  作者: Mango

在 Spring Boot 中使用 webjars

介绍

Webjars 是将 JavaScript 和 CSS 库打包成 JAR 文件的工具，可以方便地将这些静态资源集成到 Web 应用程序中。在 Spring Boot 中使用 webjars 可以简化项目中 JavaScript 和 CSS 的管理和使用。

使用方式
1. 添加 Maven 依赖

在 pom.xml 文件中添加如下 Maven 依赖：

<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>webjars-locator</artifactId>
  <version>0.39</version>
</dependency>

此外，还需要添加具体的 JavaScript 和 CSS 库的 Maven 依赖。例如，如果想要使用 jQuery，可以添加以下依赖：

<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>jquery</artifactId>
  <version>3.6.0</version>
</dependency>
2. 在 Thymeleaf 中使用

在 Thymeleaf 中使用 webjars 可以通过 webjars 命名空间实现。例如，使用 jQuery：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:webjars="http://www.thymeleaf.org/extras/webjars">

<head>
  <title>Webjars Example</title>
  <link rel="stylesheet" th:href="@{webjars/bootstrap/5.1.0/css/bootstrap.min.css}"/>
  <script th:src="@{webjars/jquery/3.6.0/jquery.min.js}"></script>
</head>

<body>
  <h1>Hello, world!</h1>
  <script th:inline="javascript">
    $(document).ready(function() {
        console.log("jQuery is ready!");
    });
  </script>
</body>

</html>
3. 在 JavaScript 中使用

在 JavaScript 中可以直接使用 webjars 中的模块，无需做任何额外配置。例如，使用 jQuery：

import $ from 'jquery';
 
$(document).ready(function() {
    console.log("jQuery is ready!");
});
4. 在 CSS 中使用

在 CSS 中可以使用相对路径引用 webjars 中的 CSS 文件。例如，使用 Bootstrap：

@import url("../webjars/bootstrap/5.1.0/css/bootstrap.min.css");
总结

通过使用 webjars，可以方便地管理和使用 Web 应用程序中的 JavaScript 和 CSS 库。在 Spring Boot 中使用 webjars 很简单，只需要添加 Maven 依赖，然后在 Thymeleaf、JavaScript 或 CSS 中使用即可。