快捷導(dǎo)航

Node.js前后端交互實(shí)現(xiàn)用戶(hù)登陸的實(shí)踐

更新時(shí)間：2021年12月27日 10:19:57 作者：莫頎

本文主要介紹了Node.js前后端交互實(shí)現(xiàn)用戶(hù)登陸的實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近學(xué)習(xí)了一點(diǎn)Node.js的后端知識(shí)，于是作為一個(gè)學(xué)習(xí)前端方向的我開(kāi)始了解后端，話不多說(shuō)，開(kāi)始介紹。首先，如果你想要更好的理解這篇博客，你需要具備html，css，javascript和Node.js基礎(chǔ)以及少許的SQL數(shù)據(jù)庫(kù)知識(shí)。接下我們開(kāi)始這個(gè)小項(xiàng)目。

一、項(xiàng)目需求

　　要求用戶(hù)進(jìn)入登陸界面，輸入用戶(hù)名和密碼后，后端獲取用戶(hù)輸入的表單信息，通過(guò)從數(shù)據(jù)庫(kù)查找，如果正確，跳轉(zhuǎn)登陸成功頁(yè)面。

　　ps:注釋寫(xiě)的比較詳細(xì)了，不明白的地方請(qǐng)多看注釋。當(dāng)然，我也非常歡迎你留言詢(xún)問(wèn)，但是這不是一個(gè)快速解決問(wèn)題的辦法。

二，開(kāi)始擼代碼

1，創(chuàng)建前端頁(yè)面（CSS樣式此處省略）

<form method="post" action="http://localhost:8080/">
                <input type="text" required="required" id="use_name" placeholder="請(qǐng)輸入用戶(hù)名" name="user_name">
                <input type="password" required="required" id="pwd" placeholder="請(qǐng)輸入密碼" name="user_pwd">
     　　　　　　　<button type="submit" class="but">登陸</button>
</form>

創(chuàng)建表單，使用post提交方式，提交地址為自己的主機(jī)，因?yàn)槲沂亲龅谋镜販y(cè)試環(huán)境。

　　登陸成功頁(yè)面success.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄成功頁(yè)面</title>
    <style>
        /*成功頁(yè)面的樣式*/
        .success {
            text-align: center;
            color: #3e8e41;
        }
    </style>
</head>
<body>
<h1 class="success">恭喜！登錄成功！</h1>
<img src="img/keyboard_coffee.jpg">
</body>
</html>

2、Node.js后端獲取用戶(hù)輸入數(shù)據(jù)

　?。?）引入模塊，此時(shí)需要你的電腦上面以及安裝了Node.js環(huán)境，安裝方法請(qǐng)自行百度。

// 引入http模塊
const http = require('http');
//引入處理請(qǐng)求參數(shù)模塊
const queryString = require('querystring');
const fs = require('fs');
//引入第三方mime模塊
const mime = require('mime');
const path = require("path");

（2）獲取用戶(hù)輸入的數(shù)據(jù)

//創(chuàng)建sever網(wǎng)站服務(wù)器對(duì)象
let sever = http.createServer();
//為服務(wù)器對(duì)象綁定請(qǐng)求事件,當(dāng)客戶(hù)端有請(qǐng)求時(shí)觸發(fā)
sever.on('request', function (request, response) {
    /* POST參數(shù)是通過(guò)事件的方式接收的
    * data  當(dāng)請(qǐng)求參數(shù)傳遞的時(shí)候觸發(fā)的事件
    * end   當(dāng)參數(shù)傳遞完成的時(shí)候觸發(fā)end事件
    */
    let postParams = '';  //定義空字符串用于接收post參數(shù)
//綁定data觸發(fā)事件
    request.on('data', function (params) {
        postParams = postParams + params;     //拼接post參數(shù)
    });
//綁定data觸發(fā)事件
    request.on('end', function () {
        // 把postParams字符串處理為對(duì)象,用querystring模塊中的parse()方法
        // console.log(queryString.parse(postParams));
        //獲取具體數(shù)值，如用戶(hù)名。 注意：此處的user_name必須和前端HTML代碼中的name="user_name"一致的。
        let username = queryString.parse(postParams).user_name;
        let userpwd = queryString.parse(postParams).user_pwd;
}

至此，我們已經(jīng)獲得了用戶(hù)輸入的數(shù)據(jù)，并存放在了我們定義的變量username和userpwd中，用于下面與從數(shù)據(jù)庫(kù)獲取到的用戶(hù)名和用戶(hù)密碼比較。

（3）從SQL數(shù)據(jù)庫(kù)獲取用戶(hù)的信息（我用的是MySQL數(shù)據(jù)庫(kù)。我用的數(shù)據(jù)庫(kù)管理軟件是DBeaver，因?yàn)樗赓M(fèi)哈哈哈）

　　看一下我預(yù)先準(zhǔn)備好的數(shù)據(jù)庫(kù)中的數(shù)據(jù)表。數(shù)據(jù)庫(kù)名test(后面數(shù)據(jù)庫(kù)封裝的配置項(xiàng)里可以看到)，數(shù)據(jù)表名userinfo

// 數(shù)據(jù)庫(kù)查詢(xún)實(shí)例。我是根據(jù)用戶(hù)名username去數(shù)據(jù)庫(kù)中查詢(xún)。
//調(diào)用自定義封裝的鏈接數(shù)據(jù)庫(kù)模塊
const connection = require("./mysql.js");
connection.query("select * from userinfo where userName=?", [username], function (result, filed) {
            //result是mysql查詢(xún)返回的原始數(shù)據(jù)。查詢(xún)語(yǔ)句中的‘？'是占位符，用于將SQL查詢(xún)語(yǔ)句替換為‘[]'中的值。
            //處理mysql返回的類(lèi)似json格式的數(shù)組,處理為json數(shù)據(jù)
            let resultJson = JSON.stringify(result);
            //JSON.parse()用來(lái)解析JSON字符串
            let dataJson = JSON.parse(resultJson);
            //獲得解析后的具體數(shù)值
            let name = dataJson[0].userName;
            let pwd = dataJson[0].userPwd;
　　　　　　//比較數(shù)據(jù)庫(kù)獲到的用戶(hù)信息和用戶(hù)表單輸入的是否一致，一致則跳轉(zhuǎn)成功頁(yè)面，findPage()為自定義的頁(yè)面跳轉(zhuǎn)函數(shù)
            if (pwd === userpwd && name === username) {
                console.log("密碼正確！");
                findPage('/success.html', response);
            } else {
                console.log("密碼錯(cuò)誤！");
                response.end('<h1>密碼錯(cuò)誤！</h1>')
            }
        });
/**
 * 訪問(wèn)本地靜態(tài)資源的函數(shù)
 */
function findPage(url, res) {
    // static為拼接后的靜態(tài)資源絕對(duì)路徑
    const static = path.join(__dirname, url);
    // 異步讀取本地文件
    //獲取文件的類(lèi)型，使用mime模塊的getType()方法
    let fileType = mime.getType(static)   //獲取文件的類(lèi)型，使用mime模塊的getType()方法
    //讀取文件
    fs.readFile(static, function (err, result) {
        if (!err) {
            res.end(result);
        }
        
    });
}

(4)數(shù)據(jù)庫(kù)模塊封裝

因?yàn)槿绻谑褂弥忻看味紝?xiě)一堆代碼用于數(shù)據(jù)庫(kù)鏈接之類(lèi)的操作，機(jī)會(huì)顯得很冗余，于是我參考其他博友的代碼對(duì)數(shù)據(jù)庫(kù)鏈接操作分為兩個(gè)文件進(jìn)行封裝

數(shù)據(jù)庫(kù)配置封裝文件 mysql.config.js

//配置鏈接數(shù)據(jù)庫(kù)參數(shù)
module.exports = {
    host: 'localhost',
    port: 3306,//端口號(hào)
    database: 'test',//數(shù)據(jù)庫(kù)名
    user: 'root',//數(shù)據(jù)庫(kù)用戶(hù)名
    password: '123456'//數(shù)據(jù)庫(kù)密碼
};

數(shù)據(jù)庫(kù)鏈接封裝文件 mysql.js

let mysql = require('mysql');//引入mysql模塊
let databaseConfig = require('./mysql.config');  //引入數(shù)據(jù)庫(kù)配置模塊中的數(shù)據(jù)
//向外暴露方法
module.exports = {
    query: function (sql, params, callback) {
        //每次使用的時(shí)候需要?jiǎng)?chuàng)建鏈接，數(shù)據(jù)操作完成之后要關(guān)閉連接
        let connection = mysql.createConnection(databaseConfig);
        connection.connect(function (err) {
            if (err) {
                console.log('數(shù)據(jù)庫(kù)鏈接失敗');
                throw err;
            }
            //開(kāi)始數(shù)據(jù)操作
            //傳入三個(gè)參數(shù)，第一個(gè)參數(shù)sql語(yǔ)句，第二個(gè)參數(shù)sql語(yǔ)句中需要的數(shù)據(jù)，第三個(gè)參數(shù)回調(diào)函數(shù)
            connection.query(sql, params, function (err, results, fields) {
                if (err) {
                    console.log('數(shù)據(jù)操作失敗');
                    throw err;
                }
                //將查詢(xún)出來(lái)的數(shù)據(jù)返回給回調(diào)函數(shù)
                callback && callback(results, fields);
                //results作為數(shù)據(jù)操作后的結(jié)果，fields作為數(shù)據(jù)庫(kù)連接的一些字段
                //停止鏈接數(shù)據(jù)庫(kù)，必須再查詢(xún)語(yǔ)句后，要不然一調(diào)用這個(gè)方法，就直接停止鏈接，數(shù)據(jù)操作就會(huì)失敗
                connection.end(function (err) {
                    if (err) {
                        console.log('關(guān)閉數(shù)據(jù)庫(kù)連接失?。?);
                        throw err;
                    }
                });
            });
        });
    }
};

上面的兩個(gè)文件已經(jīng)在數(shù)據(jù)庫(kù)查詢(xún)實(shí)例中const connection = require("./mysql.js");調(diào)用了。

至此我們的使用node.js進(jìn)行MySQL數(shù)據(jù)庫(kù)查詢(xún),實(shí)現(xiàn)用戶(hù)登陸的功能已經(jīng)完成了
在此感謝教會(huì)我數(shù)據(jù)庫(kù)操作封裝的博主大佬，他的文章鏈接放在這里了

到此這篇關(guān)于Node.js前后端交互實(shí)現(xiàn)用戶(hù)登陸的實(shí)踐的文章就介紹到這了,更多相關(guān)Node.js用戶(hù)登陸內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: