个人名片:
博主:酒徒ᝰ.
专栏:瑞吉外卖
个人简介:沉醉在酒中,借着一股酒劲,去拼搏一个未来。
本篇励志:人无远虑,必有近忧。人好的时候要找一条备胎,人不好的时候要找一条退路;人得意的时候要找一条退路,人失意的时候要找一条出路。
本项目基于B站黑马程序员Java项目实战《瑞吉外卖》,轻松掌握springboot + mybatis plus开发核心技术的真java实战项目。
视频链接【黑马程序员Java项目实战《瑞吉外卖》,轻松掌握springboot + mybatis
plus开发核心技术的真java实战项目】 https://www.bilibili.com/video/BV13a411q753?
点击观看
先注释掉过滤器,方便显示页面,同时分析路径。
知道暂时需要的路径后,取消注释。
//3.设置过滤地址
String[] uris = new String[]{
"/employee/login",
"/employee/logout",
"/backend/**",
"/common/",
"/front/**", //移动端
"/user/sendCode", //移动端发送验证码
"/user/login" //移动端登录
};
//5.1判断移动端是否登录,登录则放行
if (request.getSession().getAttribute("user") != null) {
filterChain.doFilter(request, response);
return;
}
这里发现一个问题,那就是点击获取验证码后,自动填充验证码;
找到对应的前端代码。
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)
}else{
this.msgFlag = true
}
},
分析代码,可以发现验证码是随机填的,注释的,换成由ValidateCodeUtils生成的验证码,并使用session保存。
将
this.form.code = (Math.random()*1000000).toFixed(0)
修改为
sendCode({phone:this.form.phone})
在login.js中添加sendCode方法
function sendCode(data) {
return $axios({
'url': '/user/sendCode',
'method': 'post',
data
})
}
?做完以上仍然无法接收到前端传来的信息,多半是浏览器的问题。
本人使用谷歌浏览器就接受不到信息,于是换了其他浏览器,成功接收到信息。如下:
分析:user地址,POST方式,sendCode地址。
/**
* 发送验证码
* @param user
* @param session
* @return
*/
@PostMapping("/senCode")
public R<String> sendCode(@RequestBody User user, HttpSession session){
//获取移动端输入手机号
String phone = user.getPhone();
//手机号不为空,则发送验证码。
if (StringUtils.isNotEmpty(phone)){
String code = ValidateCodeUtils.generateValidateCode(4).toString();
//log.info("code:{}", code);
//保存验证码 session
session.setAttribute(phone, code);
return R.success("验证码发送成功");
}
return R.error("验证码发送失败");
}
分析:user地址,POST方式,login地址
@PostMapping("/login")
public R<String> login(@RequestBody Map map){
//获取手机号与验证码
log.info("map:{}", map);
return R.success("");
}
发现接受到的map中只有phone,没有code。
证明前端没有发送完整的信息过来。分析login.html代码,进行如下修改。
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})
this.loading = false
补全代码
/**
* 移动端登录
* @param map
* @param session
* @return
*/
@PostMapping("/login")
public R<User> login(@RequestBody Map map, HttpSession session){
//获取移动端输入的手机号与验证码
log.info("map:{}", map);
String phone = map.get("phone").toString();
String code = map.get("code").toString();
//从session中获取生成的验证码
String codeVali = session.getAttribute(phone).toString();
//判断验证码是否正确
if (codeVali.equals(code)){
//正确,成功登录 更加手机号获取用户信息
LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(User::getPhone, phone);
User user = userService.getOne(queryWrapper);
//判断账号是否被禁用
if (user.getStatus() == 0){
return R.error("账号已禁用");
}
//不存在,则注册
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("验证码错误");
}
分析:user地址,POST方式,loginout地址
/**
* 退出登录
* @param session
* @return
*/
@PostMapping("loginout")
public R<String> loginout(HttpSession session){
session.removeAttribute("user");
return R.success("退出成功");
}