24 登录注册前端完成
1 cookie中 2 localStorage 3 sessionStorage cookie 可以设置过期时间,借助于第三方模块,vue-cookies -cnpm install vue-cookies -S -main.js中 import cookies from 'vue-cookies' Vue.prototype.$cookies = cookies; localStorage:永久存储 sessionStorage:关闭浏览器就失效
2.下载vue-cookie
cnpm install vue-cookies -S
3.main.js
import cookies from 'vue-cookies' Vue.prototype.$cookies = cookies;
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" @click="mul_login">登录
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" @click="sms_login">登录
class="foot">
"go_register">立即注册
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">
if="username">
{{username}}
class="line">|
"logout">退出
else>
"put_login">登录
class="line">|
"put_register">注册
if="is_login" @close="close_login" @go="put_register"/>
if="is_register" @close="close_register" @go="put_login"/>
注册前端完成
register.py(发送短信功能+绑定注册事件)
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" @click="register_btn">注册
class="foot">
"go_login">立即登录