目录
一、手机验证码登录
1.1 短信发送
1.2短信验证码登陆
1.2.1 需求分析
1.2.2 数据模型
1.2.3 代码开发
发送验证码（给的资料有点残缺，这里修改了）
使用验证码登陆(使用map接收数据)
一、手机验证码登录
1.1 短信发送
这里使用的是阿里云短信，但是吧，对于个人来说，几乎是申请不到短信的模板签名，所以这里只能大概介绍一下怎么使用阿里云发送短信，具体调用阿里云短信服务的Java代码也会给出；
先引入maven坐标：
<!--阿里云短信服务--><dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sdk-core</artifactId><version>4.5.16</version></dependency><dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sdk-dysmsapi</artifactId><version>2.1.0</version></dependency>然后调用api：
package com.learn.reggie.utils;import com.aliyuncs.DefaultAcsClient;import com.aliyuncs.IAcsClient;import com.aliyuncs.dysmsapi.model.v0525.SendSmsRequest;import com.aliyuncs.dysmsapi.model.v0525.SendSmsResponse;import com.aliyuncs.exceptions.ClientException;import com.aliyuncs.profile.DefaultProfile;/*** 短信发送工具类*/public class SMSUtils {/*** 发送短信* @param signName 签名* @param templateCode 模板* @param phoneNumbers 手机号* @param param 参数*/public static void sendMessage(String signName, String templateCode,String phoneNumbers,String param){DefaultProfile profile = DefaultProfile.getProfile("cn-hangzhou", "", "");IAcsClient client = new DefaultAcsClient(profile);SendSmsRequest request = new SendSmsRequest();request.setSysRegionId("cn-hangzhou");request.setPhoneNumbers(phoneNumbers);request.setSignName(signName);request.setTemplateCode(templateCode);request.setTemplateParam("{\"code\":\""+param+"\"}");try {SendSmsResponse response = client.getAcsResponse(request);System.out.println("短信发送成功");}catch (ClientException e) {e.printStackTrace();}}}
1.2短信验证码登陆
1.2.1 需求分析
1.2.2 数据模型
1.2.3 代码开发
导入user实体类；
创建userMapper：
package com.learn.reggie.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;import com.learn.reggie.entity.User;import org.apache.ibatis.annotations.Mapper;/*** @author 咕咕猫* @version 1.0*/@Mapperpublic interface UserMapper extends BaseMapper<User> {}创建service：
package com.learn.reggie.service;import com.baomidou.mybatisplus.extension.service.IService;import com.learn.reggie.entity.User;/*** @author 咕咕猫* @version 1.0*/public interface UserService extends IService<User> {}实现service：
package com.learn.reggie.service.impl;import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;import com.learn.reggie.entity.User;import com.learn.reggie.mapper.UserMapper;import com.learn.reggie.service.UserService;import org.springframework.stereotype.Service;/*** @author 咕咕猫* @version 1.0*/@Servicepublic class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {}
发送验证码（给的资料有点残缺，这里修改了）
注意这个资料有点残缺，补全：
在longin.html中找到这个获取验证码的方法，把一行注释，然后添加一行代码一行；
getCode(){this.form.code = ''const regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/;if (regex.test(this.form.phone)) {this.msgFlag = false//this.form.code = (Math.random()*1000000).toFixed(0)sendMsgApi({phone:this.form.phone}) //添加的}else{this.msgFlag = true}},在front/api/login.js中添加一个方法：
function sendMsgApi(data){return $axios({'url':'/user/sendMsg','method':'post',data})}在登陆拦截器LongCheckFilter中添加新的白名单：
String[] urls = new String[]{"/employee/login","/employee/logout","/backend/**","/front/**","/common/**","/user/sendMsg", //移动端发送短信"/user/login" // 移动端登陆};并且在里面继续添加一个手机端登陆状态的放行判断：
//4-2判断移动端登录状态，如果已登录，则直接放行if(request.getSession().getAttribute("user") != null){//log.info("用户已登录，用户id为：{}",request.getSession().getAttribute("user"));//把用户id存储到本地的threadLocalLong userId = (Long) request.getSession().getAttribute("user");BaseContext.setCurrentId(userId);filterChain.doFilter(request,response);return;}编写controller：
package com.learn.reggie.controller;import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;import com.mon.R;import com.learn.reggie.entity.User;import com.learn.reggie.service.UserService;import com.learn.reggie.utils.ValidateCodeUtils;import lombok.extern.slf4j.Slf4j;import mons.lang.StringUtils;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpSession;import java.util.Map;/*** @author 咕咕猫* @version 1.0*/@RestController@RequestMapping("/user")@Slf4jpublic class UserController {@Autowiredprivate UserService userService;/*** 发送手机短信验证码** @param user* @return*/@PostMapping("/sendMsg")public R<String> sendMsg(@RequestBody User user, HttpSession session) {//获取手机号String phone = user.getPhone();if (StringUtils.isNotEmpty(phone)) {//生成随机的4位验证码String code = ValidateCodeUtils.generateValidateCode(6).toString();log.info("code={}", code);//调用阿里云提供的短信服务API完成发送短信// SMSUtils.sendMessage("瑞吉外卖","",phone,code);//需要将生成的验证码保存到Sessionsession.setAttribute(phone, code);return R.success("手机验证码短信发送成功");}return R.error("短信发送失败");}功能测试：访问手机端，输入手机号，看能不能在后台打印验证码；
使用验证码登陆(使用map接收数据)
注意：测试的时候发现前端页面明明填了验证码，发现验证码并没有被携带在前端的请求参数中，所以后端也没有拿到验证码这个数据，一看就是前端发请求的地方的参数携带少了；修改一下参数就行；
async btnLogin(){if(this.form.phone && this.form.code){this.loading = true//const res = await loginApi({phone:this.form.phone}) 这里是资料给的代码const res = await loginApi(this.form) //这里是自己加的....}controller层代码：
/*** 移动端用户登录* @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());//在session中保存用户的登录状态,这样过滤器就不会被拦截了return R.success(user);}return R.error("登录失败");}功能测试：验证码正确后跳转到手机端；
