前言

JAVA实现网页的登录与注册2.0版

一、环境的搭建

导入1.0版本的项目Java实现网页版登录注册系统-Java文档类资源-CSDN文库可参考【JAVA】网页版登录注册系统_Lx_Hy_的博客-CSDN博客

创建如上图框内所示的文件及文件夹并且将login.html和register.html中代码复制到相对应的jsp文件中
在js文件夹中添加（这俩文件在可在官网下载也可在资源库下载Vue.js+axios.js文件-Javascript文档类资源-CSDN文库）

二、功能完善及优化

1、登录功能

1、在UserService中添加登录功能中调用数据库查询部分的方法

    //登录功能
    public User login(String username, String password) {
        //获取SqlSession
        SqlSession sqlSession = SqlSessionFactoryUtils.getSqlSessionFactory().openSession();
        //获取UserMapper
        UserMapper mapper = sqlSession.getMapper(UserMapper.class);
        //调用方法
        User user = mapper.selectByConditionSingle_Log(username, password);
        //释放资源
        sqlSession.close();
        return user;
    }

2、使用cookie-session技术优化LoginServlrt中的代码并且实现了客户端保存登录密码的功能（可参考【JAVA】会话跟踪技术_Lx_Hy_的博客-CSDN博客）

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取用户名和密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        //获取复选框数据
        String remember = request.getParameter("remember");

        //调用service
        User user = service.login(username, password);
        //判断
        if(user!=null){
            //登录成功，跳转到查询信息
            //登录成功后的user对象，存储到session
            //判断用户是否勾选记住我
            if ("1".equals(remember)){
                //勾选
                //创建Cookie对象
                Cookie c_username=new Cookie("username",username);
                Cookie c_password=new Cookie("password",password);
                //设置Cookie存活时间
                c_username.setMaxAge(60*60);
                c_password.setMaxAge(60*60);
                //发送
                response.addCookie(c_username);
                response.addCookie(c_password);
            }
            HttpSession session = request.getSession();
            session.setAttribute("user",user);

            String contextPath = request.getContextPath();
            response.sendRedirect(contextPath+"/success.jsp");
        }else {
            //登陆失败，跳转到login.jsp
            //错误信息存储到request
            request.setAttribute("login_msg","用户名或密码错误");
            //跳转到login.jsp
            request.getRequestDispatcher("/login.jsp").forward(request,response);

        }

3、在login.jsp中改变用户名和密码的value可使用cookie技术保存的用户名和密码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--页首插入这句--%>
<%@page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="css/login.css" rel="stylesheet">
</head>

<body>
<div id="loginDiv" style="height: 350px">
    <form action="/WebServer2/loginServlet" id="form">
        <h1 id="loginMsg">LOGIN IN</h1>
        <div id="errorMsg">${login_msg} ${register_msg}</div>
        <p>Username:<input id="username" name="username" value="${cookie.username.value}" type="text"></p>

        <p>Password:<input id="password" name="password" value="${cookie.password.value}" type="password"></p>
        <p>Remember:<input id="remember" name="remember" value="1"  type="checkbox"></p>
        <div id="subDiv">
            <input type="submit" class="button" value="login up">
            <a href="register.jsp">没有账号？</a>
        </div>
    </form>
</div>

</body>
</html>

2、注册功能

1、在UserService中添加注册功能中调用数据库查询及添加部分的方法

    //注册功能
    public boolean register(User user) {
        //获取SqlSession
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //获取UserMapper
        UserMapper mapper = sqlSession.getMapper(UserMapper.class);
        //判断用户是否存在
        User u = mapper.selectByUsername(user.getUsername());
        //调用方法
        if (u == null) {
            //用户名不存在
            mapper.add(user);
            sqlSession.commit();
        }
        sqlSession.close();
        return u == null;
    }

2、使用cookie-session技术优化RegisterServlrt中的代码（可参考【JAVA】会话跟踪技术_Lx_Hy_的博客-CSDN博客）

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取用户名和密码的数据
        String username = request.getParameter("username");
        boolean flag1 = service.checkUsername(username);
        String password = request.getParameter("password");
        //用户的封装
        User user = new User();
        user.setUsername(username);
        user.setPassword(password);
        //获取用户输入的验证码
        String checkCode = request.getParameter("checkCode");
        //程序输入的验证码
        HttpSession session = request.getSession();
        String checkCodeGen = (String) session.getAttribute("checkCodeGen");

        //比对验证码
        if (!checkCodeGen.equalsIgnoreCase(checkCode)) {
            //不允许注册
            request.setAttribute("register_msg", "验证码错误");
            request.getRequestDispatcher("/register.jsp").forward(request, response);
            return;
        }
        //调用service注册
        boolean flag = service.register(user);
        //判断是否注册成功
        if (flag) {
            //注册成功，跳转登陆页面
            request.setAttribute("register_msg", "注册成功，请登录");
            request.getRequestDispatcher("/login.jsp").forward(request, response);
        } else {
            //注册失败，跳转注册页面
            //request.setAttribute("register_msg","用户名已存在");
            request.getRequestDispatcher("/register.jsp").forward(request, response);
        }
    }

3、注册实时检查功能

（用户在输入完用户名之后实时查询用户名是否存在）

1、在UserService中添加注册功能中调用数据库查询部分的方法

    //注册检查功能
    public boolean checkUsername(String username){
        //获取SqlSession
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //获取UserMapper
        UserMapper mapper = sqlSession.getMapper(UserMapper.class);
        //判断用户是否存在
        User u = mapper.selectByUsername(username);
        //判断
        if(u==null){
            return false;
        }
        return true;
    }

2、使用Request&Response技术实现SelectUserServlet中的代码（可参考【JAVA】Request&Response_Lx_Hy_的博客-CSDN博客）

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        boolean flag1 = service.checkUsername(username);
        if (flag1) {
            request.setAttribute("register_msg", "用户名已存在");
        }
        response.getWriter().write("" + flag1);
    }

3、在register.jsp使用axios技术在用户名输入框失去焦点事件时就进行用户名的重复判断（可参考【JAVA】AJAX&JSON_Lx_Hy_的博客-CSDN博客）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--页首插入这句--%>
<%@page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.html">登录</a>
    </div>
    <form id="reg-form" action="/WebServer2/selectUserServlet" method="post">
        <table>
            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名已存在</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>验证码</td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode">
                    <img id="checkCodeImg" src="/WebServer2/checkCodeServlet">
                    <a href="#" id="changeImg">看不清？</a>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>
</div>
<script src="js/axios-0.18.0.js"></script>
<script>
    //给用户名输入框绑定 失去焦点事件
    document.getElementById("username").onblur = function () {
        //发送ajax请求
        let username = this.value;
        axios({
            method: "get",
            url: "http://localhost:8080/WebServer2/selectUserServlet?username="+ username,
        }).then(function (resp) {
           if(resp.data===true){
               //用户名存在，显示提示信息
               document.getElementById("username_err").style.display = '';
           } else {
               //用户名不存在，清除提示信息
               document.getElementById("username_err").style.display = 'none';
           }
        })
    }
</script>
<script>
    //点击看不清按钮
    document.getElementById("changeImg").onclick = function () {
        document.getElementById("checkCodeImg").src = "/WebServer2/checkCodeServlet?" + new Date().getMilliseconds();
    }
</script>
</body>
</html>

4、验证码功能

1、利用CheckCodeUtil工具生成验证码（完整的工具包在资源中）

    /**
     * 生成随机验证码文件,并返回验证码值 (生成图片形式，用的较少)
     *
     * @param width 图片宽度
     * @param height 图片高度
     * @param os 输出流
     * @param verifySize 数据长度
     * @return 验证码数据
     * @throws IOException
     */
    public static String outputVerifyImage(int width, int height, File os, int verifySize) throws IOException {
        String verifyCode = generateVerifyCode(verifySize);
        outputImage(width, height, os, verifyCode);
        return verifyCode;
    }

2、在CheckCodeServlet中利用response和session生成并将验证码存入session

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //生成验证码
        ServletOutputStream os = response.getOutputStream();
        String checkCode = CheckCodeUtil.outputVerifyImage(100, 50, os, 4);
        //存入Session
        HttpSession session=request.getSession();
        session.setAttribute("checkCodeGen",checkCode);
    }

【效果】

5、登录拦截功能

（在未登录注册之前，不能对系统进行任何操作）

1、使用过滤器Filter对可访问页面进行过滤（可参考【JAVA】Filter&Listener_Lx_Hy_的博客-CSDN博客），只保留与登录注册相关的文件可以访问

    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException {
        HttpServletRequest req = (HttpServletRequest) request;
        //判断访问的资源是否和登陆注册相关
        String[] urls = {"/login.jsp", "/imgs/", "/css/", "/loginServlet", "/register.jsp", "/registerServlet", "/checkCodeServlet","/selectUserServlet"};
        //获取当前访问的资源路径
        String url = req.getRequestURL().toString();
        //循环判断
        for (String u : urls) {
            if(url.contains(u)){
                //找到了
                //放行
                chain.doFilter(request, response);
                //没找到
                return;
            }
        }
        //判断session中是否有user
        HttpSession session = req.getSession();
        Object user = session.getAttribute("user");
        //判断user是否为null
        if (user != null) {
            //登陆过了
            //放行
            chain.doFilter(request, response);
        } else {
            //没有登录
            //req.setAttribute("login_msg", "您尚未登录");
            req.getRequestDispatcher("/login.jsp").forward(request, response);
        }
    }

总结

以上就是JAVA实现网页的登录与注册的全部内容，如有问题，可以私信讨论，感谢阅读！

全部源码放在Java实现网页版登录注册系统2.0-Java文档类资源-CSDN文库

【JAVA】网页版登录注册系统2.0

前言

一、环境的搭建

二、功能完善及优化

1、登录功能

2、注册功能

3、注册实时检查功能

4、验证码功能

5、登录拦截功能

总结

猜你喜欢