導入この記事では、例を使用して、簡単なログイン ページの作成方法を説明します。 以下のソリューションが含まれます: 純粋な 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 重複したMySQLレコードを現場でチェックし、処理する実践的な記録
>>: よく使われる HTML タグとその特徴の完全なリスト
最近、cronスケジュールタスク用のdockerを作りたいと思っており、Dockerfileで次のよ...
1. はじめにPresto は、ギガバイトからペタバイトに及ぶデータ ソースに対してインタラクティブ...
アリババクラウドがサーバーを購入クラウドサーバーを購入し、サーバーバージョンとしてcentos 7....
この記事の例では、グラフィック検証コードを実装するためのVueプロジェクトの具体的なコードを参考まで...
ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...
Cocos Creator バージョン: 2.3.4デモのダウンロード: https://files...
序文ミニプログラムのアップロードには https が必要なので、サーバーの https は lets...
1. MYSQLインストールディレクトリ次のようにコードをコピーします。 select @@bas...
私が実現したい機能は、新しいウィンドウを開いて新しいページを表示することですが、パラメータを渡す必要...
普段はdocker buildコマンドでイメージを生成していますが、コードの更新が頻繁に行われるとn...
まず、VMware 14のアクティベーションコードをお渡ししますFF31K-AHZD1-H8ETZ-...
序文この記事では、Nginx の一般的な、実用的で興味深い構成をいくつか紹介します。この記事を読んだ...
目次序文1. システムサービス制御1. システムctl 2. ターゲット3. 共通システムサービス4...
最初のクエリ テーブル構造 (sys_users): sys_users から * を選択します。最...
導入GitLab CE または Community Edition は、主に Git リポジトリのホ...