vue-cli 登录注册的实现

本文章给大家介绍使用vue.js完成简单的登录注册功能

功能概览

未登录状态

登录界面，登录用户不存在 提示用户进行注册

前往注册页面进行注册 注册成功后自动跳转到浏览博客页面


可以看到这时候数据表中已有数据

登录测试：
登录用户密码错误测试

登录成功测试

点击退出登录按钮，实际上就是删除了cookie，界面就会恢复未登录状态。

代码展示：

首先设置公共方法cookie，当用户登录成功时，会保存cookie

/*用export把方法暴露出来*/
/*设置cookie*/
export function setCookie(c_name,value,expire) {
    var date=new Date()
    date.setSeconds(date.getSeconds()+expire)
    document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString()
    console.log(document.cookie)
}
/*获取cookie*/
export function getCookie(c_name){
    if (document.cookie.length>0){
        let c_start=document.cookie.indexOf(c_name + "=")
        if (c_start!=-1){ 
            c_start=c_start + c_name.length+1 
            let c_end=document.cookie.indexOf(";",c_start)
            if (c_end==-1) c_end=document.cookie.length
                return unescape(document.cookie.substring(c_start,c_end))
            } 
        }
    return ""
}
/*删除cookie*/
export function delCookie(c_name){
    setCookie(c_name, "", -1)
}

登录功能代码，引入cookie，使用vue-resource将数据post到后台

<script>
import {setCookie,getCookie} from "../assets/js/cookie.js"
export default {
    name:"Login",
    props:['islogin'],
    data(){
        return{
            username:'',
            password:'',
            tishi:'',
            showTishi:false,
            currentState:this.islogin,
            current:false
        }
    },
    mounted(){
        if(getCookie('username')){
            this.$router.push({path:'/'})
            window.location.reload();
        }
    },
    methods:{
        login:function(){
            if(this.username == '' && this.password == ''){
                this.showTishi=true,
                this.tishi="请输入用户名和密码"

            }else if(this.username !== '' && this.password == ''){
                    this.showTishi=true,
                    this.tishi="请输入密码"
            }else if(this.username =='' && this.password !==''){
                    this.showTishi=true,
                    this.tishi="请输入用户名" 
            }else{
                var data={username:this.username,password:this.password}
                this.$http.post('http://localhost/blogdata/login.php',data).then((res)=>{
                    console.log(res);
                    if(res.data == 3){   //这里的data是后台返回的数据  要在后台编写
                            this.showTishi=true,
                            this.tishi="请先注册！"
                }else if(res.data == 1){
                    setCookie('username',this.username,1000*60)
                    setTimeout(function(){
                    this.$router.push({ path:'/'})
                        window.location.reload();
                    }.bind(this),1000)
                    // window.location.reload();
                }else{
                    this.showTishi=true,
                        this.tishi="密码错误！"
                }
            })
        }
        }
    }
}
</script>

注册功能代码，实际上与登录功能是类似的

<script>
import {setCookie,getCookie} from "../assets/js/cookie.js"
export default {
    name:"Register",
    data(){
        return{
            username:'',
            password:'',
            tishi:'',
            showTishi:false
        }
    },

    methods:{
        register:function(){

           if(this.username=='' && this.password==''){
                this.showTishi=true,
                this.tishi="请输入用户名和密码"
             
            }else if(this.username!=='' && this.password==''){
                this.showTishi=true,
                    this.tishi="请输入密码"

            }else if(this.username=='' && this.password!==''){
                this.showTishi=true,
                    this.tishi="请输入用户名"
            
            }else if(this.username !=='' && this.password !== ''){
                let data={'username':this.username,'password':this.password}
                this.$http.post("http://localhost/blogdata/register.php",data).then((res)=>{
                    console.log(res);
                    if(res.data == 2){   //这里的data是后台返回的数据  要在后台编写
                        this.showTishi=true,
                        this.tishi="该用户名已存在！"

                    }else if(res.data == 1){
                        setCookie('username',this.username,1000*60)
                        setTimeout(function(){
                        this.$router.push({ path:'/'})
                            window.location.reload();
                        }.bind(this),1000)
                        // window.location.reload();
                    }else{
                        this.showTishi=true,
                            this.tishi="注册失败！"

                }

            })
        }
        }
    }
}
</script>

附上登录注册按钮和登录成功后用户名退出按钮的显示与否的控制代码，使用的是 v-if和v-else 需要转化时只要改变“ok”的true false就可以啦

<nav>

        <ul id="blogcenter">
            <li>
                <router-link to="/" exact>博客</router-link>
                <router-link to="/add" exact>写博客</router-link>
            </li>
        </ul>
        <div id="registerLogin" v-if='ok'>
                <router-link to="/login" exact>登录</router-link>
                <router-link to="/register" exact>注册</router-link>
        </div>
        <div id="registerLogin" v-else>
            <span>{{name}}</span> 
            <span @click="quit" type='button'>退出登录</span>
        </div>
  

    </nav>

最后就是php接口的代码啦，使用xampp很方便，里面有自带的数据库管理库
登录接口代码

<?php
$request_body = file_get_contents('php://input');
$data = json_decode($request_body,true);     // 接收前台传过来的数据

$username=$data['username'];
$password=$data['password'];

// # 创建连接
        $mysqli=new mysqli("localhost","root","","people");

        #设置编码格式
        $mysqli->query("set names utf8");

        if($mysqli->connect_errno){
            
            die("数据库连接失败:".$mysqli->connect_errno);
        }else{
            $sql2="select username from user where username='$username'";
            $result2=$mysqli->query($sql2);   
            // $number=mysqli_num_rows($result);
            $number2=mysqli_num_rows($result2);
            if($number2){
                $sql="select username,password from user where username='$username' and password='$password'";
                $result=$mysqli->query($sql);   //这里的sql语句应该是检测数据库中是否存在用户输入的用户名和密码
                $number=mysqli_num_rows($result);
                echo $number;
            }else{
                echo 3;
            }   
        }
        $mysqli->close();
?>

注册接口代码

<?php
$request_body = file_get_contents('php://input');
$data2 = json_decode($request_body,true); // $data['content']

$username=$data2['username'];
$password=$data2['password'];

// # 创建连接
        $mysqli=new mysqli("localhost","root","","people");
        #设置编码格式
        $mysqli->query("set names utf8");
        if($mysqli->connect_errno){
            // die($mysqli->connect_error);
            die("数据库连接失败:".$mysqli->connect_errno);
        }else{
                $sql1="select username from user where username='$username'";
                $result1=$mysqli->query($sql1);
                $number=mysqli_num_rows($result1);
            if($number){
                echo 2;    //用户名已存在
            } else{
                $sql2="INSERT INTO `user` (`id`,`username`,`password`) VALUES (NULL,'$username','$password')";
            
                $result2=$mysqli->query($sql2);   
                echo $result2;    // 1
                }
            }
            
        $mysqli->close();
?>

好啦！到这里就结束了基本的登录注册功能的实现，小可爱点个赞哦！

参考文章链接