将CSS和JS添加到Thymeleaf


Add CSS and JS to Thymeleaf

1.简介

在本快速教程中，我们将学习如何在Thymeleaf模板中使用CSS和JavaScript。

首先，我们将讨论预期的文件夹结构，以便我们知道将文件放置在何处。在那之后，我们将看到从Thymeleaf模板访问那些文件所需的操作。

我们将从在页面上添加CSS样式开始，然后继续添加一些JavaScript功能。

2.设定

为了在我们的应用程序中使用Thymeleaf，让我们将Thymeleaf的Spring Boot Starter添加到我们的Maven配置中：

1
2
3
4
5
<dependency>
    <groupId>org.springframework.boot</groupId>
    spring-boot-starter-thymeleaf</artifactId>
    <version>2.2.6.RELEASE</version>
</dependency>

3.基本示例

3.1。目录结构

现在提醒一下，Thymeleaf是一个模板库，可以轻松地与Spring Boot应用程序集成。默认情况下，Thymeleaf希望我们将这些模板放置在src / main / resources / templates文件夹中。我们可以创建子文件夹，因此在此示例中，我们将使用名为cssandjs的子文件夹。

对于CSS和JavaScript文件，默认目录为src / main / resources / static。让我们分别为我们的CSS和JS文件创建static / styles / cssandjs和static / js / cssandjs文件夹。

3.2。添加CSS

让我们在static / styles / cssandjs文件夹中创建一个名为main.css的简单CSS文件，并定义一些基本样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
h2 {
    font-family: sans-serif;
    font-size: 1.5em;
    text-transform: uppercase;
}

strong {
    font-weight: 700;
    background-color: yellow;
}

p {
    font-family: sans-serif;
}

接下来，让我们在templates / cssandjs文件夹中创建一个名为styledPage.html的Thymeleaf模板以使用以下样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    Add CSS and JS to Thymeleaf
    <link th:href="@{/styles/cssandjs/main.css}" rel="stylesheet" />
</head>

    <p>
Carefully Styled Heading
</p>
    <p><center>[wp_ad_camp_4]</center></p><p>

        This is text on which we want to apply very special styling.
   
</p>

</html>

我们使用带有Thymeleaf特殊的th：href属性的链接标签加载样式表。如果使用了预期的目录结构，则只需指定src / main / resources / static下的路径。在这种情况下，就是/styles/cssandjs/main.css。 @ {/ styles / cssandjs / main.css}语法是Thymeleaf进行URL链接的方式。

如果运行我们的应用程序，我们将看到我们的样式已被应用：

width=

3.3。使用JavaScript

接下来，我们将学习如何向Thymeleaf页面添加JavaScript文件。

首先，向src / main / resources / static / js / cssandjs / actions.js中的文件添加一些JavaScript：

1
2
3
function showAlert() {
    alert("The button was clicked!");
}

然后，我们跳回到Thymeleaf模板，并添加一个指向我们的JavaScript文件的标记：

1
<script type="text/javascript" th:src="@{/js/cssandjs/actions.js}">

现在，我们从模板中调用方法：

1
<button type="button" th:onclick="showAlert()">Show Alert</button>

当我们运行应用程序并单击Show Alert按钮时，我们将看到警报窗口。

在总结之前，让我们通过学习如何在JavaScript中使用Spring控制器中的数据来稍微扩展一下这个示例。

让我们首先修改控制器以为页面提供名称：

1
2
3
4
5
@GetMapping("/styled-page")
public String getStyledPage(Model model) {
    model.addAttribute("name","Baeldung Reader");
    return"cssandjs/styledPage";
}

接下来，让我们向action.js文件中添加一个函数，以在警报中使用该名称：

1
2
3
function showName(name) {
    alert("Here's the name:" + name);
}

最后，为了使用来自控制器的数据调用函数，我们需要使用脚本内联。因此，将名称值放在本地JavaScript变量中：

1
2
<script th:inline="javascript">
    var nameJs = /*[[${name}]]*/;

通过这样做，我们创建了一个本地JavaScript变量，其中包含控件中的名称模型值，然后可以在页面其余部分的JavaScript中使用它。

至此，我们可以使用nameJs变量调用JavaScript函数了：

1
<button type="button" th:onclick="showName(nameJs);">Show Name</button>

4。结论

在这个简短的教程中，我们学习了如何将CSS样式和外部JavaScript功能应用于Thymeleaf页面。我们从推荐的目录结构开始，然后逐步使用Spring控制器类中提供的数据调用JavaScript。

与往常一样，该代码可在GitHub上获得。