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;
<template> <div class="login"> <div class="box"> <i class="el-icon-close" @click="close_login"></i> <div class="content"> <div class="nav"> <span :class="{active: login_method === 'is_pwd'}" @click="change_login_method('is_pwd')">密码登录</span> <span :class="{active: login_method === 'is_sms'}" @click="change_login_method('is_sms')">短信登录</span> </div> <el-form v-if="login_method === 'is_pwd'"> <el-input placeholder="用户名/手机号/邮箱" prefix-icon="el-icon-user" v-model="username" clearable> </el-input> <el-input placeholder="密码" prefix-icon="el-icon-key" v-model="password" clearable show-password> </el-input> <el-button type="primary" @click="mul_login">登录</el-button> </el-form> <el-form v-if="login_method === 'is_sms'"> <el-input placeholder="手机号" prefix-icon="el-icon-phone-outline" v-model="mobile" clearable @blur="check_mobile"> </el-input> <el-input placeholder="验证码" prefix-icon="el-icon-chat-line-round" v-model="sms" clearable> <template slot="append"> <span class="sms" @click="send_sms">{{ sms_interval }}</span> </template> </el-input> <el-button type="primary" @click="sms_login">登录</el-button> </el-form> <div class="foot"> <span @click="go_register">立即注册</span> </div> </div> </div> </div> </template> <script> export default { name: "Login", data() { return { username: '', password: '', mobile: '', sms: '', login_method: 'is_pwd', sms_interval: '获取验证码', is_send: false, } }, methods: { close_login() { this.$emit('close') }, go_register() { this.$emit('go') }, change_login_method(method) { this.login_method = method; }, check_mobile() { if (!this.mobile) return; if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) { this.$message({ message: '手机号有误', type: 'warning', duration: 1000, onClose: () => { this.mobile = ''; } }); return false; } this.is_send = true; }, send_sms() { if (!this.is_send) return; this.is_send = false; let sms_interval_time = 60; this.sms_interval = "发送中..."; let timer = setInterval(() => { if (sms_interval_time <= 1) { clearInterval(timer); this.sms_interval = "获取验证码"; this.is_send = true; // 重新回复点击发送功能的条件 } else { sms_interval_time -= 1; this.sms_interval = `${sms_interval_time}秒后再发`; } }, 1000); this.$axios.get(this.$settings.base_url + 'user/userinfo/send_sms/?phone=' + this.mobile).then(res => { if (res.data.code == 100) { this.$message({ message: '发送成功', type: 'success' }); } else { this.$message({ message: '发送失败,请稍后再试', type: 'error' }); } }) }, mul_login() { if (this.username && this.password) { // 发送axios请求 this.$axios.post(this.$settings.base_url + 'user/login/mul_login/', {'username': this.username, 'password': this.password}).then(res => { console.log(res.data) if (res.data.code == 100) { // token,username,存起来(存到哪?) // 1 cookie中 2 localStorage 3 sessionStorage // localStorage.setItem('name', 'lqz') // sessionStorage.setItem('name', 'pyy') this.$cookies.set('token', res.data.token, '7d') this.$cookies.set('username', res.data.username, '7d') // 关闭模态框 this.$emit("close") } else { this.$message({ message: '用户名或密码错误', type: 'error' }); this.username = '' } }) } else { this.$message({ message: '用户名或密码不能为空', type: 'warning' }); } }, sms_login() { if (this.mobile && this.sms) { // 发送axios请求 this.$axios.post(this.$settings.base_url + 'user/login/mobile_login/', {'mobile': this.mobile, 'code': this.sms}).then(res => { console.log(res.data) if (res.data.code == 100) { this.$cookies.set('token', res.data.token, '7d') this.$cookies.set('username', res.data.username, '7d') // 关闭模态框 this.$emit("close") } else { this.$message({ message: '用户名或密码错误', type: 'error' }); this.username = '' } }) } else { this.$message({ message: '手机号或验证码不能为空', type: 'warning' }); } } } } </script> <style scoped> .login { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 10; background-color: rgba(0, 0, 0, 0.5); } .box { width: 400px; height: 420px; background-color: white; border-radius: 10px; position: relative; top: calc(50vh - 210px); left: calc(50vw - 200px); } .el-icon-close { position: absolute; font-weight: bold; font-size: 20px; top: 10px; right: 10px; cursor: pointer; } .el-icon-close:hover { color: darkred; } .content { position: absolute; top: 40px; width: 280px; left: 60px; } .nav { font-size: 20px; height: 38px; border-bottom: 2px solid darkgrey; } .nav > span { margin: 0 20px 0 35px; color: darkgrey; user-select: none; cursor: pointer; padding-bottom: 10px; border-bottom: 2px solid darkgrey; } .nav > span.active { color: black; border-bottom: 3px solid black; padding-bottom: 9px; } .el-input, .el-button { margin-top: 40px; } .el-button { width: 100%; font-size: 18px; } .foot > span { float: right; margin-top: 20px; color: orange; cursor: pointer; } .sms { color: orange; cursor: pointer; display: inline-block; width: 70px; text-align: center; user-select: none; } </style>
<template> <div class="header"> <div class="slogan"> <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p> </div> <div class="nav"> <ul class="left-part"> <li class="logo"> <router-link to="/"> <img src="../assets/img/head-logo.svg" alt=""> </router-link> </li> <li class="ele"> <span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">免费课</span> </li> <li class="ele"> <span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课</span> </li> <li class="ele"> <span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课</span> </li> </ul> <div class="right-part"> <div v-if="username"> <span>{{username}}</span> <span class="line">|</span> <span @click="logout">退出</span> </div> <div v-else> <span @click="put_login">登录</span> <span class="line">|</span> <span @click="put_register">注册</span> <Login v-if="is_login" @close="close_login" @go="put_register"/> <Register v-if="is_register" @close="close_register" @go="put_login"/> </div> </div> </div> </div> </template> <script> import Login from "./Login"; import Register from "./Register"; export default { name: "Header", data() { return { url_path: sessionStorage.url_path || '/', is_login: false, is_register: false, username: this.$cookies.get('username') } }, methods: { goPage(url_path) { // 已经是当前路由就没有必要重新跳转 if (this.url_path !== url_path) { this.$router.push(url_path); } sessionStorage.url_path = url_path; }, put_login() { this.is_login = true; this.is_register = false; }, put_register() { this.is_login = false; this.is_register = true; }, close_login() { this.is_login = false; this.username = this.$cookies.get('username') }, close_register() { this.is_register = false; }, logout() { this.$cookies.set('token', '') this.$cookies.set('username', '') this.username = '' } }, created() { sessionStorage.url_path = this.$route.path; this.url_path = this.$route.path; }, components: { Login, Register } } </script> <style scoped> .header { background-color: white; box-shadow: 0 0 5px 0 #aaa; } .header:after { content: ""; display: block; clear: both; } .slogan { background-color: #eee; height: 40px; } .slogan p { width: 1200px; margin: 0 auto; color: #aaa; font-size: 13px; line-height: 40px; } .nav { background-color: white; user-select: none; width: 1200px; margin: 0 auto; } .nav ul { padding: 15px 0; float: left; } .nav ul:after { clear: both; content: ''; display: block; } .nav ul li { float: left; } .logo { margin-right: 20px; } .ele { margin: 0 20px; } .ele span { display: block; font: 15px/36px '微软雅黑'; border-bottom: 2px solid transparent; cursor: pointer; } .ele span:hover { border-bottom-color: orange; } .ele span.active { color: orange; border-bottom-color: orange; } .right-part { float: right; } .right-part .line { margin: 0 10px; } .right-part span { line-height: 68px; cursor: pointer; } </style>
注册前端完成
register.py(发送短信功能+绑定注册事件)
<template> <div class="register"> <div class="box"> <i class="el-icon-close" @click="close_register"></i> <div class="content"> <div class="nav"> <span class="active">新用户注册</span> </div> <el-form> <el-input placeholder="手机号" prefix-icon="el-icon-phone-outline" v-model="mobile" clearable @blur="check_mobile"> </el-input> <el-input placeholder="密码" prefix-icon="el-icon-key" v-model="password" clearable show-password> </el-input> <el-input placeholder="验证码" prefix-icon="el-icon-chat-line-round" v-model="sms" clearable> <template slot="append"> <span class="sms" @click="send_sms">{{ sms_interval }}</span> </template> </el-input> <el-button type="primary" @click="register_btn">注册</el-button> </el-form> <div class="foot"> <span @click="go_login">立即登录</span> </div> </div> </div> </div> </template> <script> export default { name: "Register", data() { return { mobile: '', password: '', sms: '', sms_interval: '获取验证码', is_send: false, } }, methods: { close_register() { this.$emit('close', false) }, go_login() { this.$emit('go') }, check_mobile() { if (!this.mobile) return; if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) { this.$message({ message: '手机号有误', type: 'warning', duration: 1000, onClose: () => { this.mobile = ''; } }); return false; } this.is_send = true; }, send_sms() { if (!this.is_send) return; this.is_send = false; let sms_interval_time = 60; this.sms_interval = "发送中..."; let timer = setInterval(() => { if (sms_interval_time <= 1) { clearInterval(timer); this.sms_interval = "获取验证码"; this.is_send = true; // 重新回复点击发送功能的条件 } else { sms_interval_time -= 1; this.sms_interval = `${sms_interval_time}秒后再发`; } }, 1000); this.$axios.get(this.$settings.base_url+'user/userinfo/send_sms/?phone=' + this.mobile).then(res=>{ if (res.data.code==100){ this.$message({ message: '发送成功', type: 'success' }); }else{ this.$message({ message: '发送失败,请稍后再试', type: 'error' }); } }) }, register_btn(){ if (this.mobile&&this.sms &&this.password){ this.$axios.post(this.$settings.base_url+'user/register/',{ "mobile":this.mobile,'password':this.password,"code":this.sms }).then(res=>{ if (res.data.code==100){ this.$message({ message: '注册成功', type: 'success' }); // 关闭模态框 this.$emit("close") }else{ this.$message({ message: '注册失败', type: 'error' }); } }) } else{ this.$message({ message: '手机号或密码或验证码不能为空', type: 'warning' }); } } } } </script> <style scoped> .register { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 10; background-color: rgba(0, 0, 0, 0.3); } .box { width: 400px; height: 480px; background-color: white; border-radius: 10px; position: relative; top: calc(50vh - 240px); left: calc(50vw - 200px); } .el-icon-close { position: absolute; font-weight: bold; font-size: 20px; top: 10px; right: 10px; cursor: pointer; } .el-icon-close:hover { color: darkred; } .content { position: absolute; top: 40px; width: 280px; left: 60px; } .nav { font-size: 20px; height: 38px; border-bottom: 2px solid darkgrey; } .nav > span { margin-left: 90px; color: darkgrey; user-select: none; cursor: pointer; padding-bottom: 10px; border-bottom: 2px solid darkgrey; } .nav > span.active { color: black; border-bottom: 3px solid black; padding-bottom: 9px; } .el-input, .el-button { margin-top: 40px; } .el-button { width: 100%; font-size: 18px; } .foot > span { float: right; margin-top: 20px; color: orange; cursor: pointer; } .sms { color: orange; cursor: pointer; display: inline-block; width: 70px; text-align: center; user-select: none; } </style>