海上捞火锅

海上捞火锅


用户登录

[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("登录失败");  
}

页面列表

ITEM_HTML