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

小灰灰 2024-04-08 10:23 5阅读 0赞

## 前言 ##

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

## 一、环境的搭建 ##

导入1.0版本的项目[Java实现网页版登录注册系统-Java文档类资源-CSDN文库][Java_-Java_-CSDN]可参考[【JAVA】网页版登录注册系统\_Lx\_Hy\_的博客-CSDN博客][JAVA_Lx_Hy_-CSDN]

![86403ec1c25a4ac3b6cdd2d136ea409c.png][] ![91ca8541c1984dd4bb5a130bc2cf8d92.png][]

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

![2e6729ab4f1349859a66a6c0911a8731.png][]

## 二、功能完善及优化 ##

### 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博客][JAVA_Lx_Hy_-CSDN 1]）

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技术保存的用户名和密码

### 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博客][JAVA_Lx_Hy_-CSDN 1]）

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博客][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博客][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);
        }

**【效果】**

![7b311303b0f241e3a51b990a74e410de.png][]

### 5、登录拦截功能 ###

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

> 1、使用过滤器Filter对可访问页面进行过滤（可参考[【JAVA】Filter&Listener\_Lx\_Hy\_的博客-CSDN博客][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-Java_-CSDN]

[Java_-Java_-CSDN]: https://download.csdn.net/download/huihu__/86354450?spm=1001.2014.3001.5503
[JAVA_Lx_Hy_-CSDN]: https://blog.csdn.net/huihu__/article/details/126211921?spm=1001.2014.3001.5501
[86403ec1c25a4ac3b6cdd2d136ea409c.png]: https://img-blog.csdnimg.cn/86403ec1c25a4ac3b6cdd2d136ea409c.png
[91ca8541c1984dd4bb5a130bc2cf8d92.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/ed3dc266f8904ae0a689050b00466e54.png
[Vue.js_axios.js_-Javascript_-CSDN]: https://download.csdn.net/download/huihu__/86404973
[2e6729ab4f1349859a66a6c0911a8731.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/48b984919a5d42a4b0f7a9fc79c7cd8e.png
[JAVA_Lx_Hy_-CSDN 1]: https://blog.csdn.net/huihu__/article/details/126298968?spm=1001.2014.3001.5501
[JAVA_Request_Response_Lx_Hy_-CSDN]: https://blog.csdn.net/huihu__/article/details/126162435?spm=1001.2014.3001.5501
[JAVA_AJAX_JSON_Lx_Hy_-CSDN]: https://blog.csdn.net/huihu__/article/details/126320066?spm=1001.2014.3001.5501
[7b311303b0f241e3a51b990a74e410de.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/cd3f5cba88364747b248f9f7dc6c17ee.png
[JAVA_Filter_Listener_Lx_Hy_-CSDN]: https://blog.csdn.net/huihu__/article/details/126315728?spm=1001.2014.3001.5501
[Java_2.0-Java_-CSDN]: https://download.csdn.net/download/huihu__/86405291