Spring Boot + Thymeleaf + webjars Bootstrap 4
Posted
技术标签:
【中文标题】Spring Boot + Thymeleaf + webjars Bootstrap 4【英文标题】：Spring 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 中。
我该如何解决这个问题？
谢谢。
【问题讨论】：
【参考方案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 应用程序并查看页面源代码，您将通过在运行时单击链接来访问此文件。
【讨论】：
以上是关于Spring Boot + Thymeleaf + webjars Bootstrap 4的主要内容，如果未能解决你的问题，请参考以下文章
Spring Boot2：使用Spring Boot结合Thymeleaf模板引擎使用总结