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

一、項目需求

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

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

二，開始擼代碼

1，創(chuàng)建前端頁面（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>

創(chuàng)建表單，使用post提交方式，提交地址為自己的主機(jī)，因為我是做的本地測試環(huán)境。

　　登陸成功頁面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后端獲取用戶輸入數(shù)據(jù)

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

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

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

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

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

（3）從SQL數(shù)據(jù)庫獲取用戶的信息（我用的是MySQL數(shù)據(jù)庫。我用的數(shù)據(jù)庫管理軟件是DBeaver，因為它免費(fèi)哈哈哈）

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

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

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

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

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

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

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

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

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

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

您可能感興趣的文章: