登录，注册页面详解

超、凢脫俗 2022-03-16 03:42 330阅读 0赞

\#\#\#

登录页面样式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzc0MTc1_size_16_color_FFFFFF_t_70]

登录后端实现思路：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzc0MTc1_size_16_color_FFFFFF_t_70 1]  
(我后来实现的时候没有加验证码，请忽略验证码的哪块)

为了让文章更简洁，html代码我不在这里给出，需要看的话，直接去github里找login.html页面即可。

因为这里提交前端信息用到了vue（也是本项目唯一一次用到vue），所以将这个页面的js代码帖出来，并给出相关讲解。

注意我这里引用vue是引用了网页版的，如果没有联网的话是不能使用vue的。

前端逻辑大致讲完了。  
现在讲讲后端。处理login的函数在loginController.java里面

@RequestMapping("loginPage")
    //RequestMapping是一种映射，刚刚我们前端提交的地方是"/loginPage"，也就是说通过@RequestMapping,前端的信息将来到这个函数里面。
        public ResponseData login(HttpServletRequest request, User user) { 
               //直接在这里讲一下接收前端传来的数据的规则，因为前端我们定义了userName和password来存储信息，所以我们后端只要定义相同的变量名称就可以实现接收了。而我们的user实体类刚好有userName和password，所以直接放一个user对象即可（千万注意，命名一定要和前端完全一致），如果你不想用user去接收，那你就直接用(String userName,String password)去接收。
            try { 
                User dbUser = userServiceImp.getUserByName(user.getUserName());
                //先查找有没有这个用户
                System.out.println(dbUser);
                if (dbUser == null) { 
                    System.out.println("1");
                   //没有这个用户，返回错误信息
                    return new ResponseData(ExceptionMsg.LoginNameNotExists);
                } else if (!dbUser.getPassword().equals(user.getPassword())) { 
                //密码不对
                    System.out.println("2");
                    return new ResponseData(ExceptionMsg.LoginNameOrPassWordError);
                } else if (dbUser.getLocked() == User.user_locked) { 
                //这个用户被管理员锁定了，暂时不允许登录
                    System.out.println("'3");
                    return new ResponseData(ExceptionMsg.Locked);
                } else { 
                //成功,保存登录信息到数据库
                    System.out.println("'4");
                    dbUser.setLastIp(request.getRemoteAddr());
                    dbUser.setLastVisit(new Date());
    
                    userServiceImp.loginSuccess(dbUser);
                    setSessionUser(request, dbUser);
                    String toUrl = (String) 
                    request.getSession().getAttribute(Constantion.LOGIN_TO_URL);//记忆化历史浏览记录,这个主要是解决用户之前在浏览一个页面，后来再次登录的时候，可以让用户直接回到之前定的页面
                    request.getSession().removeAttribute(Constantion.LOGIN_TO_URL);
                    if (toUrl == null) { 
                        toUrl = "/index";
                        //如果没有记录，则跳转到index页面
                    }
                    return new ResponseData(ExceptionMsg.SUCCESS, toUrl);
                }
            } catch (Exception e) { 
                System.out.println("操作失败");
                return new ResponseData(ExceptionMsg.FAILED);
            }
        }

注册页面不再叙述，可以直接看registerController.java和register.html，里面都有注释。

[添加链接描述][Link 1]

[项目演示][Link 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzc0MTc1_size_16_color_FFFFFF_t_70]: /images/20220316/bcce9ef830f84ace9010cd21a50b7621.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzc0MTc1_size_16_color_FFFFFF_t_70 1]: /images/20220316/cefaba105bc349a38aac614c8049ff04.png
[Link 1]: https://github.com/yangdongchao/springboot
[Link 2]: http://www.ydc98.club:443/