實現(xiàn)簡單登陸注冊功能流程分析

一：思路分析

用戶前端注冊賬號時懂傀，我們前端需要使用ajax訪問后端文件（下面以php文件舉例）经瓷，通過php文件操作服務(wù)器里面的數(shù)據(jù)庫恤磷，當然我們得提前建立好數(shù)據(jù)庫與表、編寫php文件訪問數(shù)據(jù)庫歌殃，將前端所需數(shù)據(jù)做輸出。前端則通過ajax訪問php文件哥童，獲取數(shù)據(jù)php文件中輸出的返回數(shù)據(jù)挺份。最終使用js操作編寫所需呈現(xiàn)給用戶的效果。若用戶前端登錄贮懈，登錄成功以后將信息保存至cookie中匀泊。后面通過讀取cookie中數(shù)據(jù)，將首頁登錄字更換為用戶賬戶名朵你。

二：關(guān)于建立數(shù)據(jù)庫與建表

這里使用Navicat來建立數(shù)據(jù)庫與表各聘，我們打開Navicat，點擊連接抡医，然后填寫新建鏈接中信息（連接名隨意取躲因，用戶名隨意仍缇础）。

數(shù)據(jù)庫中新建連接
然后我們點擊新建數(shù)據(jù)庫建立數(shù)據(jù)庫（數(shù)據(jù)庫名可以隨意填寫大脉，需要注意字符集和排序規(guī)則的格式）搞监，完了以后點擊確定。

新建數(shù)據(jù)庫

新建數(shù)據(jù)庫2
我們打開建好的數(shù)據(jù)庫镰矿，在點擊圖下方的新建表琐驴，填寫我們后面所需要用到的數(shù)據(jù)，一般情況賬戶名設(shè)置為不重復(fù)秤标，完了以后ctrl+s保存設(shè)置表名绝淡，當然我們也可以最開始就設(shè)置好表的名字。

打開建好的數(shù)據(jù)庫

填寫表的信息1

設(shè)置列不重復(fù)

設(shè)置表名

三苍姜、編寫PHP文件訪問服務(wù)器中數(shù)據(jù)庫

首先通過php文件對建立連接數(shù)據(jù)庫牢酵，設(shè)置編碼，選擇數(shù)據(jù)庫衙猪。然后在php文件里編寫SQL語句操作數(shù)據(jù)庫馍乙，做判斷將前端數(shù)據(jù)做返回。

//建立連接垫释，選擇數(shù)據(jù)庫的conn.php文件
<?php 
    //鏈接
    mysql_connect("localhost:3306","root","");
    mysql_query("set names 'utf8'");
    mysql_query("set character set 'utf8'");
    mysql_select_db("liyi");
 ?>

//這個是cors跨域php文件示例潘拨，該文件為login.php文件
<?php
    //添加請求頭
    header("Access-Control-Allow-Origin:*");
    $username=$_GET["username"];
    $password=$_GET["password"];
    //鏈接數(shù)據(jù)庫
    require "conn.php";
    //編寫SQL語句
    $sql = "SELECT username,password FROM users WHERE username='$username' AND password='$password'";
    $result = mysql_query($sql);

    if( $row = mysql_fetch_array($result,MYSQL_ASSOC)){
        $r = array("res_code"=>1,"res_err"=>"","res_body"=>$row);
        echo json_encode($r);//向前端返回數(shù)據(jù)
    }else{
        $r = array("res_code"=>-1,"res_err"=>"用戶名或密碼錯誤");
        echo json_encode($r);//向前端返回數(shù)據(jù)
    }
    mysql_close();
 ?>

//register.php文件
<?php
    //CORS跨域添加請求頭
    header("Access-Control-Allow-Origin:*"); 
    $username=$_POST["username"];
    $password=$_POST["password"];
    require "conn.php";
    $sql = "INSERT INTO users(username,password) VALUES('$username','$password')";
    $result = mysql_query($sql);
    if($result){
        $arr=array("res_code"=>1,"res_err"=>"");
        echo json_encode($arr);//向前端返回數(shù)據(jù)
    }else{
        $arr = array("res_code"=>-1,"res_err"=>"錯誤：".mysql_error());
        echo json_encode($arr);//向前端返回數(shù)據(jù)
    }
    mysql_close();
 ?>

四：前端通過ajax訪問獲取數(shù)據(jù)

前端通過ajax訪問獲取到數(shù)據(jù)以后，做判斷將所需內(nèi)容渲染至頁面饶号。下面是使用jQuery發(fā)起ajax請求訪問php文件獲取返回數(shù)據(jù)铁追。做登錄與注冊操作，登錄成功我們使用cookie將用戶信息保存至cookie中茫船。

//登錄頁面代碼示例
$.cookie.json=true;//這里使用了jquery中的cookie插件琅束，這個設(shè)置是將保存至cookie中的數(shù)據(jù)為json文本的形式做保存
$("#login").click(function(){
    const data = $("#sign_user").serialize();
    $.getJSON("http://localhost:80/php2/login.php",data,function(data){
        if(data.res_code==1){
            $("#prompt").html("登錄成功");
            location="/index.html";
            $.cookie("login_user",data,{path:"/",expires:7});
        }else{
            $("#prompt").html("用戶名或密碼錯誤");
        }
    })
    return false;
})

//當點擊注冊時
$.cookie.json=true;//這里使用了jquery中的cookie插件，這個設(shè)置是將保存至cookie中的數(shù)據(jù)為json文本的形式做保存
$("#register").click(function(){
    const data = $("#register_form").serialize();
    //獲取驗證框的value值
    const value= $("#checkout").val();
    //判斷是否和圖片上文字相同
    if(value == $(".code").data("content")){
        //判斷密碼和再次輸入密碼是否相同
        if($(".confirm").val()==$(".re-confirm").val()){
                //發(fā)起ajax請求
            $.post("http://localhost:80/php2/register.php",data,function(data){
                if(data.res_code==1){
                    console.log(1)
                    $(".prompt1").html(`禮易賬號注冊成功`);
                    location="/html/login.html";
                }else{
                    $(".prompt1").html(`禮易賬號已被注冊算谈，請更換賬戶名`);
                }
            },"json")
        }else if($(".confirm").val()!==$(".re-confirm").val()){
            $(".prompt1").html(`兩次輸入的密碼不相同涩禀，請再次確認`);
        }
    }else if(value !== $(".code").data("content")){
        $(".prompt1").html(`驗證碼輸入錯誤，請重新輸入`);
    }
    return false;
})