摘要：本篇博客講解如何實現(xiàn)前后端的簡單登錄注冊界面，后端代碼由實現(xiàn)，主要闡述登錄注冊時網(wǎng)頁工作原理。四登錄后跳轉(zhuǎn)首頁登錄界面獲取到瀏覽器設(shè)置的，再次向服務(wù)器請求跳轉(zhuǎn)到首頁時需要附上這段，服務(wù)器讀取后同意跳轉(zhuǎn)到首頁。

本篇博客講解如何實現(xiàn)前后端的簡單登錄注冊界面，后端代碼由node.js實現(xiàn)，主要闡述登錄注冊時網(wǎng)頁工作原理。感興趣的同學(xué)可以參考一下。

功能：

判斷用戶是否輸入郵箱，密碼，驗證密碼(前端判斷)

判斷用戶的郵箱格式是否正確(后端判斷)

判斷輸入的密碼和驗證密碼是否一致(前端判斷)

判斷注冊的郵箱是否唯一(后端判斷)

    
注冊
    

        

            郵箱
            
            
        
        

            密碼
            
            
        
          

              確認(rèn)密碼
              
              
          
            

                
            

    

監(jiān)聽表單的submit事件，將用戶輸入的信息存儲到hash表中，如果用戶輸入不合法則出現(xiàn)錯誤提示信息

$("#RegisterForm").on("submit",(e) => {
    e.preventDefault();
    let hash = {};
    let arg = ["email","password","password_confirm"];
    arg.forEach((name) => {
        let value = $("#RegisterForm").find(`[name= ${name}]`).val();
        hash[name] = value;
    })
    $("#RegisterForm").find(".error").each((index,span) => {
        $(span).text(""); //初始的錯誤提示為空
    })
    if(hash["email"] === ""){
        $("#RegisterForm").find("[name = "email"]").siblings(".error").text("請輸入郵箱");
        return
    }
     if(hash["password"] === ""){
        $("#RegisterForm").find("[name = "password"]").siblings(".error").text("請輸入密碼");
        return
    }
    if(hash["password_confirm"] === ""){
        $("#RegisterForm").find("[name = "password_confirm"]").siblings(".error").text("請輸入密碼");
        return
    }
    if(hash["password"] !== hash["password_confirm"] ){
        $("#RegisterForm").find("[name = "password_confirm"]").siblings(".error").text("密碼不匹配");
        return
    }

如果請求成功，打印出返回的信息；
如果請求失敗，判斷一下失敗信息，然后給出錯誤信息提示；

    $.post("/register",hash).then((response) =>{console.log(response)},
        (request) => {
        let {errors} = request.responseJSON;/*等價于----
-------let {errors} = JSON.parse(request.responseText)*/
        if(errors.email  &&  errors.email === "invalid"){
           $("#RegisterForm").find("[name = "email"]")
.siblings(".error").text("郵箱輸錯了");
        }
        })
    })

給register頁面的(發(fā)送POST請求)設(shè)置路由，
后端代碼將瀏覽器傳來的request中的信息存儲到hash中，判斷是否符合輸入要求，同時判斷郵箱是否唯一，如果不符合，服務(wù)器返回400，給出提示；如果符合，返回200，將數(shù)據(jù)信息存儲到本地數(shù)據(jù)庫./db/users

else if(path === "/register" && method ==="POST"){
        readBody(request).then((body) => {
            let strings = body.split("& ");
            let hash = {};
            strings.forEach((string) => {
                let parts = string.split("=");
                let key = parts[0];
                let value = parts[1];
                hash[key] = decodeURIComponent(value) ;//解決url路徑解析不了@符號的問題
               })
                let {email, password, password_confirm} = hash;

                if (email.indexOf("@") === -1) {
                    response.statusCode = 400;
                    response.setHeader("Content-Type", "text/json;charset=utf-8")
                    response.write(`{"errors":
                    {"email":"invalid"}
                    }`);
                }
                else if (password !== password_confirm) {
                    response.statusCode = 400;
                    response.write("password not match");
                }
                else {
                    var users = fs.readFileSync("./db/users","utf8")
                    try{
                         users = JSON.parse(users)
                    }
                    catch(exception) {
                        users = [];
                    }
                    let inUse = false;
                    for(let i = 0;i {
        let body = [];
        request.on("data",(chunk) => {
            body.push(chunk)
        }).on("end",() => {
            body = Buffer.concat(body).toString();
            resolve(body);
        })
    })
}

功能：

判斷用戶輸入的郵箱，密碼是否為空(前端判斷)

判斷用戶輸入的郵箱是否正確(后端判斷)

判斷輸入的密碼是否正確(后端判斷)

    
登錄
    

        

            郵箱
            
            
        
        

            密碼
            
            
        

        

            
        

    

將用戶填寫的登錄信息存儲到hash表中，如果用戶輸入為空，則給出錯誤信息提示

  $("#loginForm").on("submit",(e) => {
        e.preventDefault();
        let hash = {};
        let arg = ["email","password"];
        arg.forEach((name) => {
            let value = $("#loginForm").find(`[name= ${name}]`).val();
            hash[name] = value;
        })
        $("#loginForm").find(".error").each((index,span) => {
            $(span).text("");
        })
        if(hash["email"] === ""){
            $("#loginForm").find("[name = "email"]").siblings(".error").text("請輸入郵箱");
            return
        }
        if(hash["password"] === ""){
            $("#loginForm").find("[name = "password"]").siblings(".error").text("請輸入密碼");
            return
        }

如果請求成功，跳轉(zhuǎn)到首頁；如果請求失敗，給出登錄失敗的提示

     $.post("/login",hash).then(() =>{window.location.href="/"},
         () => {
              alert("登錄失敗，請重新登錄")
          })
    })

讀取本地數(shù)據(jù)庫./db/users，與瀏覽器傳來的formdata進(jìn)行比對，如果用戶密碼正確，給瀏覽器設(shè)置cookie，將用戶登錄的郵箱名存下來，返回200

 else if(path==="/login" && method ==="POST"){
        readBody(request).then((body) => {
            let strings = body.split("&");
            let hash = {};
            strings.forEach((string) => {
                let parts = string.split("=");
                let key = parts[0];
                let value = parts[1];
                hash[key] = decodeURIComponent(value);
            })
            let {email, password} = hash;
            var users = fs.readFileSync("./db/users","utf8")
            try{
                users = JSON.parse(users)
            }
            catch(exception) {
                users = [];
            }
            let found ;
            for(let i = 0;i
這里講到了給瀏覽器設(shè)置cookie，我們就來簡單了解一下什么是cookie。
三·cookie
cookie指某些網(wǎng)站為了辨別用戶身份、進(jìn)行 session 跟蹤而儲存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過加密）
服務(wù)器通過set-cookie后，給瀏覽器傳了一段識別身份的數(shù)據(jù)；之后瀏覽器給次請求都會附上這份cookie數(shù)據(jù)，服務(wù)器以此來驗明瀏覽器的身份。cookie的時效性一般是兩天左右，可以自行設(shè)置。
通俗的來講就是cookie就是一個驗證身份的門票，服務(wù)器給瀏覽器發(fā)了一張門票，瀏覽器請求數(shù)據(jù)時需要拿出門票，服務(wù)器看到門票后驗證了身份，才會同意請求。
這里值得注意的是cookie的作用域domain，cookie也遵守瀏覽器同源策略，不同域名的cookie的是不一樣的。
四·登錄后跳轉(zhuǎn)首頁
登錄界面獲取到瀏覽器設(shè)置的cookie，再次向服務(wù)器請求跳轉(zhuǎn)到首頁時需要附上這段cookie，服務(wù)器讀取后同意跳轉(zhuǎn)到首頁。
功能：
若登錄成功，跳轉(zhuǎn)到首頁，在首頁顯示登錄郵箱名
1.html部分(首頁)：

這是首頁
用戶: --email--

2.給首頁設(shè)置路由：
讀取cookie值，展示在首頁上，顯示當(dāng)前登錄的用戶郵箱名
 else if(path === "/"){
        let string = fs.readFileSync("./index.html", "utf8")
        let cookies = request.headers.cookie.split("; ");/*這里多出一個空格，要注意*/
        let hash = {};
        for(let i =0 ;i
總結(jié)
講解完實現(xiàn)過程后，我們來總結(jié)一下：
當(dāng)我們進(jìn)行登錄注冊時，網(wǎng)頁都做了些什么呢？
1.我們進(jìn)行注冊時，瀏覽器向服務(wù)器發(fā)送post請求，同時將注冊信息傳過去；
2.服務(wù)器將用戶信息存儲到本地數(shù)據(jù)庫后，告知瀏覽器注冊成功
3.用戶打開登錄界面，輸入登錄信息，向服務(wù)器發(fā)送post請求
4.服務(wù)器讀取本地數(shù)據(jù)庫，比對登錄信息是否正確，若錯誤，告知瀏覽器登錄失敗；若正確給瀏覽器設(shè)置cookie
5.瀏覽器向服務(wù)器發(fā)送get請求，訪問首頁，附上cookie
6.服務(wù)器讀取cookie，驗證身份后，同意瀏覽器訪問首頁
源碼
附上一個vue版本帶有登錄注冊功能的備忘錄demo
以上是個人觀點，如有錯誤歡迎指出。