このプロジェクトでは、JavaScript と jQuery を使ってユーザーログイン機能を実装する方法を学びます。このプロジェクトは、特にデータの動的化の分野において、必須のフロントエンド開発スキルを開発するのに役立ちます。
成功した結果は以下の通りです。
失敗した結果は以下の通りです。
このプロジェクトでは、以下のことを学びます。
このプロジェクトを完了すると、以下のことができるようになります。
このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了します。
プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。
├── bootstrap.min.css ## Bootstrap ファイル
├── index.html ## ユーザーログインページ
├── jQuery-3.6.0.min.js ## jQuery ファイル
├── userlist.json ## JSON ファイル
├── login.js ## ユーザーログイン用の JavaScript コード
├── index.html ## ユーザーログインページWebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。
次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。
このステップでは、jQuery のajax関数を使ってuserlist.jsonファイルからユーザーデータを取得する方法を学びます。
login.jsファイルを開き、login関数を見つけます。login関数の中に、以下のコードを追加してuserlist.jsonファイルに対して AJAX 要求を行います。function login(username, password) {
// TODO
$.ajax({
method: "GET",
url: "userlist.json",
success: function (data) {
// ユーザーデータは現在、'data'パラメータに格納されています
console.log(data);
}
});
}このコードはuserlist.jsonファイルに対して GET 要求を行います。
このステップでは、入力されたユーザー名とパスワードを AJAX 要求から取得したユーザーデータと比較する方法を学びます。
successコールバック関数の中に、以下のコードを追加して、入力されたユーザー名とパスワードがユーザーレコードのいずれかと一致するかどうかを確認します。$.ajax({
method: "GET",
url: "userlist.json",
success: function (data) {
let judge = data.userlist.some((item) => {
return item.username == username && item.password == password;
});
//...
}
});このコードは、data.userlist配列のユーザーレコードのいずれかが入力されたユーザー名とパスワードと一致するかどうかを確認するためにsomeメソッドを使用しています。
someメソッドの呼び出しの後に、以下のコードを追加して適切な成功または失敗メッセージを表示します。$.ajax({
method: "GET",
url: "userlist.json",
success: function (data) {
//...
if (judge) {
$("#tip1").removeClass("fade");
$("#tip2").addClass("fade");
} else {
$("#tip2").removeClass("fade");
$("#tip1").addClass("fade");
}
}
});このコードは、jQuery を使用してページ上の成功と失敗メッセージ要素の表示を操作しています。
この最後のステップでは、ページ上のユーザー入力要素とログイン機能を統合する方法を学びます。
$(document).ready()関数の中で、「login」ボタンのクリックイベントハンドラを見つけます。$("#btnsubmit").click(function () {
// TODO
});login関数を呼び出します。$("#btnsubmit").click(function () {
// TODO
let username = $("#exampleInputUsername").val();
let password = $("#exampleInputPassword").val();
login(username, password);
});このコードは、ユーザーがユーザー名とパスワード入力フィールドに入力した値を取得し、それらの値でlogin関数を呼び出します。
login.jsファイルを保存し、ブラウザでindex.htmlページを更新します。異なるユーザー名とパスワードの組み合わせを入力し、「login」ボタンをクリックして、成功と失敗のメッセージを確認してみてください。成功した結果は以下の通りです。
失敗した結果は以下の通りです。
おめでとうございます！ユーザーログイン機能の実装を完了しました。
おめでとうございます！このプロジェクトを完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。
