用户登录
<p>[TOC]</p>
<h5>简要描述</h5>
<ul>
<li>用户登录接口</li>
</ul>
<h5>触发事件</h5>
<pre><code><el-button type="primary" :class="{btnSubmit:1===1,btnNoPhone:!form.phone,btnPhone:form.phone}" @click="btnLogin">登录</el-button></code></pre>
<h5>接口调用</h5>
<pre><code>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:'请输入手机号码'});
}
}</code></pre>
<h5>请求URL</h5>
<ul>
<li><code>[context-path]/user/login</code></li>
</ul>
<h5>请求方式</h5>
<ul>
<li>POST </li>
</ul>
<h5>接口API</h5>
<pre><code>function loginApi(data) {
return $axios({
'url': '/user/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;">phone</td>
<td style="text-align: left;">是</td>
<td style="text-align: left;">string</td>
<td>手机号</td>
</tr>
<tr>
<td style="text-align: left;">code</td>
<td style="text-align: left;">是</td>
<td style="text-align: left;">string</td>
<td>四位验证码</td>
</tr>
</tbody>
</table>
<h4>返回示例</h4>
<pre><code>code: 0,
msg: "登录失败",
data: null,
map: {}</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;">msg</td>
<td style="text-align: left;">string</td>
<td>错误信息</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>
</tbody>
</table>
<h5>备注</h5>
<p>data有两种返回值</p>
<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>@RequestBody 接收前端传递给后端的json字符串中的数据(请求体Employee中的数据)</li>
</ul>
<h5>后端代码</h5>
<pre><code>@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("登录失败");
}</code></pre>