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

シンプルなログインページを実装するための 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • jQuery Ajax は HTML ページでユーザーのログイン ステータスをリアルタイムに表示します。
  • jQuery+ajax によるユーザーログイン認証の実装
  • jQueryはユーザーのログイン認証を実装します
  • JavaScript と jQuery を使用したユーザーログイン認証の実装
  • jQuery Enterで簡単なログインを実現

<<:  重複したMySQLレコードを現場でチェックし、処理する実践的な記録

>>:  よく使われる HTML タグとその特徴の完全なリスト

推薦する

Dockerコンテナ内で2つのプロセスを開始するときのDockerfile実装コード

最近、cronスケジュールタスク用のdockerを作りたいと思っており、Dockerfileで次のよ...

Presto をインストールし、Docker で Hive を接続する詳細なプロセス

1. はじめにPresto は、ギガバイトからペタバイトに及ぶデータ ソースに対してインタラクティブ...

クラウドサーバーを購入し、Alibaba Cloud に Pagoda Panel をインストールする手順

アリババクラウドがサーバーを購入クラウドサーバーを購入し、サーバーバージョンとしてcentos 7....

Vueプロジェクトがグラフィック検証コードを実装

この記事の例では、グラフィック検証コードを実装するためのVueプロジェクトの具体的なコードを参考まで...

HTML タグ マーキーはさまざまなスクロール効果を実現します (JS 制御なし)

ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...

CocosCreator でカメラトラッキングに cc.follow を使用する方法

Cocos Creator バージョン: 2.3.4デモのダウンロード: https://files...

Alibaba Cloud OSS によってアップロードされた Nginx プロキシ転送実装コード

序文ミニプログラムのアップロードには https が必要なので、サーバーの https は lets...

Windows 環境での MYSQL5.7 設定ファイルの場所のグラフィカル分析

1. MYSQLインストールディレクトリ次のようにコードをコピーします。 select @@bas...

Vueは新しいウィンドウを開き、パラメータ転送のグラフィック例を実装します。

私が実現したい機能は、新しいウィンドウを開いて新しいページを表示することですが、パラメータを渡す必要...

Dockerイメージ内のnoneイメージ操作を削除する

普段はdocker buildコマンドでイメージを生成していますが、コードの更新が頻繁に行われるとn...

最新の仮想マシン VMware 14 インストール チュートリアル

まず、VMware 14のアクティベーションコードをお渡ししますFF31K-AHZD1-H8ETZ-...

Nginx の一般的な設定とテクニックの概要

序文この記事では、Nginx の一般的な、実用的で興味深い構成をいくつか紹介します。この記事を読んだ...

Linux システム構成 (サービス制御) の詳細な紹介

目次序文1. システムサービス制御1. システムctl 2. ターゲット3. 共通システムサービス4...

携帯電話番号の真ん中の4桁を隠すMySQL SQL文の方法

最初のクエリ テーブル構造 (sys_users): sys_users から * を選択します。最...

Ubuntu 20.04 に GitLab をインストールして設定する方法

導入GitLab CE または Community Edition は、主に Git リポジトリのホ...