1.登录模块

已于 2022-03-13 18:36:37 修改
阅读量5.3k 收藏 15
点赞数 4
分类专栏： SSM+Vue简单项目实现记录 文章标签： 前端 java 开发语言
于 2022-03-13 18:16:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45717294/article/details/123462392
版权
登录模块主要实现的功能有:
① 登录功能: 用户输入学号,密码,验证码验证登录
② 用户登录日志: 用户登录成功后,将用户的学号,登录时间,ip地址存入数据库
一. 登录功能

  • 验证码模块实现的思想: 后台将生成验证码传给前端,并同时保存到session中, 用户输入学号,密码,验证码发送给后端, 后端取出session中的验证码进行对比,如果验证码错误,直接返回字符串"验证码错误", 如果验证码正确,继续查找是否存在该用户,如果存在, 返回"用户存在", 不存在返回 “用户不存在”

  • 以上就是我在做这个模块遇到的问题以及解决方案和参考的博客, 然后接下来就是代码部分

  • 后端代码一: 生成验证码

    package com.zhl.controller;

import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.Producer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.image.BufferedImage;

/**
 * @author ZhangHailong
 * @date 2022/3/3 - 12:38
 * @project_name
 */
@Controller
@RequestMapping("/kaptcha")
public class KaptchaController {
    @Autowired
    private Producer captchaProducer = null;

    @RequestMapping(value = "/getKaptchaImage.do")
    @CrossOrigin(allowCredentials="true")
    public void getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws Exception {
        HttpSession session = request.getSession();
        response.setDateHeader("Expires", 0);
        response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
        response.addHeader("Cache-Control", "post-check=0, pre-check=0");
        response.setHeader("Pragma", "no-cache");
        response.setContentType("image/jpeg");
        //生成验证码
        String capText = captchaProducer.createText();
        System.out.println("生成的验证码: " + capText);
        session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);

        //向客户端写出
        BufferedImage bi = captchaProducer.createImage(capText);
        ServletOutputStream out = response.getOutputStream();
        ImageIO.write(bi, "jpg", out);
        try {
            out.flush();
        } finally {
            out.close();
        }
    }

}

  • 后端代码二: 验证登录信息

       // 用户登录
@RequestMapping(value = "/loginUser.do", method = RequestMethod.POST)
@ResponseBody
@CrossOrigin(allowCredentials="true")
public String loginUserService(@RequestBody LoginUser loginUser, HttpServletRequest request) {

    System.out.println(loginUser);

    // 先判断验证码
    // 拿到session中的验证码的值
    String verifyCodeExepected = (String)request.getSession().getAttribute(
            com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
    System.out.println("session存储的:" + verifyCodeExepected);
    // 拿到提交的验证码
    String code = loginUser.getCode();
    System.out.println("提交的验证码:" + code);

    if(code != null && verifyCodeExepected.equalsIgnoreCase(code)) {
        // 验证码正确,继续验证登录

        User user = new User();
        user.setId(Integer.valueOf(loginUser.getId()));
        user.setPassword(loginUser.getPassword());

        // 将用户登录的ip作为loginUser的参数,以供切面拿取
        String ipAddress = request.getRemoteAddr();

        User userExist = userService.loginUser(user, ipAddress);
        if (userExist != null) {

            return "用户存在";
        }

        return "用户不存在";

    }
    return "验证码错误";

}

    这里要说明的是,为什么loginUser有两个参数,实际上在做用户验证的时候只需要user这个参数就行了,它里面包含了用户的id和password,第二个参数ipAddress是为登录日志模块服务的,先按下不表,下面会解释

  • 前端

    handleSubmit(event) {
  this.$refs.loginForm.validate((valid) => {
    if (valid) {
      this.loading = true;
      
      this.$http
      .post("http://localhost:8888/user/loginUser.do", this.loginForm,{withCredentials:true})
      .then((res) => {
        
        if (res.data == "用户存在") {
          
          this.loading = false;
          // localStorage.setItem("userId", this.loginForm.id);
          sessionStorage.setItem("userId", this.loginForm.id);
          this.$router.push({ path: "/" });

          // 显示登录成功的提示框
          this.$message({
            message: this.loginForm.id + ',登录成功',
            type: 'success'
          });

        } else if (res.data == "验证码错误") {
          
          this.loading = false;
          this.$alert("验证码错误", "提示", {
            confirmButtonText: "确认",
          });
          this.$refs.codeClickPosition.focus();
          this.loginForm.code = "";

        }
        else {
          
          this.loading = false;
          this.$alert("用户名或密码错误!", "提示", {
            confirmButtonText: "确认",
          });
          this.$refs.idClickPosition.focus();
        
        }
      });

    } else {
      console.log("error submit!");
      return false;
    }
  });
},

    在这里,如果登录成功了,将用户的学号保存到session中,存这个学号的目的是,在用户登录成功以后,主页的右上角不是要显示他的头像和昵称还有其他信息嘛,所以想到时候用学号做一个查询,用的是sessionStorage而不是localStorage,具体的区别大家可以查看: sessionStorage和sessionStorage的区别, 我这里使用的是sessionStorage,用户在关闭网站后身份信息就清空了,需要重新登录

二.用户登录日志
  • 参考的博客: SSM实现登录日志
  • 实现思路: 在业务层userServiceImp的loginUser方法后使用 @AfterReturning 后置通知, loginUser我的返回值是User,也就是说,如果有该学生,那么该方法的执行结果是该学生的信息,如果没有该学生,返回值是null,根据是不是null再判断是否要添加这个学生的登录日志,当然你的返回值也可以是int型的,说明该查找操作作用在哪一行,根据是否是-1选择添加登录日志
  • 实现步骤
    • 配置AspectJ开发环境

      • 1.maven依赖

        <dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>5.2.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>5.2.5.RELEASE</version>
</dependency>

// 其他....
// 插件部分
<build>
<plugins>
 <plugin>
 <artifactId>maven-compiler-plugin</artifactId>
 <version>3.1</version>
 <configuration>
 <source>1.8</source>
 <target>1.8</target>
 </configuration>
 </plugin>
</plugins>
</build>

      • 2.基于注解的AOP

        • ① 定义业务接口和实现类,我的业务接口就是userService,其实现类就是userServiceImp,如下

          package com.zhl.service;

import java.util.List;

/**
 * @author ZhangHailong
 * @date 2022/2/23 - 13:45
 * @project_name
 */
public interface UserService {

    // 用户登录
    User loginUser(User user, String ipAddress);

}


          package com.zhl.service.impl;

import com.zhl.dao.UserDao;
import com.zhl.entity.User;
import com.zhl.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @author ZhangHailong
 * @date 2022/2/23 - 13:48
 * @project_name
 */

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserDao userDao;
    
    @Override
    public User loginUser(User user, String ipAddress) {
        return userDao.findUserByIdAndPwd(user);
    }

        • ② 定义登录日志实体类

          package com.zhl.entity;

import org.springframework.format.annotation.DateTimeFormat;

import java.util.Date;

/**
 * @author ZhangHailong
 * @date 2022/3/11 - 19:41
 * @project_name 登录日志实体类
 */
public class LoginLog {

    // 用户学号
    private Integer userId;

    // 登录时间
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date loginTime;

    // ip地址
    private String ipAddress;

    public Integer getUserId() {
        return userId;
    }

    public void setUserId(Integer userId) {
        this.userId = userId;
    }

    public Date getLoginTime() {
        return loginTime;
    }

    public void setLoginTime(Date loginTime) {
        this.loginTime = loginTime;
    }

    public String getIpAddress() {
        return ipAddress;
    }

    public void setIpAddress(String ipAddress) {
        this.ipAddress = ipAddress;
    }

    @Override
    public String toString() {
        return "LoginLog{" +
                ", userId=" + userId +
                ", loginTime=" + loginTime +
                ", ipAddress='" + ipAddress + '\'' +
                '}';
    }
}

        • ③ 定义切面类, 目标对象就是userServiceImp包下的loginUser()

          package com.zhl.aspect;

import com.zhl.dao.LoginLogDao;
import com.zhl.entity.LoginLog;
import com.zhl.entity.User;
import org.aspectj.lang.JoinPoint;
import org.aspectj.lang.annotation.AfterReturning;
import org.aspectj.lang.annotation.Aspect;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import java.util.Date;

/**
 * @author ZhangHailong
 * @date 2022/3/11 - 19:38
 * @project_name
 */

@Aspect
@Component
public class LoginLogAspect {

    @Autowired
    private LoginLogDao loginLogDao;


    @AfterReturning(value = "execution(* *..UserServiceImpl.loginUser(..))", returning = "result")
    public void addLoginLog(JoinPoint jp,User result) {

        if (result != null) {

            LoginLog loginLog = new LoginLog();
            // 登录的id
            loginLog.setUserId(result.getId());
            // 登录时间
            loginLog.setLoginTime(new Date());
            // 获取loginUser方法的第二个参数,也就是登录的用户的ip,择取需要的填充到LoginLog对象中
            loginLog.setIpAddress(jp.getArgs()[1].toString());

            loginLogDao.insertLogDao(loginLog);

        }

    }		
}

          loginUser的第二个参数ipAddress在这里就用到了,AOP是可以通过JoinPoint获取目标方法的参数的,那么在这里拿到,就可以将信息们写入数据库了

        • ④ applicationContext.xml添加

          <!-- 包扫描 -->
<context:component-scan base-package="com.yy.homework.aspects"/>
<!-- 配置登陆日志的 AOP 注解-->
<aop:aspectj-autoproxy/>

      • 3.持久层代码

        // Dao接口
package com.zhl.dao;

import com.zhl.entity.LoginLog;

/**
 * @author ZhangHailong
 * @date 2022/3/11 - 19:48
 * @project_name
 */
public interface LoginLogDao {

    int insertLogDao(LoginLog loginLog);

}

        // mapper.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="com.zhl.dao.LoginLogDao">

    <!--select|insert|update|delete语句-->

    <insert id="insertLogDao">
      INSERT INTO loginLog(userId,loginTime,ipAddress) values(#{userId},#{loginTime},#{ipAddress})
    </insert>

</mapper>

登录的两个功能到这也基本上结束了,谢谢您的观看,新手小白,如果有问题,希望大佬们斧正,也欢迎参与评论

三十岁之前尽量不秃
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
登录模块丨前端uniapp微信小程序项目
黑马程序员官方博客
08-25 2090
涉及知识点：微信授权登录，文件上传，Store 状态管理等。
登录模块设计
weixin_45785327的博客
11-08 1443
这些措施可以有效地提高系统的安全性，减少潜在的安全漏洞。在基于Spring Boot的博客系统中，单点登录（Single Sign On，简称SSO）是一种统一的认证和授权机制，允许用户在多个应用系统中只需登录一次，就可以访问所有相互信任的应用系统，而无需再次进行身份验证。通过这个关联表的设计，可以实现用户与角色的多对多关联关系，从而支持用户拥有多个角色和权限的功能。综上所述，处理用户名和密码验证过程中的异常或延迟需要综合考虑用户体验、系统安全和性能等多个方面，并采取相应的措施来提高系统的可靠性和稳定性。
2024年Python selenium自动化测试框架实战 —— 登录测试案例，2024年最新音视频时代你还不会NDK开发
最新发布
2301_76224223的博客
05-06 204
【代码】2024年Python selenium自动化测试框架实战 —— 登录测试案例，2024年最新音视频时代你还不会NDK开发。
登录模块与token的使用和创建
L3059307568的博客
01-06 1534
登录模块的使用与创建 一、如何实现登录注册 1.在Vue里创建文件Login.vue和user.vue 2.在router里配置路由 { path: '/user', name: 'User', component: () => import('../views/user/User.vue'), meta: { keep: true } }, { path: '/login', name: 'Login', meta: { nofoot: tr
【功能实现】登录模块 - 学习/实践
william_n的博客
09-07 1179
主要用于学习，整理登录模块的实现原理，以及实现方式，对应的应用场景。
实现注册与登录模块
weixin_49884716的博客
11-13 4761
springboot
登录注册模块PDL1
08-08
### 登录模块 登录模块主要涉及以下知识点： 1. **用户界面**：用户进入登录界面，输入账号和密码。这通常由前端UI组件如表单完成，包括输入框和登录按钮。 2. **事件监听**：当用户点击登录按钮（`@click=login`...
易语言QQ登录模块源码.zip易语言项目例子源码下载
03-23
易语言QQ登录模块源码.zip易语言项目例子源码下载易语言QQ登录模块源码.zip易语言项目例子源码下载 1.合个人学习技术做项目参考 2.适合学生做毕业设计参考 3.适合小团队开发项目参考
1.2.maven多模块项目配置1
08-04
在上面的配置中，我们定义了一个名为`sonar`的profile，该profile用于配置Sonarqube相关的信息，包括Sonarqube服务器的URL、登录 token、项目key和项目名称。 子模块配置 在每个子模块的pom.xml文件中，我们需要...
JWT登录鉴权—通用登录模块后端开发1.zip
11-22
执行栈，就是我们数据结构中的“栈”，它具有“先进后出”的特点，正是因为这种特点，在我们代码进行 执行的时候，遇到一个执行上下文就将其依次压入执行栈中。 当代码执行的时候，先执行位于栈顶的执行上下文中的...
网站通用登录模块源码.rar
05-23
本源码是一个网站通用登录模块源码，采用Webform进行开发，登陆模块的功能展示、ajax验证。代码很简单，欢迎下载。菜单功能:1、ajax验证用户名密码不能为空2、密码应在6-32位字符内的验证3、按照规定输入用户名密码...
Login登录模块组件
06-27
一个美观的登录组件。
用户登录、权限、集成模块的设计与实现
04-20
目 录 一、概述 3 1.1模块描述 3 1.2开发工具 3 二、需求 3 2.1用户登录模块功能需求分析 3 2.2性能需求分 3 2.3流程分析 4 三、 设计和编码 5 3.1数据库设计 5 3.2模块详细设计 6 3.3登录界面设计 6 3.4集成jwt实现登录授权访问 6 3.5集成cas实现单点登录认证 8 3.6集成atomikos实现分布式事务 9 四、 测试 10 五、 总结 11 5.1程序设计总结 11 5.2个人总结 11
Flask框架之用户登录模块flask_login模块
qq_41809511的博客
03-11 7415
flask_login模块 flask-login为flask提供了用户会话管理。他处理了日常的登入，登出并且长时间记住用户的会话。 在会话中存储当前活跃的用户ID让你能够自由地登入和登出。 让你限制登入或登出，用户可以访问的试图。 处理让人棘手的记住我功能。 帮助你保护用户会话免遭cookie被盗的牵连。 .可以与以后可能使用的flask-principal或其他认证扩展集成。 一、配置你的应用 对一个使用flask-login的应用最重要的一部分是loginmanager类。
后台登录模块理解
Aaron Con的博客
04-13 802
对于部分网站来说，首先呈现的就是登录页面，所以登录页面的功能实现非常重要 思想： 对于不同页面内容的实现,我们需要通过router来实现，首先我们得定义我们所需要的路由，例如/login，/404, / 等 定义了相关路由，我们得让我们刚访问地址的时候根据不同的条件展示是否为登录页。所以我们需要设置路由守卫，我们这里以token来判断。 如果我们登录过并且登录成功，我们在发送请求成功后，后端会将一个token返回给我们，我们会将这个token存储到vuex中，同时也存储到浏览器的cookie中。 .
Spring Boot项目学习06之用户登陆模块与登录拦截器
pikcacho_pkq的博客
08-08 1480
首先，在数据库中查询这条用户记录，如果不存在这条记录则表示身份验证失败，登录流程终止；如果存在这条记录，则表示身份验证成功，接下来则需要进行登录状态的存储和验证了，用户登录成功后我们将用户信息放到 session 对象中，之后再实现一个拦截器，在访问项目时判断 session 中是否有用户信息，有则放行请求，没有就跳转到登录页面。在 BBSUserController.java类中新增跳转功能。该方法用于处理 /login 请求，是登录页面的跳转处理方法，请求方法为 GET，在发起请求后会分别跳转到 tem
JAVA登录界面并在窗口上实现算法
m0_61364659的博客
12-16 1127
目录 一，相关内容介绍 二，相关代码表示 第一种方法： 第二种方法： 今天我将为大家用两种方式来说一下Java登陆界面并实现其中的某个算法。 一，相关内容介绍 第一种主要是以网格布局管理器为主的 第二种主要是以精确定位方法为主的 网格布局管理器：网格布局管理器（GridLayout,简称网格管理器）把容器空间按照用户的设置平均划分分成不同行与列的网络，每个网格可以放置一个组件，这种布局方式对数量众多的组件很合适。创建网格管理器时，要给出网格的行列数，在窗体容器中，可以直接...
实现用户登录这个模块的功能
xzy的博客
04-12 2427
文章目录实现用户登录这个模块的功能需求点击index.jsp的登录连接跳转到登录页面修改login.jsp表单信息点击登录发送请求在UserServlet服务器中编写login的登录方法编写service层的login登录方法编写dao层的getByUsernameAndPwd()查询方法测试 实现用户登录这个模块的功能 需求 需求：在一个登陆页面上，输入用户名和密码，点击登录，完成登录操作， 点击index.jsp的登录连接跳转到登录页面 给登录一个超链接地址，点击的时候，可以发送localhost:80
ruoyi-vue第一章 : 学习后台登录模块(SpringSecurity)
热门推荐
过道
01-29 1万+
ruoyi-vue登录模块学习笔记
1.功能模块 用户注册、登录、注销和更新模块 歌曲查询模块 歌单添加删除修改模块 歌单歌曲详情模块 标签模块 游客或用户留言模块 播放模块 后台管理模块
05-30
1. 用户注册、登录、注销和更新模块： 用户注册需要输入用户名、密码、邮箱等基本信息，注册成功后可以进行登录和注销操作。登录成功后，用户可以查看个人信息、修改密码等。为了增强用户体验，可以使用验证码等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值