喵喵项目-后台登入（下）

一、开发前讲解

上篇已经开发完代理所需要的接口，然后可以直接去miaomiao项目里使用这些接口，从而实现登入的功能

二、开发组件

1.创建组件

在views下的Mine中新建center.vue文件 个人中心页面

<template>

</template>

<script>

export default {
    name : 'center'
}
</script>

<style scoped>

</style>

在components新建Register文件创建index.vue 注册页

<template>

</template>

<script>

export default {
    name : 'register'
}
</script>

<style scoped>

</style>

在components新建FindPassword文件创建index.vue 找回密码页

<template>

</template>

<script>

export default {
    name : 'findpassword'
}
</script>

<style scoped>

</style>

2.配置组件路由

修改routers下的mine中的index.js文件

export default {
    path : '/mine',
    component : () => import('@/views/Mine'),
    children : [
        {
            path : 'center',
            component : () => import('@/views/Mine/center.vue')
        },
        {
            path : 'login',
            component : () => import('@/components/Login')
        },
        {
            path : 'register',
            component : () => import('@/components/Register')
        },
        {
            path : 'findPassword',
            component : () => import('@/components/FindPassword')
        },
        {
            path : '/mine',
            redirect : 'center'
        }
    ]
}

3.新建提示框组件

为了提示登入成功等信息提示，创建一个弹出框组件，在components下新建js文件夹
然后在js文件夹中创建index.js和MessageBox文件
index.js:

import Vue from 'vue';
import MessageBox from './MessageBox';

export var messageBox = (function(){
    return function( opts ){
        var defaults = {
            title : '',
            content : '',
            cancel : '',
            ok : '',
            handleCancel : null,
            handleOk : null
        };

        var MyCompoent = Vue.extend(MessageBox);

        for (var attr in opts){
            defaults[attr] = opts[attr];
        }

        var vm = new MyCompoent({
            el : document.createElement('div'),
            data : {
                title : defaults.title,
                content : defaults.content,
                cancel : defaults.cancel,
                ok : defaults.ok
            },
            methods : {
                handleCancel(){
                    defaults.handleCancel && defaults.handleCancel.call(this);
                    document.body.removeChild( vm.$el );
                },
                handleOk(){
                    defaults.handleOk && defaults.handleOk.call(this);
                    document.body.removeChild( vm.$el );
                }
            }
        });

        document.body.appendChild( vm.$el );
    };
})();

MessageBox文件下的index.vue:

<template>
    <div class="messageBox">
        <h2> {{title}} </h2>
        <p> {{content}} </p>
        <div>
            <div v-if="cancel" @click="handleCancel"> {{cancel}} </div>
            <div v-if="ok" @click="handleOk"> {{ok}} </div>
        </div>
    </div>
</template>

<script>
export default {
    name : 'MessageBox'
}
</script>

<style scoped>
    .messageBox{ width: 200px; height: 120px;border: 1px #ccc solid; border-radius: 4px;background: white;box-shadow: 3px 3px 3px 3px #ccc;position: absolute;left: 50%;top: 50%;margin: -60px 0 0 -100px;}
    .messageBox h2{text-align: center;line-height: 40px;font-size: 18px;color: rgb(182, 50, 50);}
    .messageBox p{text-align: center;line-height: 40px;}
    .messageBox > div{display: flex;position: absolute;bottom: 0;width: 100%;border-top: 1px solid #ccc;}
    .messageBox > div div{flex: 1;text-align: center;line-height: 30px;border-right: solid 1px #ccc;}
    .messageBox > div div:last-child{border: none;}
</style>

三、功能实现

1.配置反向代理

和之前一样在vue.config.js中新添加反向代理

'/api2/' : {
	target: 'http://***.***.***.***:3000/', // 服务器代理的地址
	changeOrigin: true
},

记得配置好之后要重启项目之后才能实现

2.实现Login功能

login:登入页

<template>
    <div class="login_body">
        <div>
            <input v-model="username" class="login_text" type="text" placeholder="用户名">
        </div>
        <div>
            <input v-model="password" type="password" class="login_text" placeholder="请输入你的密码">
        </div>
        <div class="login_btn">
            <input type="submit" value="登入" @click='handleToLogin' >
        </div>
        <div class="login_link">
            <router-link to="/mine/register">立即注册</router-link>
            <router-link to="/mine/findPassword">找回密码</router-link>
        </div>
    </div>
</template>

<script>

import axios from 'axios'
import { messageBox } from '@/components/JS';

export default {
    name : 'Login',
    data(){
        return{
            username : '',
            password : '',
        }
    },
    methods : {
        handleToLogin(){
            if(this.username.length === 0){
                 messageBox({
                    title : '错误',
                    content : '请输入用户名',
                    ok : '确定',
                });
                return ;
            }
            if(this.password.length === 0){
                 messageBox({
                    title : '错误',
                    content : '请输入密码',
                    ok : '确定',
                });
                return ;
            }
            axios.post('/api2/users/login',{
                username : this.username,
                password : this.password
            }).then((res)=>{
                var status = res.data.status;
                var This = this
                if(status === 0){
                    this.$router.push('/mine/center');
                    messageBox({
                        title : '登入',
                        content : '登入成功',
                        ok : '确定'
                    });
                }else{
                    messageBox({
                        title : '登入',
                        content :  res.data.msg,
                        ok : '确定',
                    });
                }
            });
        },
    }
}
</script>

<style scoped>
    #content .login_body{width: 100%;}
    .login_body .login_text{width: 100%;height: 40px;border: none;border-bottom: 1px #ccc solid; margin-bottom: 5px;outline: none;text-align: 10px;}
    .login_body .login_btn{height: 50px;margin: 10px;}
    .login_body .login_btn input{width: 100%;height: 100%;background: #e54847;border-radius: 3px;border: none;display:block;color: white;font-size: 20px;}
    .login_body .login_link{display: flex;justify-content: space-around;}
    .login_body .login_link a{text-decoration: none; margin: 0 5px;font-size: 12px;color: #e54847;}
</style>

2.实现Center功能

center:个人中心页

<template>
    <el-collapse accordion>
        <div>
            <div class="center">个人中心</div>
        </div>
        <el-collapse-item title="当前用户" name="7">
            <div class="development"> {{$store.state.user.name}}</div>
        </el-collapse-item>
        <el-collapse-item title="用户身份" name="8">
            <div class="development">普通会员</div>
        </el-collapse-item>
        <el-collapse-item title="我的消息" name="1">
            <div class="development">此功能正在加急开发中......</div>
        </el-collapse-item>
        <el-collapse-item title="我的收藏" name="2">
            <div class="development">此功能正在加急开发中......</div>
        </el-collapse-item>
        <el-collapse-item title="我的电影" name="3">
            <div class="development">此功能正在加急开发中......</div>
        </el-collapse-item>
        <el-collapse-item title="会员中心" name="4">
            <div class="development">此功能正在加急开发中......</div>
        </el-collapse-item>
        <el-collapse-item title="我的社区" name="5">
            <div class="development">此功能正在加急开发中......</div>
        </el-collapse-item>
        <el-collapse-item title="设置" name="6">
            <div class="development">此功能正在加急开发中......</div>
        </el-collapse-item>
        <div class="exit"><a href="javascript:;" @click='handleToLogout'>  退出</a></div>
    </el-collapse>
</template>

<script>

import axios from 'axios'

export default {
    name : 'center',
    methods : {
        handleToLogout(){
            axios.get('/api2/users/logout').then((res)=>{
                var status = res.data.status;
                if(status === 0){
                    localStorage.removeItem('name');
                    this.$router.push('/mine/login')
                }
            });
        }
    },
    beforeRouteEnter (to, from, next) {
        axios.get('/api2/users/getUser').then((res)=>{
            var status = res.data.status;
            if(status === 0){
                next(vm=>{
                    localStorage.setItem('name',res.data.data.username);
                });
            }else{
                next('/mine/login');
            }
        });
    }
}
</script>

<style scoped>
.center{text-align: center;font-size: 18px;margin-top: 10px;}
.development{color: cadetblue;margin-left: 4px;}
.exit{position: absolute;bottom: 5px;right: 5px;}
.exit a{text-decoration:none;}
</style>

3.实现Register功能

register:找回密码页

<template>
    <div class="register_body">
        <div class="register_email">
            <input v-model="email" class="register_text" type="text" placeholder="请输入你的邮箱"> <button :disabled='disabled' @click="handleToVerify">{{verifyInfo}}</button>
        </div>
        <div>
            <input v-model="username" class="register_text" placeholder="请输入你的用户名" type="text">
        </div>
        <div>
            <input v-model="password" class="register_text" placeholder="请输入你的密码" type="password">
        </div>
        <div>
            <input v-model="againPassword" class="register_text" placeholder="请再次确定你的密码" type="password">
        </div>
        <div>
            <input v-model="verify" placeholder="请输入验证码" class="register_text" type="text">
        </div>
        <div class="register_btn">
            <button @click="handleToRegister">注册</button>
        </div>
        <div class="register_link">
            <router-link to="/mine/login">立即登入</router-link>
            <router-link to="/mine/findPassword">找回密码</router-link>
        </div>
    </div>
</template>

<script>
import {messageBox} from '@/components/JS';
import axios from 'axios'
export default {
    name : 'register',
    data(){
        return{
            email : '',
            username : '',
            password : '',
            againPassword : '',
            verify : '',
            verifyInfo : '发送验证码',
            disabled : false
        }
    },
    methods : {
        handleToVerify(){
            if(this.disabled){return;}
            axios.get('/api2/users/verify?email=' + this.email).then((res)=>{
                var status = res.data.status;
                if( status === 0 ){
                    this.countDown();
                    messageBox({
                        title : '验证码',
                        content : '验证码发送成功',
                        ok : '确定'
                    });
                }else{
                    messageBox({
                        title : '验证码',
                        content : '验证码发送失败',
                        ok : '确定'
                    });
                }
            })
        },
        handleToRegister(){
            if(this.email.length === 0){
                 messageBox({
                    title : '错误',
                    content : '请输入邮箱',
                    ok : '确定',
                });
                return ;
            }
            if(this.username.length === 0){
                 messageBox({
                    title : '错误',
                    content : '请输入用户名',
                    ok : '确定',
                });
                return ;
            }
            if(this.password.length === 0){
                 messageBox({
                    title : '错误',
                    content : '请输入密码',
                    ok : '确定',
                });
                return ;
            }
            if(this.password !== this.againPassword){
                 messageBox({
                    title : '错误',
                    content : '两次输入的密码不一样',
                    ok : '确定',
                });
                return ;
            }
            if(!this.disabled){
                 messageBox({
                    title : '错误',
                    content : '验证码未发送',
                    ok : '确定',
                });
                return ;
            }
            if(this.verify.length === 0){
                 messageBox({
                    title : '错误',
                    content : '请输入验证码',
                    ok : '确定',
                });
                return ;
            }
            axios.post('/api2/users/register',{
                email : this.email,
                username : this.username,
                password : this.password,
                verify : this.verify
            }).then((res)=>{
                var status = res.data.status;
                var This = this;
                if(status === 0){
                     messageBox({
                        title : '注册',
                        content : '用户注册成功',
                        ok : '确定',
                        handleOk(){
                            This.$router.push('/mine/login');
                        }
                    });
                }else{
                    messageBox({
                        title : '注册',
                        content : res.data.msg + ',请重新注册',
                        ok : '确定'
                    });
                }
            });
        },
        countDown(){
            this.disabled = true;
            var count = 60;
            var timer = setInterval(()=>{
                count--;
                this.verifyInfo="剩余"+ count +"秒";
                if(count==0){
                    this.disabled=false;
                    count=60;
                    this.verifyInfo = '发送验证码';
                    clearInterval(timer);
                }
            },1000)
        }
    }
}
</script>

<style scoped>
    #content .register_body{width: 100%;}
    .register_body .register_text{width: 100%;height: 40px;border: none;border-bottom: 1px #ccc solid; margin-bottom: 5px;outline: none;text-align: 10px;}
    .register_body .register_btn{height: 50px;margin: 10px;}
    .register_body .register_email{position: relative;}
    .register_body .register_email button{position: absolute;right: 10px;top: 8px;height: 30px;border-radius: 3px;border: none;padding: 5px;}
    .register_body .register_btn button{width: 100%;height: 100%;background: #e54847;border-radius: 3px;border: none;display:block;color: white;font-size: 20px;}
    .register_body .register_link{display: flex;justify-content: space-around;}
    .register_body .register_link a{text-decoration: none; margin: 0 5px;font-size: 12px;color: #e54847;}
</style>

4.实现FindPassword功能

findPassword:找回密码页

<template>
    <div class="password_body">
        <div class="password_email">
            <input v-model="email" placeholder="请输入你的邮箱" class="password_text" type="text"> <button :disabled='disabled' @click="handleToVerify">{{verifyInfo}}</button>
        </div>
        <div>
            <input v-model="password" placeholder="请输入你的新密码" class="password_text" type="password">
        </div>
        <div>
            <input v-model="againPassword" placeholder="请再次确定你的新密码" class="password_text" type="password">
        </div>
        <div>
            <input v-model="verify" placeholder="请输入验证码" class="password_text" type="text">
        </div>
        <div class="password_btn">
            <button @click="handleToPassword">修改密码</button>
        </div>
        <div class="password_link">
            <router-link to="/mine/login">立即登入</router-link>
            <router-link to="/mine/register">立即注册</router-link>
        </div>
    </div>
</template>

<script>

import axios from 'axios'
import {messageBox} from '@/components/JS';

export default {
    name : 'findPassword',
    data(){
        return {
            email : '',
            password : '',
            againPassword : '',
            verify : '',
            verifyInfo : '发送验证码',
            disabled : false
        }
    },
    methods : {
        handleToVerify(){
            if(this.disabled){return;}
            axios.get('/api2/users/verify?email=' + this.email).then((res)=>{
                var status = res.data.status;
                if( status === 0 ){
                    this.countDown();
                    messageBox({
                        title : '验证码',
                        content : '验证码发送成功',
                        ok : '确定'
                    });
                }else{
                    messageBox({
                        title : '验证码',
                        content : '验证码发送失败',
                        ok : '确定'
                    });
                }
            })
        },
        handleToPassword(){
            if(this.email.length === 0){
                 messageBox({
                    title : '错误',
                    content : '请输入邮箱',
                    ok : '确定',
                });
                return ;
            }
            if(this.password.length === 0){
                 messageBox({
                    title : '错误',
                    content : '请输入新密码',
                    ok : '确定',
                });
                return ;
            }
            if(!this.disabled){
                 messageBox({
                    title : '错误',
                    content : '验证码未发送',
                    ok : '确定',
                });
                return ;
            }
            if(this.password !== this.againPassword){
                 messageBox({
                    title : '错误',
                    content : '两次输入的密码不一样',
                    ok : '确定',
                });
                return ;
            }
            if(this.verify.length === 0){
                 messageBox({
                    title : '错误',
                    content : '请输入验证码',
                    ok : '确定',
                });
                return ;
            }
            axios.post('/api2/users/findPassword',{
                email : this.email,
                password : this.password,
                verify : this.verify
            }).then((res)=>{
                var status = res.data.status;
                var This = this;
                if(status === 0){
                    messageBox({
                        title : '修改',
                        content : '修改密码成功',
                        ok : '确定',
                        handleOk(){
                            This.$router.push('/mine/login')
                        }
                    });
                }else{
                    messageBox({
                        title : '修改',
                        content : res.data.msg,
                        ok : '确定'
                    });
                }
            });
        },
        countDown(){
            this.disabled = true;
            var count = 60;
            var timer = setInterval(()=>{
                count--;
                this.verifyInfo="剩余"+ count +"秒";
                if(count==0){
                    this.disabled=false;
                    count=60;
                    this.verifyInfo = '发送验证码';
                    clearInterval(timer);
                }
            },1000)
        }
    }
}
</script>

<style scoped>
    #content .password_body{width: 100%;}
    .password_body .password_text{width: 100%;height: 40px;border: none;border-bottom: 1px #ccc solid; margin-bottom: 5px;outline: none;text-align: 10px;}
    .password_body .password_btn{height: 50px;margin: 10px;}
    .password_body .password_email{position: relative;}
    .password_body .password_email button{position: absolute;right: 10px;top: 7px;height: 30px;border-radius: 3px;border: none;padding: 5px;}
    .password_body .password_btn button{width: 100%;height: 100%;background: #e54847;border-radius: 3px;border: none;display:block;color: white;font-size: 20px;}
    .password_body .password_link{display: flex;justify-content: space-around;}
    .password_body .password_link a{text-decoration: none; margin: 0 5px;font-size: 12px;color: #e54847;}
</style>

四、构建发布

和之前我写的文章《喵喵电影-前端页面开发》一样的发布步骤，只不过这里需要新添加一个反向代理

五、项目展示与分享

1.项目展示

电影页

影院页

登入页

2.资源分享

感兴趣的小伙伴可以去我发布的网址去看一眼我发布的文件是怎样的： 喵喵电影
这边还有我上传的文件 ： miaomiao写的所有内容全在里面，打包之后的文件也在这，欢迎下载