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到后台

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

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

        

            

                博客
                写博客
            
        
        

                登录
                注册
        
        

            {{name}} 
            退出登录
        
  

    

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

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();
?>

注册接口代码

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();
?>

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

参考文章链接