时间戳

首页 > 解决方案 > 同一页面上的多个超链接

html - 同一页面上的多个超链接

问题描述

我一直在尝试在同一页面上设置两个超链接。由于某些原因，无论通过单击超链接做出何种选择，它总是会打开与第一个选项关联的 html 页面。我错过了什么吗？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head>
  <title>Spring Security Example</title>
</head>

<body>
  <h1>Welcome</h1>
  <p>Click <a th:href="@{/login}"> here </a>for login. </p>
  <p>Click <a th:href="@{/registration}"> here </a>to register as a new user.</p>
</body>

</html>

这是 login.html

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
        <title>Spring Security Example </title>
    </head>
    <body>
        <div th:if="${param.error}">
            Invalid username and password.
        </div>
        <div th:if="${param.logout}">
            You have been logged out.
        </div>
        <form th:action="@{/login}" method="post">
            <div><label> User Name : <input type="text" align="center" name="username"/> </label></div>
            <div><label> Password: <input type="password" align="center" name="password"/> </label></div>
            <div><input type="submit" value="Sign In"/></div>
        </form>
    </body>
    </html>

下面是registration.html

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
        <title>Spring Security Example </title>
    </head>
    <body>
        <form th:action="@{/registration}" method="post">
         <div><label> Preferred User Name : <input type="text" align="center" name="username"/> </label></div>
            <div><label> Password: <input type="password" align="center" name="pasisword"/> </label></div>
            <div><label> Reentered password: <input type="password" align="center" name="password"/> </label></div>
            <div><label> Address: <input type="text" align="center" name="address"/> </label></div>
            <div><label> Upload Image : <input type="image" align="center" name="photos"/> </label></div>
            <div><input type="submit" value="new user"/></div>
        </form>
    </body>
</html>

MvcConfig.java 如下。

    public class MvcConfig implements WebMvcConfigurer {

    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/home").setViewName("home");
        registry.addViewController("/").setViewName("home");
        registry.addViewController("/hello").setViewName("hello");
        registry.addViewController("/login").setViewName("login");
        registry.addViewController("/registration").setViewName("registration");
    }

}

标签： htmlspring-mvcwebspring-securityfrontend

解决方案

这可能会有所帮助。

拆分href中的字符串

@{'/' + ${login}}

像这样：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head>
  <title>Spring Security Example</title>
</head>

<body>
  <h1>Welcome</h1>
  <p>Click <a th:href="@{'/' + ${login}}"> here </a>for login. </p>
  <p>Click <a th:href="@{'/' + ${registration}}"> here </a>to register as a new user.</p>
</body>

</html>

推荐阅读