MyBatis 登录改进

改进jsp页面

思路：
用户登录后，显示用户名信息和登出等相关操作
例如：

在原jsp页面引入其他jsp内容

方法：
<%@ include file="relativeURI"%>
<jsp:include page="header.jsp"/>
在login.jsp页面引入header.jsp页面
login.jsp前端代码：

<!--引入头部-->
<div id="header">
    <%@include file="header.jsp"%>
</div>

问题：如何获取用户登录的信息并显示出来？

1.登录成功时，将用户信息储存在session中
2.将用户信息从session取出
3.将用户信息取出用el表达式和jstl

方法：
1.导入依赖
pom.xml

<dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>

2.改进LoginServlet
src\main\java\com\xjj\web\servlet\LoginServlet.java

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //（1）获取数据
        Map<String, String[]> map = request.getParameterMap();//所有的参数都会在map中
        User user=new User();
        try {
            //参数1 javabean，参数2 map
            BeanUtils.populate(user,map);//将map里面所有的参数赋值给javabean
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        //（2）处理数据
        UserService userService=new UserService();
        int code=  userService.login(user);
        ResopnseInfo   info=new ResopnseInfo();
        info.setCode(code);
        if (code==-1){
            info.setData("用户不存在");
        }else if (code==1){
            info.setData("登录成功");
            //查找用户数据
            User user1= userService.findUserByName(user.getUsername());
            //保存到session 中

            request.getSession().setAttribute("user",user1);
        }else if(code==-2){
            info.setData("账号或密码不正确");
        }else if (code==-3){
            info.setData("账号未激活");
        }
        //转换成jason
        String json=new ObjectMapper().writeValueAsString(info);
        response.getWriter().println(json);
    }

3.详写header.jsp

<div class="login">
            <%--            将session中的用户数据取出来 --%>
            <%--            判断用户对象是否为空  如果是提示请登录，否则显示用户信息--%>
            <c:if test="${user != null}">
                <span>欢迎回来，${user.name}</span>
            </c:if>
            <c:if test="${user == null}">
                <span>您未登录，请登录</span>
            </c:if>
            <a href="myfavorite.html" class="collection">我的收藏</a>
            <a href="${pageContext.request.contextPath}/LoginOutServlet">退出</a>
        </div>

登出用户

1.创建登出Servlet
src\main\java\com\xjj\web\servlet\LoginOutServlet.java
代码：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //查找session
        HttpSession session = request.getSession();
        //让session销毁或者过期
        session.invalidate();
        //重定向 login.jsp
        response.sendRedirect(request.getContextPath()+"/login.jsp");
    }

2.前端代码
header.jsp

<a href="${pageContext.request.contextPath}/LoginOutServlet">退出</a>

添加图片验证码登录

1.原因：
防止暴力登录

2.流程:
后台程序ASevlet产生随机字符 code1
随机字符保存在session中 code1
随机字符再转成图片响应给img标签
当用户提交表单时也同时提交输入的验证码 code2
后台程序B比较两个随机字符串是否相等，不相等则验证码出错。

3.代码：
后台：
src\main\java\com\xjj\web\servlet\CheckCodeServlet.javal

package com.xjj.web.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.util.BeanUtil;
import com.xjj.domain.ResopnseInfo;
import com.xjj.domain.User;
import com.xjj.service.UserService;
import org.apache.commons.beanutils.BeanUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;

@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //（1）获取数据
        Map<String, String[]> map = request.getParameterMap();//所有的参数都会在map中
        User user=new User();
        try {
            //参数1 javabean，参数2 map
            BeanUtils.populate(user,map);//将map里面所有的参数赋值给javabean
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        //（2）处理数据
        UserService userService=new UserService();
        int code=  userService.login(user);
        ResopnseInfo   info=new ResopnseInfo();
        info.setCode(code);
        if (code==-1){
            info.setData("用户不存在");
        }else if (code==1){
            info.setData("登录成功");
            //查找用户数据
            User user1= userService.findUserByName(user.getUsername());
            //保存到session 中

            request.getSession().setAttribute("user",user1);
        }else if(code==-2){
            info.setData("账号或密码不正确");
        }else if (code==-3){
            info.setData("账号未激活");
        }
        //转换成jason
        String json=new ObjectMapper().writeValueAsString(info);
        response.getWriter().println(json);
    }

}

前端
login.jsp

<div class="verify">
                    <input name="check" type="text" placeholder="请输入验证码" autocomplete="off">
                    <span><img src="${pageContext.request.contextPath}/checkCode" alt="" onclick="changeCheckCode(this)"></span>
                    <script type="text/javascript">
                        //图片点击事件
                        function changeCheckCode(img) {
                            img.src="${pageContext.request.contextPath}/checkCode?"+new Date().getTime();
                        }
                    </script>
                </div>

修改post请求，添加验证码

后台进行处理
src\main\java\com\xjj\web\servlet\LoginServlet.java

 //从请求中获取check1码
        String check1=request.getParameter("check");
        //从session获取check2码
        String check2=(String) request.getSession().getAttribute("CHECKCODE_SERVER");
        System.out.println(check1);
        System.out.println(check2);

        //从session中删除check2码
        request.getSession().removeAttribute("CHECKCODE_SERVER");
        //比较两个码是否正确

        if(check1==null||!check1.equalsIgnoreCase(check2)){
            //验证码忽略大小写
            ResopnseInfo resopnseInfo=new ResopnseInfo();
            resopnseInfo.setCode(-4);
            resopnseInfo.setData("验证码出错");

            //json
            String json=new ObjectMapper().writeValueAsString(resopnseInfo);
            response.getWriter().println(json);
            return;
        }

将数据转换为json发送到浏览器

//转换成jason
        String json=new ObjectMapper().writeValueAsString(info);
        response.getWriter().println(json);

serialize函数

(1)jquery对象serialize函数
将表单数据拼接为key1=val1&key2=val2
表单对象.serialize()
(2)简化提交代码
(3)ajax提交函数
$post("registerServlet", $(this).serialize,function(data)){ }