用户登录

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