在Thymeleaf中使用th:href标记构建 URL

1. 引言

Thymeleaf 提供了一种使用链接表达式@{...}创建URL的简单方法。在本文中，我们将介绍几种方法来构建用于链接的 URL，并为应用程序包含外部资源。

2. 绝对网址

绝对URL 用于构建指向其他服务器的链接。它们以协议名称http://或https://开头。除非您在服务器上配置了 URL 重写过滤器，否则 Thymeleaf 引擎不会更改它们。

在此示例中，我们创建一个指向https://frontbackend.com/tag/thymeleaf的绝对 URL：

<a th:href="@{https://frontbackend.com/tag/thymeleaf}">Thymeleaf</a>

输出如下：

<a href="https://frontbackend.com/tag/thymeleaf">Thymeleaf</a>

3. 上下文相对网址

这种 URL 是 Web 应用程序中最常用的 URL。上下文相对URL 相对于服务器上配置的 Web 应用程序根上下文。例如，如果您的Spring Boot应用程序使用上下文路径，那么您的application.properties中有一个参数server.contextPath=/myapp，则myapp将是上下文名称。​​​​​​​​​​​​​​

上下文相对网址以/ 开头。

例如，提供如下链接：

<a th:href="@{/tag/thymeleaf}">Thymeleaf</a>

对于在上下文myapp中提供的应用程序，输出将如下所示：

<a href="/myapp/tag/thymeleaf">Thymeleaf</a>

对于没有根上下文的应用程序，输出将如下所示：

<a href="/tag/thymeleaf">Thymeleaf</a>

4. 服务器相对网址

相对于服务器URL 类似于上下文相关的 URL，但在本例中，您可以指向不同的上下文，而不是应用程序服务器上配置的root上下文。

在以下示例中，尽管您的应用服务器在上下文myapp中运行，使用该结构：

<a th:href="@{~/tag/thymeleaf}">Thymeleaf</a>

将忽略它并生成以下输出：

<a href="/tag/thymeleaf">Thymeleaf</a>

5. 协议相对网址

协议相对URL 通常用于包含外部资源，如样式、脚本、图像等。这种URL的工作方式类似于文件系统中的绝对路径，并保留配置的协议：HTTP或HTTPS。

以下示例使用协议相对 URL 包含script.js在网站https://frontbackend.com上：

<script th:src="@{//frontbackend.com/script.js}"></script>

它将呈现未修改：

<script src="//frontbackend.com/script.js"></script>

6. 带参数的网址

要将查询参数添加到URL，您必须将它们放在括号( )中。

例如，添加到 URL 的一个查询参数将如下所示：

<a th:href="@{/tags(tag='thymeleaf')}">thymeleaf</a>

这将产生以下输出：

<a href="/tags?tag=thymeleaf">thymeleaf</a>

请注意，使用的任何特殊字符都将是 HTML 转义的。

要提供许多参数，请用逗号分隔它们：

<a th:href="@{/tags(tag='thymeleaf',order=1,sort=true)}">thymeleaf sorted</a>

上面的示例将呈现如下：

<a href="/tags?tag=thymeleaf&order=1&sort=true">thymeleaf sorted</a>

7. 网址片段标识符

片段标识符可以包含在 URL 中，并且在呈现的 HTML 中将始终包含它们。

例如，下面的代码：

<a th:href="@{/tags#all_tags(action='show')}">tags</a>

将呈现为以下网页：

<a href="/tag?action=show#all_tags">tags</a>

8. 在网址中使用表达式

百里叶允许您提供使用动态参数构建的复杂URL。

在以下示例中，我们使用表达式${customer.id}和条件${customer.active}在应用程序内创建动态链接：​​​​​​​

<a th:href="@{/customers(id=${customer.id},action=(${customer.active} ? 'show_active' : 'show_limited'))}">customer details</a>

当${customer.id}计算到1000并​​​​​​​​​​​​​​${custoemr.active}为​​​​​​​true呈现输出时，输出将如下所示：

<a href="/customers?id=1000&action=show_active">customer details</a>

9. 结论

在本文中，我们介绍了几种在百里叶模板中创建URL的方法。百里叶提供了构建具有动态参数的复杂URL的机制。