使用Webjars在SpringBoot2中应用Twitter Bootstrap5

2 年 ago

文, 翔

2 minutes

开端

在使用Thymeleaf创建应用程序时，我希望为每个应用程序定义版本，因此这是关于当时操作的备忘录。

引入 WebJars。

我正在使用Gradle。请参考附录中后续描述的build.gradle文件。在依赖中添加以下内容。

implementation group: 'org.webjars', name: 'bootstrap', version: '5.1.3'

HTML模板

使用WebJars指定Bootstrap的CSS/JavaScript如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/5.1.3/css/bootstrap.min.css}" />
</head>
<body>
<div th:text="${hello}"></div>
<script th:src="@{/webjars/bootstrap/5.1.3/js/bootstrap.min.js}"></script>
</body>
</html>

Thymeleaf中的指定方法是@{/webjars/引入包/版本/资源路径}。

从Spring Boot的配置中提取版本指定。

我们可以通过在SpringBoot的配置中读取而不是直接在模板中写入Bootstrap的版本。下面是一个使用SpringBoot配置（application.yml）来获取该值，并在Thymeleaf中使用的示例。

设置 (shè

webjars:
  bootstrap: 5.1.3

读取设定好的webjars

有几种方法可以实现，但本次我们将把一个设定类标记为@Component，由Spring来管理bean。

import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

import lombok.Data;

@Component
@ConfigurationProperties(prefix = "webjars")
@Data
public class WebjarsConfig {
	private String bootstrap;
}

HTML模板（Thyemeleaf）

请注意设置锚点URL的方法以及从Spring管理的bean中引用值的方法。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/{version}/css/bootstrap.min.css(version=${@webjarsConfig.bootstrap})}" />
</head>
<body>
<div th:text="${hello}"></div>
<script th:src="@{/webjars/bootstrap/{version}/js/bootstrap.min.js(version=${@webjarsConfig.bootstrap})}"></script>
</body>
</html>

在th:src中设置变量的方法是使用{ }将变量括起来，并在URL的末尾使用(变量=${绑定在Spring中的值})进行指定。

由于Thymeleaf位于SpringBoot内部，因此可以从Spring的ApplicationContext中引用。因此，由于在先前的WebjarsConfig中进行了无名称的@Component设置，所以引用的名称将是webjarsConfig。

附录

验证环境

Windows11 / SpringBoot 2.6.6 / Java 17 可以被简述为：
Windows11 / 技术框架SpringBoot的版本为2.6.6，所使用的编程语言为Java 17。

构建.gradle

plugins {
	id 'org.springframework.boot' version '2.6.6'
	id 'io.spring.dependency-management' version '1.0.11.RELEASE'
	id 'java'
}

group = 'com.github.apz'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '17'

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	annotationProcessor 'org.springframework.boot:spring-boot-configuration-processor'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	
	// https://mvnrepository.com/artifact/org.webjars/bootstrap
	implementation group: 'org.webjars', name: 'bootstrap', version: '5.1.3'
}

tasks.named('test') {
	useJUnitPlatform()
}

请查阅相关文献。

Thymeleaf3:4.4 Link URLs