文章目录
需求分析数据模型代码开发梳理交互过程准备工作-搭建框架导入实体类User新建UserMapper.java新建UserService.java新建UserServiceImpl.java新建UserController.java导入工具类ValidateCodeUtils.java修改LoginCheckFilter（此请求直接通行）完善过滤器逻辑，判断移动端用户登录状态编写LoginCheckFilter.java添加过滤演示进入手机端访问界面更改“获取验证码”请求路径-转到后端-post请求分析前端的“获取验证码”功能完善front/api/login.js更改front/page/login.html测试“获取验证码”请求是否完成注意如果发现了前端响应bug完善登录功能完善UserController.java测试成功如果账号已经在数据库存在需求分析
安全 - 方便 - 快捷
数据模型
代码开发
梳理交互过程
准备工作-搭建框架
导入实体类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;/*** 用户信息*/@Datapublic 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 刘鸿涛* /9/27 10:29*/@SuppressWarnings({"all"})@Mapperpublic 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 刘鸿涛* /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 刘鸿涛* /9/27 10:40*/@SuppressWarnings({"all"})@Slf4j@Servicepublic 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 刘鸿涛* /9/27 10:46*/@SuppressWarnings({"all"})@RestController@RequestMapping("/user")@Slf4jpublic class UserController {@Autowiredprivate 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);//生成随机数，最大为9999if(code < 1000){code = code + 1000;//保证随机数为4位数字}}else if(length == 6){code = new Random().nextInt(999999);//生成随机数，最大为999999if(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("登录失败");}
测试成功
登陆后账户自动添加
如果账号已经在数据库存在
输入验证码后直接登录成功
