Node.js實現前後端互動——使用者登陸

莫頎發表於2021-11-22
Node.js後端

　　最近學習了一點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資料庫查詢,實現使用者登陸的功能已經完成了

　在此感謝教會我資料庫操作封裝的博主大佬，他的文章連結放在這裡了(11條訊息) Node連線MySQL並封裝其增刪改查_wilL-my的部落格-CSDN部落格

https://blog.csdn.net/qq_31754523/article/details/99172420

　　

 

相關文章