18 接口分析 前端页面编写（登录注册的模态框的显示不显示）
# 接口分析（5个接口）---》除了验证码，都是操作User表 -用户名(手机号，邮箱)密码登录接口（多方式登录） -手机号+验证码登录 -发送验证码接口 -根据手机号判断用户是否注册接口 -手机号+验证码注册接口
class="login">
"close_login">X
Header.vue
class="header">
class="slogan">
老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活
class="nav">
class="left-part">
- class="logo">
"/">
"../assets/img/head-logo.svg" alt="">
- class="ele">
"goPage('/free-course')" :class="{active: url_path === '/free-course'}">免费课
- class="ele">
"goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课
- class="ele">
"goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课
class="right-part">
"go_login">登录
class="line">|
注册
if="is_login" @close_login="close_login">
if="is_register">
上面是思路，下面是登录注册前端代码
前提：基于element-ui环境
模态登录组件（Login.vue）
class="login">
class="box">
class="el-icon-close" @click="close_login">
class="content">
class="nav">
class="{active: login_method === 'is_pwd'}"
@click="change_login_method('is_pwd')">密码登录
class="{active: login_method === 'is_sms'}"
@click="change_login_method('is_sms')">短信登录
if="login_method === 'is_pwd'">
input
placeholder="用户名/手机号/邮箱"
prefix-icon="el-icon-user"
v-model="username"
clearable>
input
placeholder="密码"
prefix-icon="el-icon-key"
v-model="password"
clearable
show-password>
"primary">登录
if="login_method === 'is_sms'">
input
placeholder="手机号"
prefix-icon="el-icon-phone-outline"
v-model="mobile"
clearable
@blur="check_mobile">
input
placeholder="验证码"
prefix-icon="el-icon-chat-line-round"
v-model="sms"
clearable>
"append">
class="sms" @click="send_sms">{{ sms_interval }}
"primary">登录
class="foot">
"go_register">立即注册
模态注册组件
class="register">
class="box">
class="el-icon-close" @click="close_register">
class="content">
class="nav">
class="active">新用户注册
input
placeholder="手机号"
prefix-icon="el-icon-phone-outline"
v-model="mobile"
clearable
@blur="check_mobile">
input
placeholder="密码"
prefix-icon="el-icon-key"
v-model="password"
clearable
show-password>
input
placeholder="验证码"
prefix-icon="el-icon-chat-line-round"
v-model="sms"
clearable>
"append">
class="sms" @click="send_sms">{{ sms_interval }}
"primary">注册
class="foot">
"go_login">立即登录
导航条：结合实际情况完成样式
class="nav">
"put_login">登录
"put_register">注册
if="is_login" @close="close_login" @go="put_register" />
if="is_register" @close="close_register" @go="put_login" />
登录业务分析
多方式登录
""" 1）前台提供账号密码，账号可能是 用户名、手机号、邮箱等 接口： 后台只需要提供一个多方式登录接口即可 - 多方式登录接口 """
验证码登录
""" 1）前台提供手机号和验证码完成登录 接口： 前台填完手机号，往后台发送校验手机号的请求，如果存在继续，不存在提示注册 - 手机号存在与否接口 前台点击发送验证码，将手机再次发送给后台，后台将手机号通知给第三方，发送短信 - 手机验证码接口 前台点击登录提交手机号与验证码，完成验证码登录 - 验证码登录接口 """
注册业务分析
验证码注册
""" 1）前台提供手机号、验证码、密码完成注册 接口： 前台填完手机号，往后台发送校验手机号的请求，如果不存在继续，存在提示登录 - 手机号存在与否接口 前台点击发送验证码，将手机再次发送给后台，后台将手机号通知给第三方，发送短信 - 手机验证码接口 前台点击注册提交手机号、验证码及密码，完成验证码注册 - 验证码注册接口 """
汇总
""" 多方式登录接口 手机号存在与否接口 手机验证码接口 验证码登录接口 验证码注册接口 """