Node.js のフロントエンドとバックエンドのインタラクションによるユーザーログインの実装の実践

最近、Node.js のバックエンドの知識を少し学んだので、フロントエンドを勉強している者として、バックエンドを理解し始めました。さっそく、紹介を始めましょう。まず、このブログをより深く理解したい場合は、HTML、CSS、JavaScript、Node.js の基礎知識と、SQL データベースに関するちょっとした知識が必要です。次に、この小さなプロジェクトを開始します。

1. プロジェクト要件

ユーザーはログインインターフェースに入り、ユーザー名とパスワードを入力する必要があります。バックエンドはユーザーが入力したフォーム情報を取得し、データベースを検索します。正しい場合は、ログイン成功ページにジャンプします。

追伸: コメントは非常に詳細です。分からないことがあればコメントを読んでください。もちろん、質問するためにメッセージを残していただくことはできますが、これは問題の迅速な解決にはなりません。

次にコーディングを始める

1. フロントエンドページを作成する（CSSスタイルはここでは省略）

<フォームメソッド="post" アクション="http://localhost:8080/">
                <input type="text" required="必須" id="use_name" placeholder="ユーザー名を入力してください" name="user_name">
                <input type="password" required="必須" id="pwd" placeholder="パスワードを入力してください" name="user_pwd">
            <button type="submit" class="but">ログイン</button>
</フォーム>

ローカルテスト環境を実行しているため、フォームを作成し、投稿送信メソッドを使用して、アドレスを独自のホストに送信します。

ログイン成功ページ success.html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ログイン成功ページ</title>
    <スタイル>
        /*成功ページのスタイル*/
        。成功 {
            テキスト配置: 中央;
            色: #3e8e41;
        }
    </スタイル>
</head>
<本文>
<h1 class="success">おめでとうございます!ログインに成功しました! </h1>
<img src="img/keyboard_coffee.jpg">
</本文>
</html>

2. Node.jsバックエンドがユーザー入力データを取得する

（1）モジュールをインポートします。コンピュータにNode.jsがインストールされている必要があります。インストール手順については、Baiduで検索してください。

// http モジュールをインポートします。const http = require('http');
//リクエストパラメータ処理モジュールを導入します。const queryString = require('querystring');
定数 fs = require('fs');
//サードパーティの MIME モジュールを導入する const mime = require('mime');
定数パス = require("パス");

（２）ユーザー入力データの取得

// サーバー Web サイトのサーバー オブジェクトを作成します。let sever = http.createServer();
//リクエストイベントをサーバーオブジェクトにバインドし、sever.on('request', function (request, response) {をトリガーします。
    /* POST パラメータはイベント経由で受信されます* data はリクエストパラメータが渡されたときにトリガーされるイベントです* end はパラメータの受け渡しが完了したときにトリガーされるイベントです*/
    let postParams = ''; //投稿パラメータを受け取るための空の文字列を定義する //イベントをトリガーするためにデータをバインドする request.on('data', function (params) {
        postParams = postParams + params; // 投稿パラメータを連結します });
//トリガーイベントにデータをバインドする request.on('end', function () {
        // querystring モジュールの parse() メソッドを使用して postParams 文字列をオブジェクトに処理します // console.log(queryString.parse(postParams));
        //ユーザー名などの特定の値を取得します。 注意: ここでの user_name は、フロントエンド HTML コードの name="user_name" と一致している必要があります。
        username = queryString.parse(postParams).user_name とします。
        userpwd = queryString.parse(postParams).user_pwd とします。
}

これまでに、ユーザーが入力したデータを取得し、定義した変数 username と userpwd に保存しました。これらは、以下のデータベースから取得されたユーザー名とパスワードと比較するために使用されます。

（３）SQLデータベースからユーザー情報を取得します（私はMySQLデータベースを使用しています。データベース管理ソフトウェアはDBeaverを使用しています。無料なので笑）

事前に用意しておいたデータベース内のデータテーブルを見てみましょう。データベース名はtest（後でデータベースパッケージの設定項目で確認できます）、データテーブル名はuserinfoです。

// データベースクエリインスタンス。ユーザー名に基づいてデータベースを検索します。
//カスタムのカプセル化されたリンク データベース モジュールを呼び出します。const connection = require("./mysql.js");
connection.query("userinfo から * を選択、userName=?"、[ユーザー名]、function (結果、フィールド) {
            //result は MySQL クエリによって返された生データです。 '? ' は、SQL クエリ ステートメントを '[]' 内の値に置き換えるために使用されるプレースホルダーです。
            //MySQL から返された JSON のような配列を JSON データに処理します。let resultJson = JSON.stringify(result);
            //JSON.parse() は JSON 文字列を解析するために使用されます。let dataJson = JSON.parse(resultJson);
            //解析後に特定の値を取得します。let name = dataJson[0].userName;
            pwd = dataJson[0].userPwdとします。
      //データベースから取得したユーザー情報とユーザーフォームの入力を比較します。一致している場合は、成功したページにジャンプします。findPage() はカスタムページジャンプ関数です。if (pwd === userpwd && name === username) {
                console.log("パスワードは正しいです!");
                findPage('/success.html', レスポンス);
            } それ以外 {
                console.log("パスワードが間違っています!");
                response.end('<h1>パスワードが間違っています!</h1>')
            }
        });
/**
 * ローカルの静的リソースにアクセスする関数 */
関数 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) {
        もしエラーが起きたら
            res.end(結果);
        }
        
    });
}

（4）データベースモジュールのカプセル化

データベースリンクなどの操作を毎回記述すると冗長になってしまうので、他のブロガーさんのコードを参考にして、データベースリンクの操作を 2 つのファイルにカプセル化しました。

データベース構成カプセル化ファイル mysql.config.js

//リンクデータベースパラメータを設定する module.exports = {
    ホスト: 'localhost',
    port: 3306, //ポート番号 database: 'test', //データベース名 user: 'root', //データベースユーザー名 password: '123456' //データベースパスワード };

データベースリンクカプセル化ファイル mysql.js

let mysql = require('mysql'); //mysqlモジュールを導入する let databaseConfig = require('./mysql.config'); //データベース設定モジュールにデータを導入する //メソッドを外部に公開する module.exports = {
    クエリ: 関数 (sql、パラメータ、コールバック) {
        // 使用するたびに接続を作成し、データ操作が完了したら接続を閉じる必要があります。let connection = mysql.createConnection(databaseConfig);
        接続.connect(関数(エラー) {
            もし（エラー）{
                console.log('データベース接続に失敗しました');
                エラーをスローします。
            }
            //データ操作を開始します //3つのパラメータを渡します。最初のパラメータはSQL文、2番目のパラメータはSQL文に必要なデータ、3番目のパラメータはコールバック関数です connection.query(sql, params, function (err, results, fields) {
                もし（エラー）{
                    console.log('データ操作に失敗しました');
                    エラーをスローします。
                }
                // クエリされたデータをコールバック関数に返します callback && callback(results, fields);
                //results はデータ操作の結果、fields はデータベース接続のいくつかのフィールドです //データベースへの接続を停止するには、ステートメントをクエリする必要があります。そうしないと、このメソッドが呼び出されると、接続が直接停止され、データ操作が失敗します connection.end(function (err) {
                    もし（エラー）{
                        console.log('データベース接続を閉じることができませんでした!');
                        エラーをスローします。
                    }
                });
            });
        });
    }
};

上記の 2 つのファイルは、データベースクエリの例 const connection = require("./mysql.js"); で呼び出されています。

ここまでで、node.js を使って MySQL データベースをクエリし、ユーザーログイン機能を実現する機能が完成しました。データベース操作のカプセル化を教えてくれたブロガーに感謝したいと思います。彼の記事のリンクはこちらです。

Node.js フロントエンドとバックエンドのインタラクションによるユーザーログインの実装方法については、これで終わりです。Node.js ユーザーログインに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: