day1.4.1.登录web登录功能实现

目标：

实现一个登录功能，用户输入用户名密码和验证码，如果输入不合法或查找出错在页面上显示提示信息

后端生成随机验证码并在前端通过图片显示，用户点击图片切换验证码（通过ajax局部刷新）

开发准备:

项目管理：maven

前端：html+css+js+jquery+jstl+el

后端：jsp

开发环境：IDEA+jdk1.8+tomcat 8.0.531+MySql5.1

开发思路:

开发步骤：

TestUserservice:写测试代码

UserService：login（User user）登录，findUserByName(String name)根据用户名查找用户

User：记录用户数据

Responseinfo：用户记录响应信息

UserDao：定义dao接口

UserDao.xml：写sql语句实现dao接口

UserServlet：测试通过后见测试代码加入并进行增减实现业务逻辑

login.jsp：用于获取页面数据，发送Ajax请求给后端，将后端数据显示在前端页面上

代码实现：

TestUserService

//测试
public class TestUserService {
   @Test
    public void test01() throws JsonProcessingException {
       UserService userService = new UserService();
       User user = new User();
       user.setUsername("jack1234");
       user.setPassword("123456789");

       int code = userService.login(user);

       ResponseInfo responseInfo = new ResponseInfo();
       responseInfo.setCode(code);
       if(code == -1){
            responseInfo.setData("用户不存在");
       }else if(code == 1){
           responseInfo.setData("登录成功");
       }else{
           responseInfo.setData("密码错误");
       }
       String json = new ObjectMapper().writeValueAsString(responseInfo);
       System.out.println(json);
   }
}

UserService：

public class UserService {

    public int login(User user) {

        UserDao userDao = MySessionUtils2.getMapper(UserDao.class);
        User u = userDao.findByName(user.getUsername());
        if (u == null) {
            return -1; //没这个用户
        } else {
            if (u.getUsername().equals(user.getUsername()) && u.getPassword().equals(user.getPassword())) {
                return 1;//登录成功
            } else {
                return -2;//账号或者密码出错
            }
        }
    }
    
}

User：

//用户数据
public class User {
    private int uid;
    private String username;
    private String password;
    private Date birthday;
    private String name;
    private String sex;
    private String telephone;
    private String email;
    private String status;
    private String code;

Responeinfo:

public class ResponseInfo {
    private int code;
    private Object data;

UserDao：

public interface UserDao {
    //select * from tab_user where username = 'jackhello'
    User findByName(String name);
}

UserDao.xml：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="jsu.lcw.dao.UserDao">
    <select id="findByUserName" parameterType="string" resultType="user">
         select * from tab_user where username=#{username}
    </select>
</mapper>

UserServlet：

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

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {

        //1，获取判断验证码、
        String uri = request.getRequestURI();//访问路径
        //search  or  findByCid
        System.out.println(uri);
        int start = uri.lastIndexOf('/') + 1;
        String methodName = uri.substring(start);
        //根据名字调用当前类的其他方法
        System.out.println(methodName);
        if ("login".equals(methodName)) {
            login(request, response);
        }
    }
    public void login(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //从请求中获取check1码
        String check1 = request.getParameter("check");
        //从session中获取check2码，并删除
        String check2 = (String) request.getSession().getAttribute("CHECKCODE_SERVER");
        request.getSession().removeAttribute("CHECKCODE_SERVER");

        //比较check1 与 check2
        if (check1 == null || !check1.equalsIgnoreCase(check2)) {
            ResponseInfo responseInfo = new ResponseInfo();
            responseInfo.setCode(-4);
            responseInfo.setData("登录失败，验证码出错");
            String json = new ObjectMapper().writeValueAsString(responseInfo);
            response.getWriter().println(json);
            return;
        }


        //2，校验用户名和密码

        //获取请求参数
        Map<String, String[]> map = request.getParameterMap();
        User u = new User();
        try {
            //参1 javaBean 参2 map
            BeanUtils.populate(u, map);//将map里面所有的参数赋值给javaBean
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        //处理参数
        UserService userService = new UserService();
        int code = userService.login(u);
        //响应给浏览器 ajax 是响应json给浏览器就可以
        ResponseInfo responseInfo = new ResponseInfo();
        responseInfo.setCode(code);
        if (code == -1) {
            responseInfo.setData("用户不存在");
        } else if (code == 1) {
            responseInfo.setData("登录成功");
            //查找出用户数据
            User user = userService.findByName(u.getUsername());
            //保存到session中
            request.getSession().setAttribute("user", user);
        } else {
            responseInfo.setData("密码错误");
        }

        //转成json
        String json = new ObjectMapper().writeValueAsString(responseInfo);
        response.getWriter().println(json);
    }
}

login.jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>login</title>
    <!--导入jquery-->
    <script src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" >
        function checkUserName(){
            //获取输入框的值
            var username = $("#username").val();

            //正则表达式  定义一个规则，执行test方法，符合规则返回true，否则返回false
            var reg =  /^\w{8,20}$/ ;

            var flag = reg.test(username); //判断

            //如果符合要求，设置输入框边框是正常，否则设置红色
            if(flag){
                $("#username").css("border","");
            }else{
                $("#username").css("border","1px solid red");
            }

            return flag;
        }

        function checkPassword(){
            //判断密码输入框的值是否合法
            var username = $("#password").val();
            //定义正则规则检验
            var reg =  /^\w{8,20}$/ ;

            var flag = reg.test(username); //判断
            if(flag){
                $("#password").css("border","");//无色框
            }else{
                $("#password").css("border","1px solid red");//红框
            }
            return flag;
        }
        $(function () {
            $("#errorMsg").html("");
            // 判断两个输入框架的是否格式正确
            $("#username").blur(checkUserName);//输入框失去焦点
            // 如果正确，使用ajax发送请求到servlet
            $("#password").blur(checkPassword);

            $("#btn_login").click(function () {
                //要求两个值正确，我们才做提交
                if(checkUserName()&&checkPassword()){
                    var un = $("#username").val()
                    var pw = $("#password").val()
                    var check = $("#check").val()

                    //alert(un+pw)
                    //写提交
                    $.ajax({
                        url:"user/login",
                        async:true,
                        data:$("#loginForm").serialize(),
                        type:"post",
                        dataType:"json",
                        success:function (data) {

                            if(1 == data.code){
                                //跳转到主页 index.jsp
                                $("#errorMsg").html("");
                                window.location="index.jsp"
                            }else{
                                //显示在界面上
                                $("#errorMsg").html(data.data);
                                //提交一次验证码刷新一次
                                $("#verify_img").attr("src", "${pageContext.request.contextPath}/checkCode?" + new Date().getTime());
                            }
                        },
                        error:function () {
                            alert(data.data)
                            alert("服务器发生了错误")
                        }
                    });
                }
            })
        })
    </script>
</head>
<body>
<div class="login_inner">

    <!--登录错误提示消息-->
    <div id="errorMsg" class="alert alert-danger"></div>
    <form id="loginForm" action="" method="post" accept-charset="utf-8">
        <input id="username" name="username" type="text" placeholder="请输入账号" autocomplete="off">
        <br/>
        <input id="password" name="password" type="text" placeholder="请输入密码" autocomplete="off">
        <div class="verify">
            <input id="check" name="check" type="text" placeholder="请输入验证码" autocomplete="off">
            <span><img id="verify_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>
        <div class="submit_btn">
            <button id="btn_login" type="button">登录</button>
        </div>
    </form>
</div>
</body>
</html>