シンプルなログインページを実装するための HTML+jQuery

導入

この記事では、例を使用して、簡単なログインページの作成方法を説明します。

以下のソリューションが含まれます: 純粋な HTML、HTML + jQuery (フォームデータ) 形式、HTML + jQuery (json) 形式。

公開コード（バックエンドインターフェース）

SpringBoot を使用して、最もシンプルなログインインターフェイスを記述します。

コントローラ

パッケージ com.example.controller;
 
com.example.entity.LoginVO をインポートします。
org.springframework.web.bind.annotation.CrossOrigin をインポートします。
org.springframework.web.bind.annotation.PostMapping をインポートします。
org.springframework.web.bind.annotation.RequestParam をインポートします。
org.springframework.web.bind.annotation.RestController をインポートします。
 
//クロスオリジン
//RESTスタイル: JSONを返す
@レストコントローラ
パブリッククラスLoginController {
    @PostMapping("ログイン")
    パブリックLoginVOログイン() {
        //ユーザー名とパスワードの判定を省略 LoginVO loginVO = new LoginVO();
        ログインVO.setSuccess(true);
        loginVO.setData("これはデータです");
        loginVO を返します。
    }
}

ドキュメント

<?xml バージョン="1.0" エンコーディング="UTF-8"?>
<プロジェクト xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <モデルバージョン>4.0.0</モデルバージョン>
    <親>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <バージョン>2.3.0.RELEASE</バージョン>
        <relativePath/> <!-- リポジトリから親を検索 -->
    </親>
    <グループID>com.example</グループID>
    <artifactId>デモ_SpringBoot</artifactId>
    <バージョン>0.0.1-SNAPSHOT</バージョン>
    <name>デモ_SpringBoot</name>
    <description>Spring Boot のデモ プロジェクト</description>
 
    <依存関係>
        <依存関係>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </依存関係>
    </依存関係>
</プロジェクト>

例 1: 最もシンプル (純粋な HTML)

コード

ログイン.html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ログインページ</title>
</head>
 
<本文>
 
<フォームアクション="http://localhost:8080/login" メソッド="post">
    <label for="username">ユーザー名:</label>
    <input type="text" name="ユーザー名" id="ユーザー名">
 
    <label for="password">パスワード:</label>
    <input type="password" name="password" id="password">
 
    <!-- 次のように書くこともできます <label for="username">
        ユーザー名: <input type="text" name="username" id="username">
    </ラベル>
    <label for="パスワード">
        パスワード: <input type="password" name="password" id="password">
    </label>-->
 
    <button type="submit">ログイン</button>
</フォーム>
 
</本文>
</html>

テスト

1. login.htmlにアクセスします。

2. ユーザー名とパスワードを入力します

ユーザー名: abc と入力; パスワード: 1234 と入力

結果

例2: HTML+jQuery (フォームデータ)

コード

ログイン.html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ログインページ</title>
    <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
</head>
 
<本文>
 
<form id="ログインフォーム">
    <label for="username">ユーザー名:</label>
    <input type="text" name="ユーザー名" id="ユーザー名">
 
    <label for="password">パスワード:</label>
    <input type="password" name="password" id="password">
</フォーム>
 
<div id="エラーメッセージ"></div>
<button type="submit" onclick="loginViaFormData()">ログイン</button>
 
<スクリプト>
    関数 loginViaFormData() {
        $.ajax(
            {
                タイプ: "投稿",
                URL: "http://localhost:8080/ログイン",
                data: $("#login-form").serialize(), //フォーム内のデータをシリアル化してバックエンドに渡します //dataType: "json", //バックエンドから渡されるデータがjson形式であることを指定します success: function (result) {
                    結果が成功の場合
                        $("#errormessage").text("ユーザー名またはパスワードが正しくありません");
                    } そうでない場合 (結果が成功) {
                        alert("ログインに成功しました");
                        // index.html ページにジャンプします。window.location.href="index.html" rel="external nofollow" rel="external nofollow";
                    }
                }
            }
        ）
    }
</スクリプト>
 
</本文>
</html>

インデックス.html

<!doctypehtml>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>これはタイトルです</title>
</head>
 
<本文>
 
<div class="コンテナ">
    ログイン成功後のページ</div>
 
<スクリプト>
 
</スクリプト>
</本文>
</html>

テスト

1. login.htmlにアクセスします。

2. ユーザー名とパスワードを入力します

ユーザー名: abc と入力; パスワード: 1234 と入力

3. ログインをクリック

4. OKをクリックする

例3: HTML+jQuery(json)

コード

ログイン.html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ログインページ</title>
    <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
</head>
 
<本文>
 
<form id="ログインフォーム">
    <label for="username">ユーザー名:</label>
    <input type="text" name="ユーザー名" id="ユーザー名">
 
    <label for="password">パスワード:</label>
    <input type="password" name="password" id="password">
</フォーム>
 
<div id="エラーメッセージ"></div>
<button type="submit" onclick="loginViaJson()">ログイン</button>
 
<スクリプト>
    関数 loginViaJson() {
        $.post("http://localhost:8080/ログイン",
            //バックエンドに送信されるデータ {
                "ユーザー名": $(".ユーザー名").val(),
                "パスワード": $(".password").val()
            },
            //コールバック関数関数(結果){
                結果が成功の場合
                    $("#errormessage").text("ユーザー名またはパスワードが正しくありません");
                } そうでない場合 (結果が成功) {
                    alert("ログインに成功しました");
                    // index.html ページにジャンプします。window.location.href="index.html" rel="external nofollow" rel="external nofollow";
                }
            }
        ）
    }
</スクリプト>
 
</本文>
</html>

インデックス.html

<!doctypehtml>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>これはタイトルです</title>
</head>
 
<本文>
 
<div class="コンテナ">
    ログイン成功後のページ</div>
 
<スクリプト>
 
</スクリプト>
</本文>
</html>

テスト

テスト結果は、前回の「例2: HTML+jQuery (フォームデータ)」と同じです。

1. login.htmlにアクセスします。

2. ユーザー名とパスワードを入力します

ユーザー名: abc と入力; パスワード: 1234 と入力

3. ログインをクリック

4. OKをクリックする

これで、HTML+jQuery でシンプルなログインページを実装する方法についての記事は終了です。HTML jQuery ログインページの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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