實現前后端登錄注冊界面

Blackjun 發布于2019-08-01 18:32 / 2018人閱讀

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

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

注冊界面

功能：

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

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

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

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

1.html部分：

2.js部分(由jquery實現)：

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

$("#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
    }

3.ajax發送post請求register頁面:

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

    $.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("郵箱輸錯了");
        }
        })
    })

4.服務端代碼：

給register頁面的(發送POST請求)設置路由，
后端代碼將瀏覽器傳來的request中的信息存儲到hash中，判斷是否符合輸入要求，同時判斷郵箱是否唯一，如果不符合，服務器返回400，給出提示；如果符合，返回200，將數據信息存儲到本地數據庫./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);
        })
    })
}

二·登錄界面

功能：

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

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

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

1.html部分：

2.JS部分：

將用戶填寫的登錄信息存儲到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
        }

3.ajax發送post請求login頁面：

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

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

4.給login頁面(post請求)設置路由：

讀取本地數據庫./db/users，與瀏覽器傳來的formdata進行比對，如果用戶密碼正確，給瀏覽器設置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
這里講到了給瀏覽器設置cookie，我們就來簡單了解一下什么是cookie。
三·cookie
cookie指某些網站為了辨別用戶身份、進行 session 跟蹤而儲存在用戶本地終端上的數據（通常經過加密）
服務器通過set-cookie后，給瀏覽器傳了一段識別身份的數據；之后瀏覽器給次請求都會附上這份cookie數據，服務器以此來驗明瀏覽器的身份。cookie的時效性一般是兩天左右，可以自行設置。
通俗的來講就是cookie就是一個驗證身份的門票，服務器給瀏覽器發了一張門票，瀏覽器請求數據時需要拿出門票，服務器看到門票后驗證了身份，才會同意請求。
這里值得注意的是cookie的作用域domain，cookie也遵守瀏覽器同源策略，不同域名的cookie的是不一樣的。
四·登錄后跳轉首頁
登錄界面獲取到瀏覽器設置的cookie，再次向服務器請求跳轉到首頁時需要附上這段cookie，服務器讀取后同意跳轉到首頁。
功能：
若登錄成功，跳轉到首頁，在首頁顯示登錄郵箱名
1.html部分(首頁)：

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

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

云服務器 GPU云服務器登錄注冊界面用php實現注冊界面前后端前后端分離

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51807.html

實現前后端登錄注冊界面

摘要：本篇博客講解如何實現前后端的簡單登錄注冊界面，后端代碼由實現，主要闡述登錄注冊時網頁工作原理。四登錄后跳轉首頁登錄界面獲取到瀏覽器設置的，再次向服務器請求跳轉到首頁時需要附上這段，服務器讀取后同意跳轉到首頁。本篇博客講解如何實現前后端的簡單登錄注冊界面，后端代碼由node.js實現，主要闡述登錄注冊時網頁工作原理。感興趣的同學可以參考一下。注冊界面功能：判斷用戶是否輸入郵箱，...

不知名網友 2019-08-26 11:36 評論0 收藏0
系統的講解 - SSO單點登錄

摘要：概念英文全稱，單點登錄。登錄如上述流程圖一致。系統和系統使用認證登錄。退出上圖，表示的是從某一個系統退出的流程圖。與的關系如果企業有多個管理系統，現由原來的每個系統都有一個登錄，調整為統一登錄認證。概念 SSO 英文全稱 Single Sign On，單點登錄。在多個應用系統中，只需要登錄一次，就可以訪問其他相互信任的應用系統。比如：淘寶網（www.taobao.com），天貓網...

Kylin_Mountain 2019-07-01 12:46 評論0 收藏0
Vue-book 2.0 一個移動端簡單的全棧 web APP

摘要：本項目是一個簡單的全棧項目，前端新手可以拿來練練手。項目實現了一些簡單的功能，后臺可以對圖書進行錄入錄出掃碼或手動，前臺顯示錄入的圖書，并且前臺注冊登錄后可以將書的訂單發給服務器，并存到服務器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【覺得不錯就來個 star 吧 ^_^】說明（菜鳥請進，大神繞道 ~）前端...

wh469012917 2019-06-27 16:37 評論0 收藏0
Vue-book 2.0 一個移動端簡單的全棧 web APP

摘要：本項目是一個簡單的全棧項目，前端新手可以拿來練練手。項目實現了一些簡單的功能，后臺可以對圖書進行錄入錄出掃碼或手動，前臺顯示錄入的圖書，并且前臺注冊登錄后可以將書的訂單發給服務器，并存到服務器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【覺得不錯就來個 star 吧 ^_^】說明（菜鳥請進，大神繞道 ~）前端...

NotFound 2019-08-20 16:53 評論0 收藏0
阿里云9.9元學生服務器的購買和配置方法

摘要：一通過學生價購買云服務器步驟一個人認證與實名認證進入阿里云官網點擊右上角登錄按鈕這里使用的是淘寶賬號密碼支付，這個大家應該都有吧，沒有自己去注冊個淘寶賬號輸入淘寶賬號密碼后點擊激活之后點頭像后點擊實名認證點擊支付寶認證點擊立即認證后進入支付一．通過學生價購買云服務器步驟一：個人認證與實名認證 1.進入阿里云官網2.點擊右上角登錄按鈕(這里使用的是淘寶賬號密碼支付，這個大家應該都有吧，沒有自...

ghnor 2019-04-24 19:40 評論0 收藏0