天猫整站（简易版）SSM（八）无需登录即可使用的功能

登录

一、页面效果

地址：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";
    }