Question

好的，我设法使用Thymeleaf获取我的应用程序，现在我需要将所有JSP页面重建为HTML5。首先，我需要能够使用在JSP上非常好用的用户名和密码登录应用程序。

我将用于将HTML5页面指定为视图层的bean定义为：

@Bean
public ViewResolver viewResolver() {
    ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver();
    templateResolver.setTemplateMode("HTML5");
    templateResolver.setCharacterEncoding("UTF-8");
    templateResolver.setPrefix("/WEB-INF/html/");
    templateResolver.setSuffix(".html");

    SpringTemplateEngine engine = new SpringTemplateEngine();
    engine.setTemplateResolver(templateResolver);

    ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
    viewResolver.setTemplateEngine(engine);

    return viewResolver;
}

我的LoginController定义为：

@Controller
public class LoginController {

    @Autowired
    UserProfileService userProfileService;

    @Autowired
    UserService userService;

    @RequestMapping(value = { "/", "/home" }, method = RequestMethod.GET)
    public String homePage(ModelMap model) {
        String user = getPrincipal();
        model.addAttribute("greeting", "Hi, Welcome to HRM");
        model.addAttribute("user", user);
        model.addAttribute("roles", initializeProfiles());
    return "welcome";
    }

    @RequestMapping(value = "/login", method = RequestMethod.GET)
    public String loginPage() {
        return "login";
    }

    @RequestMapping(value="/logout", method = RequestMethod.GET)
    public String logoutPage (HttpServletRequest request, HttpServletResponse response) {
        Authentication auth = SecurityContextHolder.getContext().getAuthentication();
        if (auth != null){    
            new SecurityContextLogoutHandler().logout(request, response, auth);
        }
    return "redirect:/login?logout";
    }

    private String getPrincipal(){
        String userName = null;
        Object principal = SecurityContextHolder.getContext().getAuthentication().getPrincipal();

        if (principal instanceof UserDetails) {
            userName = ((UserDetails)principal).getUsername();
        } else {
            userName = principal.toString();
        }
        return userName;
    }
(...)
}

旧的login.jsp转录如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="include/include.jsp"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Login page</title>
        <%@include file="include/imports.jsp"%>
    </head>

    <body>
        <div id="mainWrapper">
            <div class="login-container">
                <div class="login-card">
                    <div class="login-form">
                        <c:url var="loginUrl" value="/login" />
                        <form action="${loginUrl}" method="post" class="form-horizontal">
                            <c:if test="${param.error != null}">
                                <div class="alert alert-danger">
                                    <p>Invalid username and password.</p>
                                </div>
                            </c:if>
                            <c:if test="${param.logout != null}">
                                <div class="alert alert-success">
                                    <p>You have been logged out successfully. </p>
                                </div>
                            </c:if>
                            <div class="input-group input-sm">
                                <label class="input-group-addon" for="username"><i class="fa fa-user"></i></label>
                                <input type="text" class="form-control" id="username" name="ssoId" placeholder="Enter Username" required>
                            </div>
                            <div class="input-group input-sm">
                                <label class="input-group-addon" for="password"><i class="fa fa-lock"></i></label> 
                                <input type="password" class="form-control" id="password" name="password" placeholder="Enter Password" required>
                            </div>
                            <input type="hidden" name="${_csrf.parameterName}"  value="${_csrf.token}" />

                            <div class="form-actions">
                                <input type="submit"
                                class="btn btn-block btn-primary btn-default" value="Log in">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </body>
</html>

新login.html转录如下：

<!DOCTYPE html><html>
<head>
<meta charset="utf-8"></meta>
<title>Login Page</title>

<meta name="description" content="login page" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- <link rel="imports" href="include/imports.html" /> -->

<link rel="shortcut icon" href="assets/img/favicon.png"
type="image/x-icon" />

<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link id="bootstrap-rtl-link" href="" rel="stylesheet" />
<link href="assets/css/font-awesome.min.css" rel="stylesheet" />

<link
href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300"
rel="stylesheet" type="text/css" />

<link id="beyond-link" href="assets/css/beyond.min.css" rel="stylesheet" />
<link href="assets/css/demo.min.css" rel="stylesheet" />
<link href="assets/css/animate.min.css" rel="stylesheet" />
<link id="skin-link" href="" rel="stylesheet" type="text/css" />

<script src="assets/js/skins.min.js" ></script>

<script src="assets/js/jquery-2.0.3.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/slimscroll/jquery.slimscroll.min.js"></script>

<script src="assets/js/beyond.js"></script>

</head>

<body>
    <div class="login-container animated fadeInDown">
        <div class="loginbox bg-white">
            <div class="loginbox-title">SIGN IN</div>

            <div class="loginbox-textbox">
                <input type="text" class="form-control" placeholder="Username"></input>
            </div>
            <div class="loginbox-textbox">
                <input type="password" class="form-control" placeholder="Password"></input>
            </div>
            <div class="loginbox-forgot">
                <a href="">Forgot Password?</a>
            </div>
            <div class="loginbox-submit">
                <input type="button" class="btn btn-primary btn-block" value="Login"></input>
            </div>
            <div class="loginbox-signup">
                <a href="register.html">Sign Up With Email</a>
            </div>
        </div>
    </div>
</body>
</html>

我真的不熟悉Thymeleaf和HTML5如何处理请求。在JSP表单上，操作是显式的，提交类型按钮或链接将访问控制器上的POST方法并处理请求。但是如何将视图（Thymeleaf + HTML5）绑定到控制器（Spring）层？

Answer 1

查看代码，您的表单中包含在JSP模板中指定的操作和方法属性，但您在Thymeleaf模板中完全缺少表单。您应该能够使用th：attr，th：action或th：方法属性重新创建相同的表单。使用正确映射的请求，您的控制器应该处理它没有问题。

有关详细信息，您可以查看Thymeleaf文档的第5部分： http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#setting-attribute-values

如何使用Thymeleaf绑定HTML5和SpringMVC 4？

1 个答案: