layui をベースにしたログインページの実装

layui をベースにしたログインページの実装

この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

まずはレンダリングを見てみましょう！

html、js

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ログイン</title>
    <script src="./js/res_js/jquery-3.4.1.min.js"></script>
    <link rel="スタイルシート" href="./js/layui/css/layui.css" >
    <link rel="スタイルシート" href="./css/adminLogin.css" >
</head>
<本文>
    <div class="wrap">
        <img src="images/back.jpg" class="imgStyle">
        <div class="ログインフォーム">
            <フォーム>
                <div class="logoHead">
                    <!--<h2 style="margin-top: 15px">不動産販売プラットフォーム管理システム</h2>-->
                </div>
                <div class="ユーザー名WrapDiv">
                    <div class="ユーザー名ラベル">
                        <label>ユーザー名:</label>
                    </div>
                    <div class="ユーザー名Div">
                        <i class="layui-icon layui-icon-username adminIcon"></i>
                        <input id="loginUsername" class="layui-input adminInput" type="text" name="username" placeholder="ユーザー名を入力" >
                    </div>
                </div>
                <div class="ユーザー名WrapDiv">
                    <div class="ユーザー名ラベル">
                        <label>パスワード:</label>
                    </div>
                    <div class="passwordDiv">
                        <i class="layui-icon layui-icon-password adminIcon"></i>
                        <input id="loginPassword" class="layui-input adminInput" type="password" name="password" placeholder="パスワードを入力">
                    </div>
                </div>
                <div class="ユーザー名WrapDiv">
                    <div class="ユーザー名ラベル">
                        <label>確認コード:</label>
                    </div>
                    <div class="cardDiv">
                        <input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="確認コードを入力">
                    </div>
                    <div class="codeDiv">
                        <input id="ログインコード" class="layui-input codeInput" type="ボタン">
                    </div>
                </div>
                <div class="ユーザー名WrapDiv">
                    <div class="submitLabel">
                        <label>アカウントがありませんか? <a href="#" id="loginRegister">登録するにはクリックしてください</a></label>
                    </div>
                    <div class="submitDiv">
                        <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="ログイン"></input>
                    </div>
                </div>
            </フォーム>
        </div>
    </div>
    <script src="./js/layui/layui.js" type="text/javascript"></script>
    <スクリプト>
        layui.use(['レイヤー'],関数() {
            var レイヤー = layui.layer;
        })
        $(関数() {
            // ページの初期化により検証コードが生成されます window.onload = createCode('#loginCode');
            // 検証コードスイッチ $('#loginCode').click(function () {
                コードを作成します('#ログインコード');
            });
            // ログインイベント $('#loginBtn').click(function () {
                ログイン（）;
            });
            //登録イベント $('#loginRegister').click(function () {
                登録する（）;
            });
        });
        // 検証コードを生成する function createCode(codeID) {
            var コード = "";
            //検証コードの長さ var codeLength = 4;
            //検証コード DOM 要素 var checkCode = $(codeID);
            // 検証コードの乱数 var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
                ['S'、'T'、'U'、'V'、'W'、'X'、'Y'、'Z'];
            (var i = 0; i < codeLength; i++){
                // 乱数インデックス var index = Math.floor(Math.random()*36);
                コード += ランダム[インデックス];
            }
            // 生成されたランダム検証コードを checkCode.val(code) に割り当てます。
        }
        // 確認コード、ユーザー名、パスワードを検証する function validateCode(inputID,codeID) {
            var 入力コード = $(入力ID).val().toUpperCase();
            var カードコード = $(コードID).val();
            var loginUsername = $('#loginUsername').val();
            var loginPassword = $('#loginPassword').val();
            ($.trim(ログインユーザー名) == '' || $.trim(ログインユーザー名).length<=0) の場合{
                layer.alert("ユーザー名は空にできません");
                false を返します。
            }
            ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0) の場合{
                layer.alert("パスワードは空にできません");
                false を返します。
            }
            入力コードの長さ<=0の場合{
                layer.alert("検証コードは空にできません");
                false を返します。
            }
            入力コードがカードコードと等しくない場合
                layer.alert("正しい確認コードを入力してください");
                false を返します。
            }
            true を返します。
        }
        // ログイン処理関数 login() {
            if (!validateCode('#loginCard','#loginCode')){
                //ブロックプロンプト}else {
                var loginUsername = $('#loginUsername').val();
                var loginPassword = $('#loginPassword').val();
                var パラメータ = {};
                パラメータ:
                パラメータ:
                var loginLoadIndex = レイヤー.load(2);
                $('#loginBtn').val("ログイン中...");
                $.ajax({
                    タイプ:'投稿',
                    url:window.location.protocol+'//'+window.location.host+'/security-web/login.do',
                    データタイプ:'html',
                    データ:JSON.stringify(パラメータ),
                    コンテンツタイプ:'application/json',
                    成功:関数 (データ) {
                        レイヤーを閉じます(ログインロードインデックス);
                        var jsonData = JSON.parse(データ);
                        (jsonData.code == '999')の場合{
                            window.location.href = './static/templates/main.html';
                        }
                    },
                    エラー:関数() {
                        レイヤーを閉じます(ログインロードインデックス);
                        $('#loginBtn').val("ログイン");
                    }
                });
            }

        }
        //登録処理関数register() {
            レイヤーを開く({
                タイプ:'1',
                コンテンツ:$('.registerPage'),
                タイトル:「登録」、
                面積:['430px','400px'],
                btn:['登録', 'リセット', 'キャンセル'],
                閉じるボタン:'1',
                btn1:function (インデックス,layero) {
                    //コールバックを登録します。layer.close(index);
                    var registerUsername = $('#registerUsername').val();
                    var registerPassword = $('#registerPassword').val();
                    var registerWellPassword = $('#registerWellPassword').val();
                    var selectValue = $('#roleSelect オプション:選択済み').val();
                    var パラメータ = {};
                    パラメータ：
                    パラメータ：
                    パラメータ：
                    パラメータ:
                    var registerLoadIndex = レイヤー.load(2);
                    $.ajax({
                        タイプ:'投稿',
                        url:window.location.protocol+'//'+window.location.host+'/security-web/register.do',
                        データ型: 'json',
                        データ:JSON.stringify(パラメータ),
                        コンテンツタイプ:'application/json',
                        成功:関数 (データ) {
                            レイヤーを閉じます(レジスタロードインデックス);
                            レイヤー.msg(データ);
                        },
                        エラー:関数() {
                            レイヤーを閉じます(レジスタロードインデックス);
                            layer.alert("リクエストがタイムアウトしました!")
                        }
                    });
                },
                btn2:function (インデックス,layero) {
                    //コールバックをリセット var registerUsername = $('#registerUsername').val("");
                    var registerPassword = $('#registerPassword').val("");
                    var registerWellPassword = $('#registerWellPassword').val("");
                    // 登録ページが閉じないようにする return false;
                },
                btn3:function (インデックス,layero) {
                    //コールバックをキャンセル}
            })
        }
    </スクリプト>

</本文>
<div class="registerPage">
    <div class="registerDiv">
        <フォーム>
            <div class="ユーザー名WrapDiv">
                <div class="ユーザー名ラベル">
                    <label>ユーザー名:</label>
                </div>
                <div class="ユーザー名Div">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="registerUsername" class="layui-input adminInput" type="text" name="username" placeholder="ユーザー名を入力" >
                </div>
            </div>
            <div class="ユーザー名WrapDiv">
                <div class="ユーザー名ラベル">
                    <label>パスワード:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="registerPassword" class="layui-input adminInput" type="password" name="password" placeholder="パスワードを入力">
                </div>
            </div>
            <div class="ユーザー名WrapDiv">
                <div class="ユーザー名ラベル">
                    <label>パスワードの確認:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="registerWellPassword" class="layui-input adminInput" type="password" name="password" placeholder="パスワードを入力">
                </div>
            </div>
            <div class="ユーザー名WrapDiv">
                <div class="ユーザー名ラベル">
                    <label>役割タイプ:</label>
                </div>
                <div class="passwordDiv">
                    <select id="roleSelect" class="layui-select">
                        <option value="">選択してください...</option>
                        <option value="0">エージェント</option>
                        <option value="1">家主</option>
                    </選択>
                </div>
            </div>
        </フォーム>
    </div>
</div>
</html>

CS

/*ログインフォームスタイルの開始*/
。包む{
    幅: 100%;
    高さ: 100%;
    背景: url("../images/back.jpg") 繰り返しなし;
    背景サイズ: カバー;
}
.ログインフォーム{
    左マージン: 35%;
    上マージン: 10%;
    /*背景色: #cccccc;*/
    背景色: #e7e7e7;
    幅: 400ピクセル;
    高さ: 400px;
    フロート: 左;
    zインデックス: 9999;
    位置: 固定;
    不透明度: 0.75;
}
.ユーザー名Div{
    幅: 300ピクセル;
    高さ: 40px;
    左パディング: 130px;
    パディング上部: 30px;

}
.adminInput{
    幅: 200ピクセル;
    高さ: 40px;
    フォントサイズ: 15px;
    境界線の半径: 0.5em;
    /*左マージン: 自動;*/
    /*境界線: 1px 実線 #cccccc;*/
}
.passwordDiv{
    幅: 300ピクセル;
    高さ: 40px;
    左パディング: 130px;
    パディング上部: 28px;
}
.cardDiv{
    幅: 120ピクセル;
    高さ: 40px;
    パディング上部: 28px;
    左パディング: 14px;
    フロート: 左;
}
.カード入力{
    幅: 124ピクセル;
    高さ: 40px;
    フォントサイズ: 15px;
    境界線の半径: 0.5em 0em 0em 0.5em;
}
.codeDiv{
    幅: 100ピクセル;
    高さ: 40px;
    パディング上部: 28px;
    右パディング: 20px;
    フロート: 左;
}
.codeInput{
    幅: 80ピクセル;
    高さ: 40px;
    フォントサイズ: 15px;
    境界線の半径: 0em 0.5em 0.5em 0em;
    /*検証コードスタイル*/
    フォントファミリ: Arial;
    フォントスタイル: 斜体;
    フォントの太さ: 太字;
    /*境界線: 0;*/
    文字間隔: 2px;
    カーソル: ポインタ;
}
私{
    位置: 絶対;
}
.adminIcon{
    フォントサイズ: 22px;
    上マージン: 8px;
    左マージン: 165px;
}
.logoHead{
    幅: 250ピクセル;
    高さ: 60px;
    左パディング: 90px;
    パディング上部: 25px;
}
.ユーザー名ラベル{
    幅: 60ピクセル;
    高さ: 30px;
    フォントサイズ: 16px;
    フロート: 左;
    左マージン: 55px;
    上マージン: 40px;
}
.submitLabel{
    幅: 160ピクセル;
    高さ: 30px;
    フォントサイズ: 13px;
    フロート: 左;
    左マージン: 55px;
    上マージン: 40px;
    カーソル: ポインタ;
}
.usernameWrapDiv{
    幅: 400ピクセル;
    高さ: 70px;
}
.submitDiv{
    幅: 150ピクセル;
    高さ: 40px;
    左パディング: 10px;
    パディング上部: 28px;
    フロート: 左;
}
。提出する{
    幅: 100ピクセル;
    高さ: 40px;
    境界線の半径: 0.5em;
}
画像{
    位置: 絶対;
}
.imgスタイル{
    幅: 100%;
    高さ: 100%;
}
/*ログインフォームスタイル終了*/

/*登録ページスタイルの開始*/
.registerPage{
    幅: 100%;
    高さ: 100%;
    /*背景色: #cccccc;*/
    表示: なし;
    不透明度: 0.75;
}
.registerDiv{
    幅: 100%;
    高さ: 100%;
    zインデックス: 9999;
    不透明度: 0.75;
}
/*登録ページスタイル終了*/

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • ログイン情報に応じて異なるページを表示するSSM+layUI方式

<<:  HTML文書の基本構造（Webページ作成の基礎知識）

>>:  Linuxの運用と保守の基本プロセス管理と環境構成分析

推薦する

HTML は CSS スタイルと JS スクリプトを動的に読み込みます。例

1. スクリプトを動的に読み込むウェブサイトの需要が高まるにつれて、スクリプトの需要も徐々に増加しま...

1つの記事でJavaScript DOM操作の基本を学ぶ

DOM の概念DOM: ドキュメント オブジェクト モデル: ドキュメント オブジェクト モデルは、...

vscode を使用したリモート Linux 開発の実装

過去に別れを告げるvscode にリモート SSH が導入される前は、Linux サーバー開発者の多...

ランダムロールコールテーブルを実装するためのネイティブJavaScript

この記事では、JavaScriptのランダムロールコールテーブルの具体的なコードを参考までに紹介しま...

MySQL 5.7.15 のインストールと設定方法のグラフィック チュートリアル (Windows)

MySQL をインストールする必要があるため、インストール手順を以下のように記録します。 自分なり...

Dockerに関するよくある質問

Docker はポートを IPv6 にのみマッピングし、IPv4 にはマッピングしません。 dock...

JavaScript におけるシリアル操作と並列操作

目次1. はじめに2. es5メソッド3. 非同期関数のシリアル実行4. 非同期関数の並列実行5. ...

MySQL Limitクエリのパフォーマンスを向上させる方法

MySQL データベース操作では、一部のクエリを実行するときにデータベース エンジンが完全なテーブル...

Linux サーバーのスクリプトを自動的にバックアップする方法 (mysql、添付ファイルのバックアップ)

1.backup.shスクリプトファイルを作成する #!/bin/sh ソースフォルダ=/データ ...

MySQLはトリガーを使用してデータベース内のテーブルの行制限を解決します。詳細な説明と例

MySQLはトリガーを使用してデータベース内のテーブルの行制限を解決します。詳細な説明と例最近のプロ...

幅と高さが可変の要素を中央に配置するための CSS ソリューション

1. 水平中央公開コード: html: <div class="parent&quo...

VirtualBoxにOpenSuseをインストールする方法

仮想マシンはホストマシンにインストールされます。 CPU とメモリはホスト マシンと共有する必要があ...

Reactの3つの主要属性におけるpropsの使用の詳細な説明

目次クラスコンポーネント機能コンポーネントプロパティは読み取り専用ですコンポーネント間通信前回は状態...

HTML ul 順序なしテーブルのアプリケーションネスト

順序なしリストのアプリケーションネストコードをコピーコードは次のとおりです。 <!DOCTYP...

Dockerを使用してクローンリポジトリを使用してGitイメージを構築する

概要私は 1 年以上 Docker を使用しています。最近、サービスをすばやくオーケストレーションし...