Spring Boot + Thymeleaf + webjars Bootstrap 4答案

【问题标题】：Spring boot + Thymeleaf + webjars Bootstrap 4Spring Boot + Thymeleaf + webjars Bootstrap 4
【发布时间】：2018-08-15 06:40:09
【问题描述】：

我正在尝试使用 Thymeleaf 将引导程序添加到我的 Spring Boot 项目中。

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>

页脚.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 中。

我该如何解决这个问题？

谢谢。

【问题讨论】：

标签： spring spring-boot thymeleaf twitter-bootstrap-4 webjars

【解决方案1】：

为了更容易，我得到了 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>

我没有在 Spring boot 中使用任何其他设置。

【讨论】：

我也有这个问题，似乎没有什么对我有用。

【解决方案2】：

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

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

也尝试在没有MvcConfig 配置类的情况下运行它。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案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 -->

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

<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 应用程序并查看页面源代码，您将通过在运行时单击链接来访问此文件。

【讨论】：