海上捞火锅

海上捞火锅


管理端登录

[TOC]

简要描述
  • 管理端登录接口
触发事件
<el-button :loading="loading" class="login-btn" size="medium" type="primary" style="width:100%;"
  @click.native.prevent="handleLogin">
  <span v-if="!loading">登录</span>
  <span v-else>登录中...</span>
</el-button>
接口调用
async handleLogin() {
  this.$refs.loginForm.validate(async (valid) => {
    if (valid) {
      this.loading = true
      let res = await loginApi(this.loginForm)
      if (String(res.code) === '1') {//1表示登录成功
        localStorage.setItem('userInfo',JSON.stringify(res.data))
        window.location.href= '/backend/index.html'
      } else {
        this.$message.error(res.msg)
        this.loading = false
      }
    }
  })
}
请求URL
  • [context-path]/employee/login
请求方式
  • POST
接口API
  function loginApi(data) {
  return $axios({
    'url': '/employee/login',
    'method': 'post',
    data
  })
}
参数
参数名 必选 类型 说明
username string 用户名
password string 密码
返回示例
code: 0
data: null
map: {}
msg: "密码错误"
返回参数说明
参数名 类型 说明
code int 返回码:1:成功 0或其它:失败
data object 返回数据
map map 动态数据
msg string 错误信息
备注
  • date有两种返回值
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;
}
业务逻辑
  • 将页面提交的密码password进行md5加密处理
  • 根据页面提交的用户名username查询数据库
  • 如果没有查询到则返回登录失败结果
  • 密码比对,如果不一致则返回登录失败结果
  • 查看员工状态,如果为已禁用状态,则返回员工已禁用结果
  • 登录成功,将员工id存入Session并返回登录成功结果
后端请求接口参数
  • @RequestBody 接收前端传递给后端的json字符串中的数据(请求体Employee中的数据)
后端代码
@PostMapping("/login")
public R<Employee> login(HttpServletRequest request, @RequestBody Employee employee){
    //1、将页面提交的密码password进行md5加密处理
    String password = employee.getPassword();
    password = DigestUtils.md5DigestAsHex(password.getBytes());

    //2、根据页面提交的用户名username查询数据库
    LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>();
    queryWrapper.eq(Employee::getUsername,employee.getUsername());
    Employee one = employeeService.getOne(queryWrapper);

    //3、如果没有查询到则返回登录失败结果
    if(one == null){
        return R.error("账号不存在");
    }

    //4、密码比对,如果不一致则返回登录失败结果
    if(!one.getPassword().equals(password)){
        return R.error("密码错误");
    }

    //5、查看员工状态,如果为已禁用状态,则返回员工已禁用结果
    if(one.getStatus() == 0){
        return R.error("账号已禁用");
    }

    //6、登录成功,将员工id存入Session并返回登录成功结果
    request.getSession().setAttribute("employee",one.getId());
    return R.success(one);
}

页面列表

ITEM_HTML