时间戳

首页 > 解决方案 > 如何在 Spring Boot 2 webflux thymeleaf 中获取当前页面 URL 以设置 css 活动链接

spring-boot - 如何在 Spring Boot 2 webflux thymeleaf 中获取当前页面 URL 以设置 css 活动链接

问题描述

嗨，我有模板，它使用默认布局和片段作为标题和菜单。我想要做的是检测当前页面 url，以便我可以添加所需的 css 以显示活动。

我试过 th:classappend="@{''} == 'find-all'? 'active': ''" 但是这总是将当前路径呈现为空白（即当前页面）。我也尝试过 ${#request.getCurrentPath} 错误提示找不到值或为空。

URL 是 /find-all 所以它应该检测到这一点并应用 css 但它似乎不起作用。

html片段代码如下：

<div class="header" th:fragment="header">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" th:href="@{/}">Time Keeping/Time Sheets</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar"
            aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item" th:classappend="@{''} == 'find-all'? 'active': ''">
                <a class="nav-link" th:href="@{/find-all}">Find All</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:href="@{/add-new-entry}">Add new Time Entry</a>
            </li>
        </ul>
    </div>
</nav>

Maven依赖snipet，

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-mongodb-reactive</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-webflux</artifactId>
    </dependency>
    <dependency>
        <groupId>nz.net.ultraq.thymeleaf</groupId>
        <artifactId>thymeleaf-layout-dialect</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>de.flapdoodle.embed</groupId>
        <artifactId>de.flapdoodle.embed.mongo</artifactId>
    </dependency>
    <dependency>
        <groupId>io.projectreactor</groupId>
        <artifactId>reactor-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

正如下面所要求的，这只是使用的控制器之一。

@Controller
public class HomeController {

  private static final String currentMonthName = LocalDateTime.now().getMonth().getDisplayName(TextStyle.FULL, Locale.ENGLISH);
  private final TimeKeepingEntryService service;

  public HomeController(TimeKeepingEntryService service) {
    this.service = service;
  }

  @GetMapping("/")
  public Mono<String> index(Model model) {
    model.addAttribute("metaTitle", "Time Keeping Application");
    model.addAttribute("month", currentMonthName);
    model.addAttribute("timeEntries",   service.findByMonth(currentMonthName));
    return Mono.just("index");
  }
}

标签： spring-bootthymeleaf

解决方案

您可以在 Themeleaf 中使用以下代码来获取当前页面的 URL。

th:value="${T(org.springframework.web.servlet.support.ServletUriComponentsBuilder).fromCurrentRequest()}"

更新

由于使用 Thymeleaf 获取当前 URL 似乎不起作用，那么我们可以做一个解决方法。我们可以在 中获取当前我们当前的 URL @Controller，并通过属性发送它。这可以使用HttpServletRequest. 代码最终看起来类似于下面的代码。

@GetMapping("/")
  public Mono<String> index(Model model, HttpServletRequest request) {
    model.addAttribute("metaTitle", "Time Keeping Application");
    model.addAttribute("month", currentMonthName);
    model.addAttribute("timeEntries", service.findByMonth(currentMonthName));
    model.addAttribute("currentUrl", request.getRequestURL().toString());
    return Mono.just("index");
  }

现在您需要做的就是在模板中使用这个新属性。

<p th:text="${currentUrl}"></p>

更新 2

由于最后一个选项都不起作用，您可以尝试使用jQuery.

$(document).ready(function() {
    var url = $(location).attr('href');
    $("#id").text(url);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="id"></p>

推荐阅读