登录
一、页面效果
地址:http://localhost:8080/tmall_ssm/loginPage
二、login.jsp
<%--
Created by IntelliJ IDEA.
User:
Date: 2018/9/27
Time: 11:52
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<%@include file="../include/fore/header.jsp"%>
<%@include file="../include/fore/login/loginPage.jsp"%>
<%@include file="../include/fore/footer.jsp"%>
三、UserService
增加get(String name, String password)方法
package com.li.tmall.service;
import com.li.tmall.pojo.User;
import java.util.List;
/**
* @Author: 98050
* Time: 2018-09-20 10:50
* Feature:R
*/
public interface UserService {
/**
* 用户列表
* @return
*/
List<User> list();
/**
* 在查询订单时,为订单项中的user字段赋值
* @param id
* @return
*/
User get(Integer id);
/**
* 增加用户
* @param user
*/
void add(User user);
/**
* 判断用户名是否重复
* @param name
* @return
*/
boolean isExist(String name);
/**
* 登录时用户验证
* @param name
* @param password
* @return
*/
User get(String name,String password);
}
四、UserServiceImpl
@Override
public User get(String name, String password) {
UserExample example = new UserExample();
example.createCriteria().andNameEqualTo(name).andPasswordEqualTo(password);
List<User> users = userMapper.selectByExample(example);
if (!users.isEmpty()){
return users.get(0);
}
return null;
}
五、loginPage.jsp
登陆业务页面,用于向服务器提交账号和密码
1. 与registerPage.jsp类似的,用于显示登录密码错误
<c:if test="${!empty msg}">
$("span.errorMessage").html("${msg}");
$("div.loginErrorMessageDiv").show();
</c:if>
2. 其他js函数是用于为空验证
<%--
Created by IntelliJ IDEA.
User:
Date: 2018/9/27
Time: 13:07
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<script>
$(function(){
<c:if test="${!empty msg}">
$("span.errorMessage").html("${msg}");
$("div.loginErrorMessageDiv").show();
</c:if>
$("form.loginForm").submit(function(){
if(0===$("#name").val().length||0===$("#password").val().length){
$("span.errorMessage").html("请输入账号密码");
$("div.loginErrorMessageDiv").show();
return false;
}
return true;
});
$("form.loginForm input").keyup(function(){
$("div.loginErrorMessageDiv").hide();
});
var left = window.innerWidth/2+162;
$("div.loginSmallDiv").css("left",left);
})
</script>
<div id="loginDiv" style="position: relative">
<div class="simpleLogo">
<a href="forehome"><img src="${pageContext.request.contextPath}/img/site/simpleLogo.png"></a>
</div>
<img id="loginBackgroundImg" class="loginBackgroundImg" src="${pageContext.request.contextPath}/img/site/loginBackground.png">
<form class="loginForm" action="forelogin" method="post">
<div id="loginSmallDiv" class="loginSmallDiv">
<div class="loginErrorMessageDiv">
<div class="alert alert-danger" >
<button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
<span class="errorMessage"></span>
</div>
</div>
<div class="login_acount_text">账户登录</div>
<div class="loginInput " >
<span class="loginInputIcon ">
<span class=" glyphicon glyphicon-user"></span>
</span>
<input id="name" name="name" placeholder="手机/会员名/邮箱" type="text">
</div>
<div class="loginInput " >
<span class="loginInputIcon ">
<span class=" glyphicon glyphicon-lock"></span>
</span>
<input id="password" name="password" type="password" placeholder="密码" type="text">
</div>
<span class="text-danger">不要输入真实的天猫账号密码</span><br><br>
<div>
<a class="notImplementLink" href="#nowhere">忘记登录密码</a>
<a href="registerPage" class="pull-right">免费注册</a>
</div>
<div style="margin-top:20px">
<button class="btn btn-block redButton" type="submit">登录</button>
</div>
</div>
</form>
</div>
六、ForeController.login()
loginPage.jsp的form提交数据到路径 forelogin,导致ForeController.login()方法被调用
1. 获取账号密码
2. 把账号通过HtmlUtils.htmlEscape进行转义
3. 根据账号和密码获取User对象
- 如果对象为空,则服务端跳转回login.jsp,也带上错误信息,并且使用 loginPage.jsp中的办法显示错误信息
- 如果对象存在,则把对象保存在session中,并客户端跳转到首页"forehome"
注:为什么要用 HtmlUtils.htmlEscape? 因为注册的时候,ForeController.register(),就进行了转义,所以这里也需要转义。
@RequestMapping("forelogin")
public String login(@RequestParam("name") String name, @RequestParam("password") String password, Model model, HttpSession session){
name = HtmlUtils.htmlEscape(name);
User user = userService.get(name,password);
if (user == null){
model.addAttribute("msg","账号密码错误!");
return "fore/login";
}
session.setAttribute("user",user);
return "redirect:forehome";
}
退出
通过访问退出路径:http://127.0.0.1:8080/tmall_ssm/forelogout
导致ForeController.logout()方法被调用
1. 在session中去掉"user":session.removeAttribute("user");
2. 客户端跳转到首页:return "redirect:forehome";
@RequestMapping("forelogout")
public String logout(HttpSession session){
session.removeAttribute("user");
return "redirect:forehome";
}