實(shí)現(xiàn)前后端登錄注冊(cè)界面

Blackjun 發(fā)布于2019-08-01 18:32 / 2033人閱讀

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

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

注冊(cè)界面

功能：

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

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

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

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

1.html部分：

2.js部分(由jquery實(shí)現(xiàn))：

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

$("#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(""); //初始的錯(cuò)誤提示為空
    })
    if(hash["email"] === ""){
        $("#RegisterForm").find("[name = "email"]").siblings(".error").text("請(qǐng)輸入郵箱");
        return
    }
     if(hash["password"] === ""){
        $("#RegisterForm").find("[name = "password"]").siblings(".error").text("請(qǐng)輸入密碼");
        return
    }
    if(hash["password_confirm"] === ""){
        $("#RegisterForm").find("[name = "password_confirm"]").siblings(".error").text("請(qǐng)輸入密碼");
        return
    }
    if(hash["password"] !== hash["password_confirm"] ){
        $("#RegisterForm").find("[name = "password_confirm"]").siblings(".error").text("密碼不匹配");
        return
    }

3.ajax發(fā)送post請(qǐng)求register頁面:

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

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

4.服務(wù)端代碼：

給register頁面的(發(fā)送POST請(qǐng)求)設(shè)置路由，
后端代碼將瀏覽器傳來的request中的信息存儲(chǔ)到hash中，判斷是否符合輸入要求，同時(shí)判斷郵箱是否唯一，如果不符合，服務(wù)器返回400，給出提示；如果符合，返回200，將數(shù)據(jù)信息存儲(chǔ)到本地?cái)?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路徑解析不了@符號(hào)的問題
               })
                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部分：

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

  $("#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("請(qǐng)輸入郵箱");
            return
        }
        if(hash["password"] === ""){
            $("#loginForm").find("[name = "password"]").siblings(".error").text("請(qǐng)輸入密碼");
            return
        }

3.ajax發(fā)送post請(qǐng)求login頁面：

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

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

4.給login頁面(post請(qǐng)求)設(shè)置路由：

讀取本地?cái)?shù)據(jù)庫./db/users，與瀏覽器傳來的formdata進(jìn)行比對(duì)，如果用戶密碼正確，給瀏覽器設(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 跟蹤而儲(chǔ)存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過加密）
服務(wù)器通過set-cookie后，給瀏覽器傳了一段識(shí)別身份的數(shù)據(jù)；之后瀏覽器給次請(qǐng)求都會(huì)附上這份cookie數(shù)據(jù)，服務(wù)器以此來驗(yàn)明瀏覽器的身份。cookie的時(shí)效性一般是兩天左右，可以自行設(shè)置。
通俗的來講就是cookie就是一個(gè)驗(yàn)證身份的門票，服務(wù)器給瀏覽器發(fā)了一張門票，瀏覽器請(qǐng)求數(shù)據(jù)時(shí)需要拿出門票，服務(wù)器看到門票后驗(yàn)證了身份，才會(huì)同意請(qǐng)求。
這里值得注意的是cookie的作用域domain，cookie也遵守瀏覽器同源策略，不同域名的cookie的是不一樣的。
四·登錄后跳轉(zhuǎn)首頁
登錄界面獲取到瀏覽器設(shè)置的cookie，再次向服務(wù)器請(qǐng)求跳轉(zhuǎn)到首頁時(shí)需要附上這段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("; ");/*這里多出一個(gè)空格，要注意*/
        let hash = {};
        for(let i =0 ;i
總結(jié)
講解完實(shí)現(xiàn)過程后，我們來總結(jié)一下：
當(dāng)我們進(jìn)行登錄注冊(cè)時(shí)，網(wǎng)頁都做了些什么呢？
1.我們進(jìn)行注冊(cè)時(shí)，瀏覽器向服務(wù)器發(fā)送post請(qǐng)求，同時(shí)將注冊(cè)信息傳過去；
2.服務(wù)器將用戶信息存儲(chǔ)到本地?cái)?shù)據(jù)庫后，告知瀏覽器注冊(cè)成功
3.用戶打開登錄界面，輸入登錄信息，向服務(wù)器發(fā)送post請(qǐng)求
4.服務(wù)器讀取本地?cái)?shù)據(jù)庫，比對(duì)登錄信息是否正確，若錯(cuò)誤，告知瀏覽器登錄失??；若正確給瀏覽器設(shè)置cookie
5.瀏覽器向服務(wù)器發(fā)送get請(qǐng)求，訪問首頁，附上cookie
6.服務(wù)器讀取cookie，驗(yàn)證身份后，同意瀏覽器訪問首頁
源碼
附上一個(gè)vue版本帶有登錄注冊(cè)功能的備忘錄demo
以上是個(gè)人觀點(diǎn)，如有錯(cuò)誤歡迎指出。

云服務(wù)器 GPU云服務(wù)器登錄注冊(cè)界面用php實(shí)現(xiàn)注冊(cè)界面前后端前后端分離

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51807.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Blackjun

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

千鋒重慶Java學(xué)習(xí)分享之Java工具類整理

閱讀 2095·2021-11-24 09:39
深夜學(xué)姐問我在Vue中Echarts柱狀圖如何自定義頂部亮點(diǎn)

閱讀 1563·2021-10-11 10:59
騰訊云輕量首購特惠，1核2G5M首年50元，可選上海/北京/成都/廣州機(jī)房

閱讀 2507·2021-09-24 10:28
字節(jié)跳動(dòng)加碼物流業(yè)務(wù)，對(duì)標(biāo)菜鳥網(wǎng)絡(luò)

閱讀 3382·2021-09-08 09:45
阿里云優(yōu)惠券(代金券)在哪領(lǐng)取?如何使用阿里云優(yōu)惠券(代金券)?

閱讀 1275·2021-09-07 10:06
動(dòng)畫歷程之滾動(dòng)的坑

閱讀 1672·2019-08-30 15:53
利用canvas繪畫二級(jí)樹形結(jié)構(gòu)圖

閱讀 2067·2019-08-30 15:53
PHP仿微信多圖片預(yù)覽上傳功能

閱讀 1425·2019-08-30 15:53

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

實(shí)現(xiàn)前后端登錄注冊(cè)界面

注冊(cè)

登錄

這是首頁

相關(guān)文章