用户登录
[TOC]
简要描述
- 用户登录接口
触发事件
<el-button type="primary" :class="{btnSubmit:1===1,btnNoPhone:!form.phone,btnPhone:form.phone}" @click="btnLogin">登录</el-button>
接口调用
async btnLogin(){
if(this.form.phone && this.form.code){
this.loading = true
const res = await loginApi(this.form)
this.loading = false
if(res.code === 1){
sessionStorage.setItem("userPhone",this.form.phone)
window.requestAnimationFrame(()=>{
window.location.href= '/front/index.html'
})
}else{
this.$notify({ type:'warning', message:res.msg});
}
}else{
this.$notify({ type:'warning', message:'请输入手机号码'});
}
}
请求URL
[context-path]/user/login
请求方式
- POST
接口API
function loginApi(data) {
return $axios({
'url': '/user/login',
'method': 'post',
data
})
}
请求参数
参数名 | 必选 | 类型 | 说明 |
---|---|---|---|
phone | 是 | string | 手机号 |
code | 是 | string | 四位验证码 |
返回示例
code: 0,
msg: "登录失败",
data: null,
map: {}
返回参数说明
参数名 | 类型 | 说明 |
---|---|---|
code | int | 返回码,1:成功;0或其他:失败 |
msg | string | 错误信息 |
data | object | 返回数据 |
map | map | 动态数据 |
备注
data有两种返回值
public static <T> R<T> success(T object) {
R<T> r = new R<T>();
r.data = object;
r.code = 1;
return r;
}
public static <T> R<T> error(String msg) {
R r = new R();
r.msg = msg;
r.code = 0;
return r;
}
后端接口请求参数
- @RequestBody 接收前端传递给后端的json字符串中的数据(请求体Employee中的数据)
后端代码
@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 attribute = session.getAttribute(phone);
//进行验证码的比对(页面提交的验证码和Session中保存的验证码比对)
if (attribute!=null && attribute.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("登录失败");
}