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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: HTML文書の基本構造（Webページ作成の基礎知識）
>>: Linuxの運用と保守の基本プロセス管理と環境構成分析
推薦する
VMware ESXi6.7 の簡単なセットアップ（画像とテキスト付き）
1. VMware vSphere の概要VMware vSphere は、業界をリードする最も信...
VMware 15 仮想マシンに Ubuntu 18.04 をインストールするグラフィック チュートリアル
ここ数年、私は自動化とコンピューターを行ったり来たりしてきました。最近は、機械学習に関連するプロジェ...
EclipseでTomcatを作成する原理の詳細な説明
ローカルEclipse上にTomcatサーバーを作成する場合、 tomcaインストールディレクトリの...
JS を使用して Web ページのウォーターフォール レイアウトを実装する方法
目次序文：ウォーターフォールレイアウトとは何ですか?達成方法: 1. 画像を取得する2. 画像の帯域...
Vue プロジェクトでの支払い機能の実装 (WeChat 支払いと Alipay 支払い)
目次プロジェクトにおける一般的な支払い方法Alipay決済微信ペイプロジェクトにおける一般的な支払い...
MySQLのユーザー権限の確認と管理方法の詳細な説明
この記事では、例を使用して、MySQL ユーザー権限を確認および管理する方法を説明します。ご参考まで...
CentOS 7 で grub パスワードと単一ユーザー ログインを設定するサンプル コード
Centos7 と Centos6 では、GRUB パスワードの設定手順に大きな違いがあります。これ...
Webフロントエンドのパフォーマンス最適化
ウェブフロントエンド最適化のベストプラクティス: コンテンツWebフロントエンド最適化のベストプラク...
Vue3 AST パーサー - ソースコード分析
目次1. AST抽象構文木を生成する2. ASTのルートノードを作成する3. 子ノードの解析4. テ...
Centos8 に nginx をインストールするための詳細なチュートリアル (画像とテキスト)
Nginx (「エンジン エックス」と発音) は、インターネット上の最大規模のサイトの負荷を処理す...
Vue パッケージアップロードサーバー更新 404 問題に対する 2 つの解決策
1: nginxサーバーソリューション、.conf構成ファイルを変更する解決策は2つある1: 位置 ...
Tomcat ディレクトリ構造の詳細な紹介
tomcat の解凍されたディレクトリを開くと、次のディレクトリ構造が表示されます。 1.Tomca...
自動ウェブページ更新と自動ジャンプのサンプルコード
ウェブページの自動更新: <head></head> の間に次のコードを追加...
HTML5+CSS3コーディング標準
黄金律プロジェクトに何人の人が取り組んでいるかに関係なく、すべてのコード行が同じ人によって書かれたよ...
MySQL インデックスに関するヒントのまとめ
目次1. インデックスの基礎知識1.1 インデックスの利点1.2 インデックスの有用性1.3 インデ...