瑞吉外卖（23）- 手机验证码登录功能

需求分析

安全 - 方便 - 快捷

数据模型

代码开发

梳理交互过程

准备工作-搭建框架

导入实体类User

package com.taotao.reggie.entity;

import lombok.Data;
import java.time.LocalDateTime;
import java.util.Date;
import java.util.List;
import java.io.Serializable;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
/**
 * 用户信息
 */
@Data
public class User implements Serializable {

    private static final long serialVersionUID = 1L;

    private Long id;


    //姓名
    private String name;


    //手机号
    private String phone;


    //性别 0 女 1 男
    private String sex;


    //身份证号
    private String idNumber;


    //头像
    private String avatar;


    //状态 0:禁用，1:正常
    private Integer status;
}

新建UserMapper.java

package com.taotao.reggie.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.taotao.reggie.entity.Dish;
import org.apache.ibatis.annotations.Mapper;

/**
 * create by 刘鸿涛
 * 2022/9/27 10:29
 */
@SuppressWarnings({"all"})
@Mapper
public interface UserMapper extends BaseMapper<User> {
    
}

新建UserService.java

package com.taotao.reggie.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.taotao.reggie.entity.User;

/**
 * create by 刘鸿涛
 * 2022/9/27 10:37
 */
@SuppressWarnings({"all"})

public interface UserService extends IService<User> {
}

新建UserServiceImpl.java

package com.taotao.reggie.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.taotao.reggie.entity.User;
import com.taotao.reggie.mapper.UserMapper;
import com.taotao.reggie.service.UserService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;

/**
 * create by 刘鸿涛
 * 2022/9/27 10:40
 */
@SuppressWarnings({"all"})
@Slf4j
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
}

新建UserController.java

package com.taotao.reggie.controller;

import com.taotao.reggie.service.UserService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * create by 刘鸿涛
 * 2022/9/27 10:46
 */
@SuppressWarnings({"all"})
@RestController
@RequestMapping("/user")
@Slf4j
public class UserController {
    @Autowired
    private UserService userService;

}

导入工具类ValidateCodeUtils.java

package com.taotao.reggie.utils;

import java.util.Random;

/**
 * 随机生成验证码工具类
 */
public class ValidateCodeUtils {
    /**
     * 随机生成验证码
     * @param length 长度为4位或者6位
     * @return
     */
    public static Integer generateValidateCode(int length){
        Integer code =null;
        if(length == 4){
            code = new Random().nextInt(9999);//生成随机数，最大为9999
            if(code < 1000){
                code = code + 1000;//保证随机数为4位数字
            }
        }else if(length == 6){
            code = new Random().nextInt(999999);//生成随机数，最大为999999
            if(code < 100000){
                code = code + 100000;//保证随机数为6位数字
            }
        }else{
            throw new RuntimeException("只能生成4位或6位数字验证码");
        }
        return code;
    }

    /**
     * 随机生成指定长度字符串验证码
     * @param length 长度
     * @return
     */
    public static String generateValidateCode4String(int length){
        Random rdm = new Random();
        String hash1 = Integer.toHexString(rdm.nextInt());
        String capstr = hash1.substring(0, length);
        return capstr;
    }
}

修改LoginCheckFilter（此请求直接通行）

完善过滤器逻辑，判断移动端用户登录状态

编写LoginCheckFilter.java添加过滤

        //4-1.判断移动端登录状态，如果已登录，则直接放行
        if(request.getSession().getAttribute("user") != null){
            log.info("用户已登录，用户id为{}",request.getSession().getAttribute("user"));

            //已经登录，所以可以取出
            Long userId = (Long) request.getSession().getAttribute("user");
            BaseContext.setCurrentId(userId);

            filterChain.doFilter(request,response);
            return;
        }

演示进入手机端访问界面

更改“获取验证码”请求路径-转到后端-post请求

分析前端的“获取验证码”功能

这里前端使用的random函数，并没有和服务端交互，导致无法获取这个数据，所以我们需要更改下请求方式

完善front/api/login.js

function sendMsgApi(data) {
    return $axios({
        'url': '/user/sendMsg',
        'method': 'post',
        data
    })
}

更改front/page/login.html

测试“获取验证码”请求是否完成

接到请求，complete！

控制台获得验证码

注意

如果发现了前端响应bug

解决方案，可以考虑清除缓存或者更换浏览器解决

完善登录功能

完善UserController.java

    /**
     * 移动端用户登录
     * @param map
     * @Param session
     * @return
     */
    @PostMapping("/login")
    public R<User> login(@RequestBody Map map, HttpSession session){
        log.info(map.toString());

        //获取手机号
        String phone = map.get("phone").toString();

        //获取验证码
        String code = map.get("code").toString();

        //从Session中获取保存的验证码
        Object codeInSession = session.getAttribute(phone);

        //进行验证码的比对（页面提交的验证码和Session中保存的验证码比对）
        if(codeInSession != null && codeInSession.equals(code)){
            //如果能够比对成功，说明登录成功

            LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>();
            queryWrapper.eq(User::getPhone,phone);

            User user = userService.getOne(queryWrapper);
            if(user == null){
                //判断当前手机号对应的用户是否为新用户，如果是新用户就自动完成注册
                user = new User();
                user.setPhone(phone);
                user.setStatus(1);
                userService.save(user);
            }
            session.setAttribute("user",user.getId());
            return R.success(user);
        }
        return R.error("登录失败");
    }

测试成功

登陆后账户自动添加

如果账号已经在数据库存在

输入验证码后直接登录成功