登录页布局
Controller
package com.ooqui.gaming.server.web.admin.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class LoginController {
/**
* 跳转登录页面
* @return
*/
@RequestMapping(value = {"", "login"}, method = RequestMethod.GET)
public String login() {
return "login";
}
/**
* 跳转到首页
* @return
*/
@RequestMapping(value = "main", method = RequestMethod.GET)
public String main() {
return "main";
}
/**
* 登录业务
* @param email 邮箱
* @param password 密码
* @return
*/
@RequestMapping(value = "login", method = RequestMethod.POST)
public String login(String email, String password) {
if ("admin@admin.com".equals(email) && "admin".equals(password)) {
return "redirect:main";
} else {
return "login";
}
}
}
HTML
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!-- begin::Head -->
<head>
<meta charset="utf-8" />
<title>
管理后台 - 登录
</title>
<meta name="description" content="Latest updates and statistic charts" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!--begin::Base Styles -->
<link href="/assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
<link href="/assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
<!--end::Base Styles -->
<link rel="shortcut icon" href="/assets/demo/default/media/img/logo/favicon.ico" />
</head>
<!-- end::Head -->
<body class="m--skin- m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
<div class="m-grid m-grid--hor m-grid--root m-page">
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--hor m-login m-login--signin m-login--2 m-login-2--skin-2" id="m_login" style="background-image: url(/assets/app/media/img//bg/bg-3.jpg);">
<div class="m-grid__item m-grid__item--fluid m-login__wrapper">
<div class="m-login__container">
<div class="m-login__logo">
<a href="#"> <img src="/assets/app/media/img/logos/logo-1.png" /> </a>
</div>
<div class="m-login__signin">
<div class="m-login__head">
<h3 class="m-login__title"> 欢迎登录 </h3>
</div>
<form class="m-login__form m-form" action="/login" method="post">
<div class="form-group m-form__group">
<input class="form-control m-input" type="text" placeholder="邮箱" name="email" autocomplete="off" />
</div>
<div class="form-group m-form__group">
<input class="form-control m-input m-login__form-input--last" type="password" placeholder="密码" name="password" />
</div>
<div class="row m-login__form-sub">
<div class="col m--align-left m-login__form-left">
<label class="m-checkbox m-checkbox--focus"> <input type="checkbox" name="remember" /> 记住我 <span></span> </label>
</div>
<div class="col m--align-right m-login__form-right">
<a href="javascript:;" id="m_login_forget_password" class="m-link"> 忘记密码 ? </a>
</div>
</div>
<div class="m-login__form-action">
<button id="m_login_signin_submit" class="btn btn-focus m-btn m-btn--pill m-btn--custom m-btn--air m-login__btn m-login__btn--primary"> 登录 </button>
</div>
</form>
</div>
<div class="m-login__forget-password">
<div class="m-login__head">
<h3 class="m-login__title"> 忘记密码 ? </h3>
<div class="m-login__desc">
输入邮箱重置密码
</div>
</div>
<form class="m-login__form m-form" action="">
<div class="form-group m-form__group">
<input class="form-control m-input" type="text" placeholder="邮箱" name="email" id="m_email" autocomplete="off" />
</div>
<div class="m-login__form-action">
<button id="m_login_forget_password_submit" class="btn btn-focus m-btn m-btn--pill m-btn--custom m-btn--air m-login__btn m-login__btn--primaryr"> 重置密码 </button>
<button id="m_login_forget_password_cancel" class="btn btn-outline-focus m-btn m-btn--pill m-btn--custom m-login__btn"> 取消 </button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!--begin::Base Scripts -->
<script src="/assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
<script src="/assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
<!--end::Base Scripts -->
<!--begin::Page Snippets -->
<script src="/assets/snippets/pages/user/login.js" type="text/javascript"></script>
<!--end::Page Snippets -->
</body>
</html>
注意
login.js 需要屏蔽第 208 行 handleSignInFormSubmit();