1. 导入静态资源及模板
导入静态资源及模板
2. 写Controller层处理页面跳转以及处理请求
-
写登录页和首页的跳转
@Controller public class indexController { // ================================== 页面跳转 ================================== @GetMapping({"/", "/login.html"}) public String loginPage() { return "login"; } @GetMapping("/main.html") public String mainPage() { return "main"; } // ================================== 页面跳转 ================================== } -
处理登录请求(简略版)
@Controller public class indexController { // ================================== 处理请求 ================================== @PostMapping("/login") public String login() { return "redirect:/main.html"; } // ================================== 处理请求 ================================== } -
使用
thymeleaf修改form表单提交请求的地址首先要引入
thymeleaf的命名空间，这样IDEA写代码的时候就能够有提示<html xmlns:th="http://www.thymeleaf.org">修改form表单提交请求的地址到
Controller层中的/login/请求<form class="form-signin" action="#" method="post" th:action="@{/login}">
3. 用户实体类
-
为了方便测试提交表单的一个简易的验证登录的效果，先写一个实体类，并且让前端提交表单的属性名和实体类的属性名对应上，这样的话SpringMVC能够自动装配实体类的数据
@Data public class User { private String userName; private String password; }
4. 简单的验证登录逻辑
- 一般来说验证登录这种权限控制的事情应该交给过滤器(拦截器)来做，这里为了简便，先在Controller中处理，以后再用拦截器
/**
* 处理登录请求 -- 简易版，未使用到数据库
*
* @param user 根据前端表单提交的数据，SpringBoot 会自动装配信息到 user 对象中
* @param session 记录用户已登录
* @param model 往这里面写的信息能在模板中拿到
*/
@PostMapping("/login")
public String login(User user, HttpSession session, Model model) {
// 简易的验证逻辑，用户名非空且密码是 abc123 即可登录
if (!StringUtils.isEmptyOrWhitespace(user.getUserName()) && "abc123".equals(user.getPassword())) {
// 把 user 存入 session
session.setAttribute("loginUser", user);
// 重定向到首页
return "redirect:/main.html";
} else {
// 登陆失败 -- 转发到登录页，并在 model 中写入错误信息，这样前端页面就能够显示错误信息
model.addAttribute("errMsg", "用户名或密码错误");
return "login";
}
}
-
在前端页面展示错误信息
<!--使用 thymeleaf 的行内表达式来获取错误信息--> <strong style="color: #5384be">[[${errMsg}]]</strong> <input type="text" class="form-control" name="userName" placeholder="用户名" autofocus> <input type="password" class="form-control" name="password" placeholder="密码">
效果
登录失败
5. 检查 session 限制首页的访问
- 如果没有
session，即用户尚未登录，那么就应当转发回登陆页面而不会重定向到首页 - 也就是要修改跳转到首页的请求
/main.html
@GetMapping("/main.html")
public String mainPage(HttpSession session, Model model) {
User loginUser = (User) session.getAttribute("loginUser");
if (loginUser == null) {
model.addAttribute("errMsg", "请重新登录");
// 这里要用转发，不能用重定向，因为只有转发才能获取到 model 里的值
return "login";
}
return "main";
}
效果
未登录直接访问首页
6. 修改首页的用户名展示
- model中设置用户名，然后前端页面用
thymeleaf的模板语法去获取数据并展示
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<img src="images/photos/user-avatar.png" alt=""/>
[[${session.loginUser.userName}]]
<span class="caret"></span>
</a>
效果
修改首页的用户名展示
