Question

嗨，我有一个模板，该模板的标题和菜单使用默认布局和fragemnt。我想做的是检测当前页面的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依赖项摘要

<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");
  }
}

Answer 1

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

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

更新

由于使用Thymeleaf获取当前URL似乎无效，因此我们可以采取一种解决方法。我们可以在@Controller中获取当前的当前URL，然后通过属性发送它。这可以使用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>

Answer 2

使用Thymeleaf 3.0.x，您可以使用：

 ${#ctx.getRequest().getPath()}

不幸的是，到目前为止，我对mvc和webflux都看不到任何抽象。

如何在Spring Boot 2 Webflux thymeleaf中获取当前页面URL以设置CSS活动链接

2 个答案: