Node.js前後端交互實現用戶登陸的實踐

Posted on by

最近學習瞭一點Node.js的後端知識，於是作為一個學習前端方向的我開始瞭解後端，話不多說，開始介紹。首先，如果你想要更好的理解這篇博客，你需要具備html，css，javascript和Node.js基礎以及少許的SQL數據庫知識。接下我們開始這個小項目。

一、項目需求

　　要求用戶進入登陸界面，輸入用戶名和密碼後，後端獲取用戶輸入的表單信息，通過從數據庫查找，如果正確，跳轉登陸成功頁面。

　　ps:註釋寫的比較詳細瞭，不明白的地方請多看註釋。當然，我也非常歡迎你留言詢問，但是這不是一個快速解決問題的辦法。

二，開始擼代碼

1，創建前端頁面（CSS樣式此處省略）

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

創建表單，使用post提交方式，提交地址為自己的主機，因為我是做的本地測試環境。

　　登陸成功頁面success.html

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

2、Node.js後端獲取用戶輸入數據

　　（1）引入模塊，此時需要你的電腦上面以及安裝瞭Node.js環境，安裝方法請自行百度。

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

（2）獲取用戶輸入的數據

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

至此，我們已經獲得瞭用戶輸入的數據，並存放在瞭我們定義的變量username和userpwd中，用於下面與從數據庫獲取到的用戶名和用戶密碼比較。

（3）從SQL數據庫獲取用戶的信息（我用的是MySQL數據庫。我用的數據庫管理軟件是DBeaver，因為它免費哈哈哈）

　　看一下我預先準備好的數據庫中的數據表。數據庫名test(後面數據庫封裝的配置項裡可以看到)，數據表名userinfo

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

(4)數據庫模塊封裝

因為如果在使用中每次都寫一堆代碼用於數據庫鏈接之類的操作，機會顯得很冗餘，於是我參考其他博友的代碼對數據庫鏈接操作分為兩個文件進行封裝

數據庫配置封裝文件 mysql.config.js

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

數據庫鏈接封裝文件 mysql.js

let mysql = require('mysql');//引入mysql模塊
let databaseConfig = require('./mysql.config');  //引入數據庫配置模塊中的數據
//向外暴露方法
module.exports = {
    query: function (sql, params, callback) {
        //每次使用的時候需要創建鏈接，數據操作完成之後要關閉連接
        let connection = mysql.createConnection(databaseConfig);
        connection.connect(function (err) {
            if (err) {
                console.log('數據庫鏈接失敗');
                throw err;
            }
            //開始數據操作
            //傳入三個參數，第一個參數sql語句，第二個參數sql語句中需要的數據，第三個參數回調函數
            connection.query(sql, params, function (err, results, fields) {
                if (err) {
                    console.log('數據操作失敗');
                    throw err;
                }
                //將查詢出來的數據返回給回調函數
                callback && callback(results, fields);
                //results作為數據操作後的結果，fields作為數據庫連接的一些字段
                //停止鏈接數據庫，必須再查詢語句後，要不然一調用這個方法，就直接停止鏈接，數據操作就會失敗
                connection.end(function (err) {
                    if (err) {
                        console.log('關閉數據庫連接失敗！');
                        throw err;
                    }
                });
            });
        });
    }
};

上面的兩個文件已經在數據庫查詢實例中const connection = require(“./mysql.js”);調用瞭。

至此我們的使用node.js進行MySQL數據庫查詢,實現用戶登陸的功能已經完成瞭
在此感謝教會我數據庫操作封裝的博主大佬，他的文章鏈接放在這裡瞭

到此這篇關於Node.js前後端交互實現用戶登陸的實踐的文章就介紹到這瞭,更多相關Node.js用戶登陸內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：