打通前台登录注册

前台

Login.vue

    
        
            
            
                
                    密码登录
                    短信登录
                

                
                    
                    
                    
                    
                    登录
                

                
                    
                    
                    
                        
                            {{ sms_interval }}
                        
                    
                    登录
                

                
                    立即注册
                
            
        
    



    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;
                // js正则：/正则语法/
                // '字符串'.match(/正则语法/)
                if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
                    this.$message({
                        message: '手机号有误',
                        type: 'warning',
                        duration: 1000,
                        onClose: () => {
                            this.mobile = '';
                        }
                    });
                    return false;
                }
                // 后台校验手机号是否已存在
                this.$axios({
                    url: this.$settings.base_url + '/user/mobile/',
                    method: 'post',
                    data: {
                        mobile: this.mobile
                    }
                }).then(response => {
                    let result = response.data.result;
                    if (result) {
                        this.$message({
                            message: '账号正常',
                            type: 'success',
                            duration: 1000,
                        });
                        // 发生验证码按钮才可以被点击
                        this.is_send = true;
                    } else {
                        this.$message({
                            message: '账号不存在',
                            type: 'warning',
                            duration: 1000,
                            onClose: () => {
                                this.mobile = '';
                            }
                        })
                    }
                }).catch(() => {
                });
            },
            send_sms() {
                // this.is_send必须允许发生验证码，才可以往下执行逻辑
                if (!this.is_send) return;
                // 按钮点一次立即禁用
                this.is_send = false;

                let sms_interval_time = 60;
                this.sms_interval = "发送中...";

                // 定时器: setInterval(fn, time, args)

                // 往后台发送验证码
                this.$axios({
                    url: this.$settings.base_url + '/user/sms/',
                    method: 'get',
                    params: {
                        mobile: this.mobile
                    }
                }).then(response => {
                    let result = response.data.result;
                    if (result) { // 发送成功
                        let timer = setInterval(() => {
                            if (sms_interval_time  {
                    this.sms_interval = "频率过快";
                    this.is_send = true;
                })


            },
            login() {
                if (!(this.username && this.password)) {
                    this.$message({
                        message: '请填好账号密码',
                        type: 'warning',
                        duration: 1500
                    });
                    return false  // 直接结束逻辑
                }

                this.$axios({
                    url: this.$settings.base_url + '/user/login/',
                    method: 'post',
                    data: {
                        username: this.username,
                        password: this.password,
                    }
                }).then(response => {
                    let username = response.data.result.username;
                    let token = response.data.result.token;
                    let user_id = response.data.result.id;
                    this.$cookies.set('username', username, '7d');
                    this.$cookies.set('token', token, '7d');
                    this.$cookies.set('user_id', user_id, '7d');
                    this.$emit('success', response.data.result);
                }).catch(error => {
                    console.log(error.response.data)
                })
            },
            mobile_login () {
                if (!(this.mobile && this.sms)) {
                    this.$message({
                        message: '请填好手机与验证码',
                        type: 'warning',
                        duration: 1500
                    });
                    return false  // 直接结束逻辑
                }

                this.$axios({
                    url: this.$settings.base_url + '/user/mobile/login/',
                    method: 'post',
                    data: {
                        mobile: this.mobile,
                        code: this.sms,
                    }
                }).then(response => {
                    let username = response.data.result.username;
                    let token = response.data.result.token;
                    let user_id = response.data.result.id;
                    this.$cookies.set('username', username, '7d');
                    this.$cookies.set('token', token, '7d');
                    this.$cookies.set('user_id', user_id, '7d');
                    this.$emit('success', response.data.result);
                }).catch(error => {
                    console.log(error.response.data)
                })
            }
        }
    }



    .login {
        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: 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;
    }

Register.vue

    
        
            
            
                
                    新用户注册
                
                
                    
                    
                    
                    
                    
                        
                            {{ sms_interval }}
                        
                    
                    注册
                
                
                    立即登录
                
            
        
    



    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;
                // js正则：/正则语法/
                // '字符串'.match(/正则语法/)
                if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
                    this.$message({
                        message: '手机号有误',
                        type: 'warning',
                        duration: 1000,
                        onClose: () => {
                            this.mobile = '';
                        }
                    });
                    return false;
                }
                // 后台校验手机号是否已存在
                this.$axios({
                    url: this.$settings.base_url + '/user/mobile/',
                    method: 'post',
                    data: {
                        mobile: this.mobile
                    }
                }).then(response => {
                    let result = response.data.result;
                    if (!result) {
                        this.$message({
                            message: '欢迎注册我们的平台',
                            type: 'success',
                            duration: 1500,
                        });
                        // 发生验证码按钮才可以被点击
                        this.is_send = true;
                    } else {
                        this.$message({
                            message: '账号已存在，请直接登录',
                            type: 'warning',
                            duration: 1500,
                        })
                    }
                }).catch(() => {});
            },
            send_sms() {
                // this.is_send必须允许发生验证码，才可以往下执行逻辑
                if (!this.is_send) return;
                // 按钮点一次立即禁用
                this.is_send = false;

                let sms_interval_time = 60;
                this.sms_interval = "发送中...";

                // 定时器: setInterval(fn, time, args)

                // 往后台发送验证码
                this.$axios({
                    url: this.$settings.base_url + '/user/sms/',
                    method: 'get',
                    params: {
                        mobile: this.mobile
                    }
                }).then(response => {
                    let result = response.data.result;
                    if (result) { // 发送成功
                        let timer = setInterval(() => {
                            if (sms_interval_time  {
                    this.sms_interval = "频率过快";
                    this.is_send = true;
                })


            },
            register () {
                if (!(this.mobile && this.sms && this.password)) {
                    this.$message({
                        message: '请填好手机、密码与验证码',
                        type: 'warning',
                        duration: 1500
                    });
                    return false  // 直接结束逻辑
                }

                this.$axios({
                    url: this.$settings.base_url + '/user/register/',
                    method: 'post',
                    data: {
                        mobile: this.mobile,
                        code: this.sms,
                        password: this.password
                    }
                }).then(response => {
                    this.$message({
                        message: '注册成功，3秒跳转登录页面',
                        type: 'success',
                        duration: 3000,
                        showClose: true,
                        onClose: () => {
                            // 去向成功页面
                            this.$emit('success')
                        }
                    });
                }).catch(error => {
                    this.$message({
                        message: '注册失败，请重新注册',
                        type: 'warning',
                        duration: 1500,
                        showClose: true,
                        onClose: () => {
                            // 清空所有输入框
                            this.mobile = '';
                            this.password = '';
                            this.sms = '';
                        }
                    });
                })
            }
        }
    }



    .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;
    }

Header.vue

    
        
            
老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活
        
        
            

                

                    
                        
                    
                
                

                    免费课
                
                

                    实战课
                
                

                    轻课
                
            

            
                
                    登录
                    |
                    注册
                
                
                    {{ username }}
                    |
                    注销
                
    		
        
        
        
    



    import Login from './Login'
    import Register from "./Register"

    export default {
        name: "Header",
        data() {
            return {
                url_path: sessionStorage.url_path || '/',
                token: '',
                username: '',
                user_id: '',
                is_login: false,
                is_register: false,
            }
        },
        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;
            },
            close_register() {
                this.is_register = false;
            },
            success_login(data) {
                this.is_login = false;
                this.username = data.username;
                this.token = data.token;
                this.user_id = data.user_id;
            },
            logout() {
                this.token = '';
                this.username = '';
                this.user_id = '';
                this.$cookies.remove('username');
                this.$cookies.remove('token');
                this.$cookies.remove('user_id');
            },
            success_register () {
                this.is_register = false;
                this.is_login = true;
            }
        },
        created() {
            sessionStorage.url_path = this.$route.path;
            this.url_path = this.$route.path;

            // 检测cookies，查看登录状态
            this.username = this.$cookies.get('username');
            this.token = this.$cookies.get('token');
            this.user_id = this.$cookies.get('user_id');
        },
        components: {
            Login,
            Register,
        }
    }



    .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;
    }