Implementierung einer Login-Seite basierend auf layui
|
In diesem Artikelbeispiel wird der spezifische Code von layui zur Implementierung der Anmeldeseite zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Schauen wir uns zunächst die Renderings an!
html, js
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Anmelden</title>
<script src="./js/res_js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="./js/layui/css/layui.css" >
<link rel="stylesheet" href="./css/adminLogin.css" >
</Kopf>
<Text>
<div Klasse="wrap">
<img src="bilder/zurück.jpg" class="imgStyle">
<div Klasse="Anmeldeformular">
<form>
<div Klasse="logoHead">
<!--<h2 style="margin-top: 15px">Verwaltungssystem für Immobilienverkaufsplattformen</h2>-->
</div>
<div Klasse="usernameWrapDiv">
<div Klasse="BenutzernameLabel">
<label>Benutzername:</label>
</div>
<div Klasse="BenutzernameDiv">
<i class="layui-icon layui-icon-Benutzername adminIcon"></i>
<input id="loginUsername" class="layui-input adminInput" type="text" name="username" placeholder="Benutzernamen eingeben" >
</div>
</div>
<div Klasse="usernameWrapDiv">
<div Klasse="BenutzernameLabel">
<label>Passwort:</label>
</div>
<div Klasse="PasswortDiv">
<i class="layui-icon layui-icon-password adminIcon"></i>
<input id="loginPassword" class="layui-input adminInput" type="password" name="password" placeholder="Passwort eingeben">
</div>
</div>
<div Klasse="usernameWrapDiv">
<div Klasse="BenutzernameLabel">
<label>Bestätigungscode:</label>
</div>
<div Klasse="cardDiv">
<input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="Bestätigungscode eingeben">
</div>
<div Klasse="codeDiv">
<input id="Anmeldecode" class="layui-input codeInput" type="button">
</div>
</div>
<div Klasse="usernameWrapDiv">
<div Klasse="SubmitLabel">
<label>Kein Konto? <a href="#" id="loginRegister">Klicken Sie hier, um sich zu registrieren</a></label>
</div>
<div Klasse="submitDiv">
<input id="loginBtn" type="button" class="absenden layui-btn layui-btn-primary" value="Anmelden"></input>
</div>
</div>
</form>
</div>
</div>
<script src="./js/layui/layui.js" type="text/javascript"></script>
<Skript>
layui.use(['Ebene'],Funktion () {
var layer = layui.layer;
})
$(Funktion () {
// Seiteninitialisierung generiert Bestätigungscode window.onload = createCode('#loginCode');
// Bestätigungscode-Schalter $('#loginCode').click(function () {
Code erstellen('#loginCode');
});
// Login-Ereignis $('#loginBtn').click(function () {
Login();
});
//Registrierungsereignis $('#loginRegister').click(function () {
registrieren();
});
});
// Verifizierungscode generieren Funktion createCode(codeID) {
var code = "";
//Länge des Verifizierungscodes var codeLength = 4;
//Bestätigungscode Dom-Element var checkCode = $(codeID);
// Prüfcode Zufallszahl 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'];
für (var i = 0; i < Codelänge; i++){
// Index der Zufallszahl var index = Math.floor(Math.random()*36);
Code += Zufallszahl[Index];
}
// Weisen Sie den generierten zufälligen Verifizierungscode checkCode.val(code) zu.
}
// Prüfcode, Benutzername, Passwort überprüfen function validateCode(inputID,codeID) {
var inputCode = $(inputID).val().toUpperCase();
var Kartencode = $(Code-ID).val();
var loginUsername = $('#loginUsername').val();
var loginPassword = $('#loginPassword').val();
wenn ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
layer.alert("Benutzername darf nicht leer sein");
gibt false zurück;
}
wenn ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
layer.alert("Das Passwort darf nicht leer sein");
gibt false zurück;
}
wenn (Eingabecode.Länge<=0){
layer.alert("Der Bestätigungscode darf nicht leer sein");
gibt false zurück;
}
wenn (Eingabecode != Kartencode){
layer.alert("Bitte geben Sie den korrekten Bestätigungscode ein");
gibt false zurück;
}
gibt true zurück;
}
// Login-Vorgang Funktion login() {
wenn (!validateCode('#loginCard','#loginCode')){
//Blockaufforderung}else {
var loginUsername = $('#loginUsername').val();
var loginPassword = $('#loginPassword').val();
var Parameter = {};
params.loginUsername = Login-Benutzername;
params.loginPassword = Anmeldepasswort;
var loginLoadIndex = layer.load(2);
$('#loginBtn').val("Anmelden...");
$.ajax({
Typ: „Beitrag“,
url:window.location.protocol+'//'+window.location.host+'/security-web/login.do',
Datentyp: 'html',
Daten: JSON.stringify(Parameter),
Inhaltstyp: „application/json“,
Erfolg:Funktion (Daten) {
layer.close(loginLoadIndex);
var jsonData = JSON.parse(Daten);
wenn (jsonData.code == '999'){
window.location.href = "./static/templates/main.html";
}
},
Fehler:Funktion () {
layer.close(loginLoadIndex);
$('#loginBtn').val("Anmelden");
}
});
}
}
//Registrierungsprozess Funktion register() {
Schicht.öffnen({
Typ:'1',
Inhalt: $('.registerPage'),
Titel:'Registrierung',
Bereich: ['430px','400px'],
btn:['Registrieren', 'Zurücksetzen', 'Abbrechen'],
SchließeBtn:'1',
btn1:Funktion (Index,Ebene) {
//Rückruf registrieren layer.close(index);
var registerUsername = $('#registerUsername').val();
var registerPassword = $('#registerPassword').val();
var registerWellPassword = $('#registerWellPassword').val();
var selectValue = $('#roleSelect option:selected').val();
var Parameter = {};
params.registerUsername = Benutzername registrieren;
params.registerPassword = Passwort registrieren;
params.registerWellPassword = WellPassword registrieren;
params.selectValue = Wert auswählen;
var registerLoadIndex = layer.load(2);
$.ajax({
Typ: „Beitrag“,
url:window.location.protocol+'//'+window.location.host+'/security-web/register.do',
Datentyp: „json“,
Daten: JSON.stringify(Parameter),
Inhaltstyp: „application/json“,
Erfolg:Funktion (Daten) {
layer.close(registerLoadIndex);
layer.msg(Daten);
},
Fehler:Funktion () {
layer.close(registerLoadIndex);
layer.alert("Zeitüberschreitung der Anforderung!")
}
});
},
btn2:Funktion (Index,Ebene) {
//Rückruf zurücksetzen var registerUsername = $('#registerUsername').val("");
var registerPassword = $('#registerPassword').val("");
var registerWellPassword = $('#registerWellPassword').val("");
// Verhindern, dass die Registrierungsseite geschlossen wird. return false;
},
btn3:Funktion (Index,Ebene) {
//Rückruf abbrechen}
})
}
</Skript>
</body>
<div Klasse="Seite registrieren">
<div Klasse="registerDiv">
<form>
<div Klasse="usernameWrapDiv">
<div Klasse="BenutzernameLabel">
<label>Benutzername:</label>
</div>
<div Klasse="BenutzernameDiv">
<i class="layui-icon layui-icon-Benutzername adminIcon"></i>
<input id="registerUsername" class="layui-input adminInput" type="text" name="username" placeholder="Benutzernamen eingeben" >
</div>
</div>
<div Klasse="usernameWrapDiv">
<div Klasse="BenutzernameLabel">
<label>Passwort:</label>
</div>
<div Klasse="PasswortDiv">
<i class="layui-icon layui-icon-password adminIcon"></i>
<input id="registerPassword" class="layui-input adminInput" type="password" name="password" placeholder="Passwort eingeben">
</div>
</div>
<div Klasse="usernameWrapDiv">
<div Klasse="BenutzernameLabel">
<label>Passwort bestätigen:</label>
</div>
<div Klasse="PasswortDiv">
<i class="layui-icon layui-icon-password adminIcon"></i>
<input id="registerWellPassword" class="layui-input adminInput" type="password" name="password" placeholder="Passwort eingeben">
</div>
</div>
<div Klasse="usernameWrapDiv">
<div Klasse="BenutzernameLabel">
<label>Rollentyp:</label>
</div>
<div Klasse="PasswortDiv">
<Wählen Sie id="Rollenauswahl" Klasse="layui-select">
<option value="">Bitte wählen...</option>
<option value="0">Agent</option>
<option value="1">Vermieter</option>
</Auswählen>
</div>
</div>
</form>
</div>
</div>
</html>CSS
/*Start des Anmeldeformularstils*/
.wickeln{
Breite: 100 %;
Höhe: 100%;
Hintergrund: URL("../images/back.jpg") keine Wiederholung;
Hintergrundgröße: Abdeckung;
}
.loginForm{
Rand links: 35 %;
oberer Rand: 10 %;
/*Hintergrundfarbe: #cccccc;*/
Hintergrundfarbe: #e7e7e7;
Breite: 400px;
Höhe: 400px;
schweben: links;
Z-Index: 9999;
Position: fest;
Deckkraft: 0,75;
}
.usernameDiv{
Breite: 300px;
Höhe: 40px;
Polsterung links: 130px;
Polsterung oben: 30px;
}
.adminInput{
Breite: 200px;
Höhe: 40px;
Schriftgröße: 15px;
Rahmenradius: 0,5em;
/*Rand links: auto;*/
/*Rahmen: 1px durchgezogen #cccccc;*/
}
.passwordDiv{
Breite: 300px;
Höhe: 40px;
Polsterung links: 130px;
Polsterung oben: 28px;
}
.cardDiv{
Breite: 120px;
Höhe: 40px;
Polsterung oben: 28px;
Polsterung links: 14px;
schweben: links;
}
.cardInput{
Breite: 124px;
Höhe: 40px;
Schriftgröße: 15px;
Rahmenradius: 0,5em 0em 0em 0,5em;
}
.codeDiv{
Breite: 100px;
Höhe: 40px;
Polsterung oben: 28px;
Polsterung rechts: 20px;
schweben: links;
}
.codeInput{
Breite: 80px;
Höhe: 40px;
Schriftgröße: 15px;
Randradius: 0em 0,5em 0,5em 0em;
/*Stil des Bestätigungscodes*/
Schriftfamilie: Arial;
Schriftstil: kursiv;
Schriftstärke: fett;
/*Rand: 0;*/
Buchstabenabstand: 2px;
Cursor: Zeiger;
}
ich{
Position: absolut;
}
.adminIcon{
Schriftgröße: 22px;
Rand oben: 8px;
Rand links: 165px;
}
.logoHead{
Breite: 250px;
Höhe: 60px;
Polsterung links: 90px;
Polsterung oben: 25px;
}
.BenutzernameLabel{
Breite: 60px;
Höhe: 30px;
Schriftgröße: 16px;
schweben: links;
Rand links: 55px;
Rand oben: 40px;
}
.submitLabel{
Breite: 160px;
Höhe: 30px;
Schriftgröße: 13px;
schweben: links;
Rand links: 55px;
Rand oben: 40px;
Cursor: Zeiger;
}
.usernameWrapDiv{
Breite: 400px;
Höhe: 70px;
}
.submitDiv{
Breite: 150px;
Höhe: 40px;
Polsterung links: 10px;
Polsterung oben: 28px;
schweben: links;
}
.einreichen{
Breite: 100px;
Höhe: 40px;
Rahmenradius: 0,5em;
}
img{
Position: absolut;
}
.imgStyle{
Breite: 100 %;
Höhe: 100%;
}
/*Ende des Anmeldeformularstils*/
/*Start des Stils der Registrierungsseite*/
.registerPage{
Breite: 100 %;
Höhe: 100%;
/*Hintergrundfarbe: #cccccc;*/
Anzeige: keine;
Deckkraft: 0,75;
}
.registerDiv{
Breite: 100 %;
Höhe: 100%;
Z-Index: 9999;
Deckkraft: 0,75;
}
/*Ende des Registrierungsseitenstils*/Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Grundlegende Struktur von HTML-Dokumenten (Grundkenntnisse zur Erstellung von Webseiten)
Artikel empfehlen
Ein Artikel zum schnellen Verständnis des Lebenszyklus und der Hook-Funktionen von Angular und Ionic
Inhaltsverzeichnis Eckig erreichen Aufrufreihenfo...
PageSpeed Optimierung im Überblick
Ich glaube, dass das Internet zu einem immer unve...
Detaillierte Erklärung des digitalen Puzzles CocosCreator Huarongdao
Inhaltsverzeichnis Vorwort Text 1. Panel 2. Huaro...
Detaillierte Erklärung zur Verwendung der vue3 Teleport-Sofortbewegungsfunktion
Die Verwendung der vue3 Teleport-Sofortbewegungsf...
Eine detaillierte Einführung in die Bereitstellung von Seata Docker mit hoher Verfügbarkeit
Version 1.4.2 Offizielle Dokumentation Dockerhub ...
Detaillierte Erläuterung des Prozesses zum Einrichten einer NVIDIA-Docker-Umgebung auf einem Linux-Server
Docker entspricht einem Container, der je nach de...
jquery+springboot realisiert die Datei-Upload-Funktion
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Schritte zum Erstellen einer React-Anwendung mit einer Rails-API
Inhaltsverzeichnis Backend: Rails API-Teil Front-...
Detaillierte Erläuterung des SVN-Ein-Klick-Installations-Shell-Skripts unter Linux
#!/bin/bash #SVN herunterladen yum -y installiere...
Tutorial zum Erstellen einer visuellen Leistungsüberwachungsplattform mit JMeter+Grafana+InfluxDB in einer Docker-Umgebung
Inhaltsverzeichnis 1. Docker installieren 2. Inst...
Erläuterung des MySQL-Abfragebeispiels anhand instanziierter Objektparameter
Dieser Artikel stellt vor, wie Sie durch Instanzi...
Eine kurze Erläuterung verschiedener Möglichkeiten zum Übergeben von Parametern beim React-Routing
Die erste Methode zur Parameterübergabe ist die d...
Beispielcode zur Implementierung einer Sternenhimmelanimation mit CSS3 Advanced LESS
In diesem Artikel wird der Beispielcode für erwei...
Farbschemata für Websites Die richtigen Farben für Ihre Website auswählen
Beeinflusst Farbe die Website-Besucher? Vor einig...
So konfigurieren Sie mehrere Projekte mit demselben Domänennamen in Nginx
Es gibt zwei Möglichkeiten, mit Nginx mehrere Pro...