[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
请求方式
接口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 |
错误信息 |
备注
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);
}