海上捞火锅

海上捞火锅


用户登录

<p>[TOC]</p> <h5>简要描述</h5> <ul> <li>用户登录接口</li> </ul> <h5>触发事件</h5> <pre><code>&lt;el-button type="primary" :class="{btnSubmit:1===1,btnNoPhone:!form.phone,btnPhone:form.phone}" @click="btnLogin"&gt;登录&lt;/el-button&gt;</code></pre> <h5>接口调用</h5> <pre><code>async btnLogin(){ if(this.form.phone &amp;&amp; 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(()=&gt;{ 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 &lt;T&gt; R&lt;T&gt; success(T object) { R&lt;T&gt; r = new R&lt;T&gt;(); r.data = object; r.code = 1; return r; } public static &lt;T&gt; R&lt;T&gt; 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&lt;User&gt; 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 &amp;&amp; attribute.equals(code)){ LambdaQueryWrapper&lt;User&gt; queryWrapper = new LambdaQueryWrapper&lt;&gt;(); 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>

页面列表

ITEM_HTML