HTML+jQuery zur Implementierung einer einfachen Anmeldeseite

Inhaltsverzeichnis

Einführung
Öffentlicher Code (Backend-Schnittstelle)
Beispiel 1: Am einfachsten (reines HTML)

Code
prüfen

Beispiel 2: HTML+jQuery (Formulardaten)

Code
prüfen

Beispiel 3: HTML+jQuery(json)

Code
prüfen

Einführung

Dieser Artikel zeigt anhand von Beispielen, wie eine einfache Anmeldeseite geschrieben wird.

Die folgenden Lösungen werden enthalten sein: reines HTML, HTML+jQuery-Format (Formulardaten) und HTML+jQuery-Format (JSON).

Öffentlicher Code (Backend-Schnittstelle)

Verwenden Sie SpringBoot, um die einfachste Anmeldeschnittstelle zu schreiben.

Regler

Paket com.example.controller;
 
importiere com.example.entity.LoginVO;
importiere org.springframework.web.bind.annotation.CrossOrigin;
importiere org.springframework.web.bind.annotation.PostMapping;
importiere org.springframework.web.bind.annotation.RequestParam;
importiere org.springframework.web.bind.annotation.RestController;
 
//CrossOrigin
//Rest-Stil: JSON zurückgeben
@RestController
öffentliche Klasse LoginController {
    @PostMapping("Anmelden")
    öffentliche LoginVO login() {
        //Die Beurteilung von Benutzername und Passwort weglassen LoginVO loginVO = new LoginVO();
        loginVO.setSuccess(true);
        loginVO.setData("Dies sind Daten");
        loginVO zurückgeben;
    }
}

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<Projekt 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">
    <modelVersion>4.0.0</modelVersion>
    <übergeordnetes Element>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.0.RELEASE</version>
        <relativePath/> <!-- übergeordnetes Element im Repository suchen -->
    </übergeordnet>
    <groupId>com.beispiel</groupId>
    <artifactId>demo_SpringBoot</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo_SpringBoot</name>
    <description>Demoprojekt für Spring Boot</description>
 
    <Abhängigkeiten>
        <Abhängigkeit>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </Abhängigkeit>
    </Abhängigkeiten>
</Projekt>

Beispiel 1: Am einfachsten (reines HTML)

Code

anmelden.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Anmeldeseite</title>
</Kopf>
 
<Text>
 
<form action="http://localhost:8080/login" method="post">
    <label for="username">Benutzername:</label>
    <input type="text" name="benutzername" id="benutzername">
 
    <label for="password">Passwort:</label>
    <input type="Passwort" name="Passwort" id="Passwort">
 
    <!--Sie können auch so schreiben <label for="username">
        Benutzername: <input type="text" name="username" id="username">
    </Bezeichnung>
    <label für="Passwort">
        Passwort: <input type="password" name="password" id="password">
    </label>-->
 
    <button type="submit">Anmelden</button>
</form>
 
</body>
</html>

prüfen

1. Besuchen Sie login.html

2. Geben Sie Ihren Benutzernamen und Ihr Passwort ein

Benutzername: Geben Sie abc ein; Passwort: Geben Sie 1234 ein

Ergebnis

Beispiel 2: HTML+jQuery (Formulardaten)

Code

anmelden.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Anmeldeseite</title>
    <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
</Kopf>
 
<Text>
 
<form id="Anmeldeformular">
    <label for="username">Benutzername:</label>
    <input type="text" name="benutzername" id="benutzername">
 
    <label for="password">Passwort:</label>
    <input type="Passwort" name="Passwort" id="Passwort">
</form>
 
<div id="Fehlermeldung"></div>
<button type="submit" onclick="loginViaFormData()">Anmelden</button>
 
<Skript>
    Funktion loginViaFormData() {
        $.ajax(
            {
                Typ: "Beitrag",
                URL: "http://localhost:8080/login",
                data: $("#login-form").serialize(), //Daten im Formular serialisieren und an das Backend übergeben //dataType: "json", //Geben Sie an, dass die vom Backend übergebenen Daten im JSON-Format vorliegen success: function (result) {
                    wenn (!Ergebnis.Erfolg) {
                        $("#errormessage").text("Falscher Benutzername oder falsches Passwort");
                    } sonst wenn (Ergebnis.Erfolg) {
                        alert("Anmeldung erfolgreich");
                        // Zur Seite „index.html“ springen window.location.href="index.html" rel="external nofollow" rel="external nofollow";
                    }
                }
            }
        )
    }
</Skript>
 
</body>
</html>

Hauptseite

<!doctype html>
<html lang="de">
 
<Kopf>
    <meta charset="UTF-8">
    <title>Dies ist der Titel</title>
</Kopf>
 
<Text>
 
<div Klasse="Container">
    Seite nach erfolgreichem Login</div>
 
<Skript>
 
</Skript>
</body>
</html>

prüfen

1. Besuchen Sie login.html

2. Geben Sie Ihren Benutzernamen und Ihr Passwort ein

Benutzername: Geben Sie abc ein; Passwort: Geben Sie 1234 ein

3. Klicken Sie auf Anmelden

4. Klicken Sie auf OK

Beispiel 3: HTML+jQuery(json)

Code

anmelden.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Anmeldeseite</title>
    <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
</Kopf>
 
<Text>
 
<form id="Anmeldeformular">
    <label for="username">Benutzername:</label>
    <input type="text" name="benutzername" id="benutzername">
 
    <label for="password">Passwort:</label>
    <input type="Passwort" name="Passwort" id="Passwort">
</form>
 
<div id="Fehlermeldung"></div>
<button type="submit" onclick="loginViaJson()">Anmelden</button>
 
<Skript>
    Funktion loginViaJson() {
        $.post("http://localhost:8080/login",
            //Daten an das Backend gesendet {
                "Benutzername": $(".username").val(),
                "Passwort": $(".password").val()
            },
            //Rückruffunktion Funktion (Ergebnis) {
                wenn (!Ergebnis.Erfolg) {
                    $("#errormessage").text("Falscher Benutzername oder falsches Passwort");
                } sonst wenn (Ergebnis.Erfolg) {
                    alert("Anmeldung erfolgreich");
                    // Zur Seite „index.html“ springen window.location.href="index.html" rel="external nofollow" rel="external nofollow";
                }
            }
        )
    }
</Skript>
 
</body>
</html>

Hauptseite

<!doctype html>
<html lang="de">
 
<Kopf>
    <meta charset="UTF-8">
    <title>Dies ist der Titel</title>
</Kopf>
 
<Text>
 
<div Klasse="Container">
    Seite nach erfolgreichem Login</div>
 
<Skript>
 
</Skript>
</body>
</html>

prüfen

Die Testergebnisse sind die gleichen wie beim vorherigen „Beispiel 2: HTML+jQuery (Formulardaten)“

1. Besuchen Sie login.html

2. Geben Sie Ihren Benutzernamen und Ihr Passwort ein

Benutzername: Geben Sie abc ein; Passwort: Geben Sie 1234 ein

3. Klicken Sie auf Anmelden

4. Klicken Sie auf OK

Dies ist das Ende dieses Artikels über die Implementierung einer einfachen Anmeldeseite mit HTML+jQuery. Weitere relevante Inhalte für HTML-jQuery-Anmeldeseiten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:

jQuery Ajax implementiert die Echtzeitanzeige des Benutzeranmeldestatus auf der HTML-Seite
jQuery+ajax zur Implementierung der Benutzeranmeldungsüberprüfung
jQuery implementiert die Benutzeranmeldungsüberprüfung
Implementierung der Benutzeranmeldeüberprüfung mit JavaScript und jQuery
jQuery Enter für einfache Anmeldung

<<: Eine vollständige Liste häufig verwendeter HTML-Tags und ihrer Eigenschaften

>>: Konvertieren Sie ausgeschnittene PSD-Bilder in das Div+CSS-Format