Spring boot webjars: unable to load javascript lib

2019-03-19 20:13发布

问题:

I have a spring boot (I use Thymeleaf for templating) project where I want to use some jQuery libraries.

Unfortunately, the webjars aren't loading at all. I have tried many configuration but all of them failed.

Here is the code snippet of my HTML page:

<!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>

I have added them in the pom file:

<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>

But when calling the page I got a 404 on jquery.min.js and jquery.fileupload.min.js.

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)

回答1:

You are referencing jquery library correctly. Maybe you are missing resource handler configuration.

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

Or if you use JavaConfig

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

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

}

Webjars documentation

If this will not work, please check if you have webjars on classpath (open your application JAR in 7Zip and check if webjars resources are inside it.)



回答2:

After inspecting the webjar for jquery, I got this working by adding a "dist" subpath.

<script src="webjars/jquery/2.1.4/dist/jquery.min.js" type="text/javascript"></script>


回答3:

The webjars dependencies should be available on the spring boot classpath, so you should try referencing the webjars using the src attribute like so:

<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" />


回答4:

I ended up doing a mvn clean install (from cmd prompt) to get the target cleaned and all the lib/jars populated correctly. I am using Spring boot with Intelij.



回答5:

Additional answer found on one blog:

When using Spring Framework version 4.2 or higher, it will automatically detect the webjars-locator library on the classpath and use it to automatically resolve the version of any WebJars assets.

In order to enable this feature, we’ll add the webjars-locator library as a dependency of the application:

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

In this case, we can reference the WebJars assets without using the version; (...)



回答6:

if you use servlet 3.x just add :

1- using java config :

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {

    public void addResourceHandlers(ResourceHandlerRegistry registry) {

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

       registry.setOrder(1);
    }


}

2- or xml config :

<mvc:resources mapping="/webjars/**" location="/webjars/"> 
  <mvc:resource-chain resource-cache="false" /> 
</mvc:resources>