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: