11

我有一个 Spring Boot（我使用 Thymeleaf 进行模板）项目，我想在其中使用一些 jQuery 库。

不幸的是，webjars 根本没有加载。我尝试了很多配置，但都失败了。

这是我的 HTML 页面的代码片段：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">

<title>JAC</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.js"
        th:src="@{/webjars/jquery/2.1.4/jquery.min.js}" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/webjars/jquery-file-upload/9.10.1/jquery.fileupload.js"  type="text/javascript"
        th:src="@{/webjars/jquery-file-upload/9.10.1/jquery.fileupload.min.js}"></script>
<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.5/css/bootstrap.min.css"
      th:href="@{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}"
      rel="stylesheet" media="screen" />
<link href="http://cdn.jsdelivr.net/webjars/jquery-file-upload/9.10.1/jquery.fileupload.css"
      rel="stylesheet" media="screen" />
</head>

我已将它们添加到 pom 文件中：

<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>jquery</artifactId>
    <version>2.1.4</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>3.3.5</version>
</dependency>

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery-file-upload</artifactId>
    <version>9.10.1</version>
</dependency>

但是在调用页面时，我在 jquery.min.js 和 jquery.fileupload.min.js 上得到了 404。

GET http://localhost:8888/webjars/jquery-file-upload/9.10.1/jquery.fileupload.min.js 
2015-09-21 02:02:04.059 home:9 
GET http://localhost:8888/webjars/jquery/2.1.4/jquery.min.js 404 (Not Found)
4

8 回答 8

26

您正确引用了 jquery 库。也许您缺少资源处理程序配置。

<mvc:resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/"/>

或者，如果您使用 JavaConfig

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

  @Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
  }

}

Webjars 文档

如果这不起作用，请检查类路径上是否有 webjars（在 7Zip 中打开您的应用程序 JAR 并检查其中是否有 webjars 资源。）

于 2015-09-22T07:28:25.430 回答
4

在检查了 jquery 的 webjar 之后，我通过添加一个“dist”子路径来完成这个工作。

<script src="webjars/jquery/2.1.4/dist/jquery.min.js" type="text/javascript"></script>
于 2016-01-02T13:37:51.507 回答
3

在一个博客上找到了其他答案：

当使用 Spring Framework 4.2 或更高版本时，它会自动检测类路径上的 webjars-locator 库，并使用它来自动解析任何 WebJars 资产的版本。

为了启用此功能，我们将添加 webjars-locator 库作为应用程序的依赖项：

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

在这种情况下，我们可以在不使用版本的情况下引用 WebJars 资产；(...)

于 2019-01-07T14:57:55.073 回答
2

如果您使用 servlet 3.x，只需添加：

1-使用java配置：

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {

    public void addResourceHandlers(ResourceHandlerRegistry registry) {

            registry.addResourceHandler("/webjars/**").addResourceLocations("/webjars/").resourceChain(false);

       registry.setOrder(1);
    }


}

2-或xml配置：

<mvc:resources mapping="/webjars/**" location="/webjars/"> 
  <mvc:resource-chain resource-cache="false" /> 
</mvc:resources>
于 2019-02-05T17:33:30.980 回答
1

webjars 依赖项应该在 spring boot 类路径上可用，因此您应该尝试使用 src 属性引用 webjars，如下所示：

<script src="webjars/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="webjars/jquery-file-upload/9.10.1/jquery.fileupload.min.js"></script>
<link href="webjars/bootstrap/3.3.5/css/bootstrap.min.css"
  rel="stylesheet" media="screen" />
<link href="webjars/jquery-file-upload/9.10.1/jquery.fileupload.css"
  rel="stylesheet" media="screen" />
于 2015-09-21T01:00:33.200 回答
1

我最终做了一个 mvn clean install （从 cmd 提示符）来清理目标并正确填充所有 lib/jars。我正在使用带有 Intelij 的 Spring Boot。

于 2017-01-06T16:19:14.523 回答
0

确保在添加依赖项时更新了 bootstrap 或 jquery 的版本，您应该使用正确版本的 bootstrap 和 jquery 更新 jsp 或 html 中的 URL。

于 2021-06-30T23:14:50.593 回答
0

在检查了 jquery 的 webjars 之后，我通过添加“ POM.XML 文件中使用的 JQUERY 库的版本”来完成这项工作

<script src = "/webjars/jquery/3.1.0/jquery.min.js"></script>

（在我的情况下，我使用了 3.1.0 版本，仅使用了您正在使用的那个版本）。

于 2020-08-26T12:27:45.187 回答