管理端登录
<p>[TOC]</p>
<h5>简要描述</h5>
<ul>
<li>管理端登录接口</li>
</ul>
<h5>触发事件</h5>
<pre><code><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></code></pre>
<h5>接口调用</h5>
<pre><code>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
}
}
})
}</code></pre>
<h5>请求URL</h5>
<ul>
<li><code>[context-path]/employee/login</code></li>
</ul>
<h5>请求方式</h5>
<ul>
<li>POST </li>
</ul>
<h5>接口API</h5>
<pre><code> function loginApi(data) {
return $axios({
'url': '/employee/login',
'method': 'post',
data
})
}</code></pre>
<h5>参数</h5>
<table>
<thead>
<tr>
<th style="text-align: left;">参数名</th>
<th style="text-align: left;">必选</th>
<th style="text-align: left;">类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">username</td>
<td style="text-align: left;">是</td>
<td style="text-align: left;">string</td>
<td>用户名</td>
</tr>
<tr>
<td style="text-align: left;">password</td>
<td style="text-align: left;">是</td>
<td style="text-align: left;">string</td>
<td>密码</td>
</tr>
</tbody>
</table>
<h5>返回示例</h5>
<pre><code>code: 0
data: null
map: {}
msg: "密码错误"</code></pre>
<h5>返回参数说明</h5>
<table>
<thead>
<tr>
<th style="text-align: left;">参数名</th>
<th style="text-align: left;">类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">code</td>
<td style="text-align: left;">int</td>
<td>返回码：1：成功 0或其它：失败</td>
</tr>
<tr>
<td style="text-align: left;">data</td>
<td style="text-align: left;">object</td>
<td>返回数据</td>
</tr>
<tr>
<td style="text-align: left;">map</td>
<td style="text-align: left;">map</td>
<td>动态数据</td>
</tr>
<tr>
<td style="text-align: left;">msg</td>
<td style="text-align: left;">string</td>
<td>错误信息</td>
</tr>
</tbody>
</table>
<h5>备注</h5>
<ul>
<li>date有两种返回值</li>
</ul>
<pre><code>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;
}</code></pre>
<h5>业务逻辑</h5>
<ul>
<li>将页面提交的密码password进行md5加密处理</li>
<li>根据页面提交的用户名username查询数据库</li>
<li>如果没有查询到则返回登录失败结果</li>
<li>密码比对，如果不一致则返回登录失败结果</li>
<li>查看员工状态，如果为已禁用状态，则返回员工已禁用结果</li>
<li>登录成功，将员工id存入Session并返回登录成功结果</li>
</ul>
<h5>后端请求接口参数</h5>
<ul>
<li>@RequestBody 接收前端传递给后端的json字符串中的数据(请求体Employee中的数据)</li>
</ul>
<h5>后端代码</h5>
<pre><code>@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);
}
</code></pre>