Spring 启动 + Thymeleaf + webjars Bootstrap 4

Question

我正在尝试使用 Thymeleaf 将 bootstrap 添加到我的 Spring 启动项目。

index.html

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

<div th:replace="@{'views/' + ${content}} :: ${content}"></div>

<div lang="en" th:replace="fragments/footer :: footer"> </div>
</body>
</html>

footer.html

<div xmlns:th="http://www.thymeleaf.org" th:fragment="footer" >
    <script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
    <script  th:src="@{/webjars/popper.js/1.12.9-1/umd/popper.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.0.0-1/js/bootstrap.min.js}"  ></script>
</div>

header.html

<head xmlns:th="http://www.thymeleaf.org" th:fragment="header" >
    <meta charset="UTF-8">
    <title>Модуль планирования ПД</title>
    <link th:rel="stylesheet"  th:href="@{webjars/bootstrap/4.0.0-1/css/bootstrap.min.css} "/>
</head>

MvcConfig.java

    @Configuration
public class MvcConfig implements WebMvcConfigurer {

   @Override
   public void addResourceHandlers(ResourceHandlerRegistry registry) {
      registry
              .addResourceHandler("/webjars/**")
              .addResourceLocations("/webjars/")
              .resourceChain(false);
   }
}

样式不适用于页面并抛出错误：在 jquery、bootstrap、popper.

我该如何解决这个问题？

谢谢。

Answer 1

如果您在 pom.xml 中使用 org.webjars 依赖项，那么您可能应该在 webjars/... 之前添加斜杠 / 并保留属性 rel="stylesheet"在你的 header.html:

<link rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-1/css/bootstrap.min.css} "/>

也尝试运行它没有 MvcConfig 配置 class。

Answer 2

为了更简单，我得到了 webjars-locator:

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

在我的页面最后，我输入：

<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>

并且需要设置这个 WebMvcConfigure class:

@Configuration
public class SpringMVCConfiguration implements WebMvcConfigurer {
private static final String[] CLASSPATH_RESOURCE_LOCATIONS = {
  "classpath:/META-INF/resources/",
  "classpath:/resources/", 
  "classpath:/static/",
  "classpath:/public/"};

  @Override
 public void addResourceHandlers(ResourceHandlerRegistry registry) {
 registry.addResourceHandler("/**")
 .addResourceLocations(CLASSPATH_RESOURCE_LOCATIONS);
 registry.addResourceHandler("/webjars/**")
 .addResourceLocations("/webjars/").resourceChain(false);
   }
 }

我没有在 Spring 启动时使用任何其他设置。

Answer 3

使用 Spring 引导，WebJar 是自动配置的。无需添加任何处理程序或其他配置。当你运行你的应用程序（没有任何配置）时，你可以看到这样的日志：

... Mapped URL path [/webjars/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]

因此删除您的 MvcConfig class 可能会解决问题。
事实上，我的 Spring Boot 应用程序与您的相似（但没有该配置文件）并且运行良好。当我将您的配置添加到我的应用程序时，WebJars 不再工作了！

Answer 4

您也可以通过以下方式添加 webjars 依赖项来解决这个问题

   <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>4.3.1</version>
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>3.4.0</version>
    </dependency>
   <!-- rest of needed dependecies -->

然后将它们添加到您的模板中 header

<link rel="stylesheet" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}"/>
<script th:href="@{/webjars/jquery/3.4.0/jquery.min.js} "></script>

然后，如果您运行您的 Spring-Boot 应用程序并查看页面源代码，您将可以访问此文件，方法是在运行时间单击 link .

Spring 启动 + Thymeleaf + webjars Bootstrap 4

Spring boot + Thymeleaf + webjars Bootstrap 4

spring

thymeleaf

webjars

spring-boot

twitter-bootstrap-4