suchen

Heim  >  Artikel  >  Backend-Entwicklung  >  Login-Sprungseite HTML

Login-Sprungseite HTML

WBOY
WBOYOriginal
2023-05-09 10:48:372332Durchsuche

In der Webentwicklung ist die Login-Sprungseite eine häufige Funktion. Nachdem sich der Benutzer einmal angemeldet hat, entwerfen wir normalerweise eine Sprungseite zum Speichern der Benutzerinformationen, um dem Benutzer das Durchsuchen des Website-Inhalts zu erleichtern und zu vermeiden, dass der Benutzer die Anmeldeinformationen jedes Mal erneut eingeben muss, wenn er eine neue Seite besucht Anmeldeinformationen in einer Sitzung, damit der Benutzer weiterhin Inhalte auf der Website durchsuchen kann.

In diesem Artikel stellen wir vor, wie man HTML und JavaScript verwendet, um eine Login-Sprungseite zu implementieren.

  1. HTML-Seite erstellen

Zuerst müssen wir eine HTML-Seite erstellen. Sie können direkt im Code-Editor eine leere HTML-Datei erstellen und dann den folgenden Code hinzufügen: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Login Redirect Page</title>
</head>
<body>
  <h1>Login Redirect Page</h1>
  <p>Please wait while you are being redirected...</p>
</body>
</html>

Auf dieser HTML-Seite haben wir einen Titel und eine Eingabeaufforderung erstellt. Diese Seite enthält kein Anmeldeformular, da wir diese Funktionalität auf einer anderen Seite hinzufügen werden.

  1. Erstellen Sie eine Anmeldeseite.

Als nächstes müssen wir eine Anmeldeseite erstellen. Sie können den Code weiterhin in dieselbe HTML-Datei schreiben oder eine neue HTML-Datei erstellen und den Code kopieren und dort einfügen. Hier ist ein Beispiel für ein einfaches Anmeldeformular: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Login Page</title>
</head>
<body>
  <h1>Login Page</h1>
  <form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"><br><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br><br>
    <button type="submit" onclick="login()">Login</button>
  </form>
  
  <script>
    function login() {
      // Get the input fields
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;
      
      // Set the session storage values
      sessionStorage.setItem("username", username);
      sessionStorage.setItem("password", password);
      
      // Redirect to the homepage
      window.location.replace("homepage.html");
    }
  </script>
</body>
</html>

Auf dieser Anmeldeseite haben wir ein Formular mit Eingabefeldern für Benutzername und Passwort sowie einer Schaltfläche zum Senden erstellt. Wenn der Benutzer auf die Schaltfläche „Anmelden“ klickt, speichern wir den von ihm eingegebenen Benutzernamen und das Passwort im Sitzungsspeicher und leiten den Benutzer dann über die Funktion window.location.replace() in JavaScript auf eine Seite namens „homepage.html“ weiter.

  1. Implementierung der Sprungseite

Im ersten Schritt haben wir eine leere HTML-Seite mit dem Namen „login-redirect.html“ erstellt. Jetzt müssen wir darin ein JavaScript-Skript hinzufügen, das beim Laden der Seite prüft, ob der Benutzer bereits angemeldet ist, und ihn basierend auf dem Anmeldestatus auf die richtige Seite weiterleitet.

Hier ist ein einfaches JavaScript-Beispiel, das diese Funktionalität implementiert: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Login Redirect Page</title>
</head>
<body>
  <h1>Login Redirect Page</h1>
  <p>Please wait while you are being redirected...</p>
  
  <script>
    // Check if the user is logged in
    var username = sessionStorage.getItem("username");
    var password = sessionStorage.getItem("password");
    
    if (username == null || password == null) {
      // Redirect to the login page
      window.location.replace("login.html");
    } else {
      // Redirect to the homepage
      window.location.replace("homepage.html");
    }
  </script>
</body>
</html>

In diesem Skript ermitteln wir zunächst, ob sich der Benutzer bereits angemeldet hat. Wenn der Benutzer nicht angemeldet ist, leiten Sie ihn auf eine Anmeldeseite namens „login.html“ um; andernfalls leiten Sie ihn auf eine Seite namens „homepage.html“ weiter.

  1. Login-Sprungseite testen

Jetzt haben wir das Schreiben des HTML- und JavaScript-Codes für die Login-Sprungseite abgeschlossen. Wir können diese Seiten auf einem lokalen oder Remote-Server starten und testen, um sicherzustellen, dass sie die Login-Umleitungsfunktion korrekt ausführen.

Wir können zunächst versuchen, auf unsere Seite „homepage.html“ zuzugreifen, ohne Benutzernamen und Passwort einzugeben, und prüfen, ob sie zur Anmeldeseite weiterleitet. Anschließend können wir auf der Anmeldeseite einen beliebigen Benutzernamen und ein beliebiges Passwort eingeben und prüfen, ob diese korrekt im Sitzungsspeicher gespeichert und auf die Seite „homepage.html“ weitergeleitet werden.

Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie man HTML und JavaScript verwendet, um eine Login-Sprungseite zu implementieren. Wir haben zunächst eine leere Sprungseite erstellt und darauf JavaScript-Code geschrieben, um zu überprüfen, ob der Benutzer angemeldet ist, wenn die Seite geladen wird, und um ihn auf die richtige Seite umzuleiten. Anschließend haben wir eine HTML-Seite mit dem Anmeldeformular erstellt und darin JavaScript-Code hinzugefügt, um den vom Benutzer eingegebenen Benutzernamen und das Kennwort im Sitzungsspeicher zu speichern, wenn er auf die Schaltfläche „Anmelden“ klickt, und ihn zur Jump-Turn-Seite weiterzuleiten. Schließlich stellen wir sicher, dass sie die Login-Umleitungsfunktion korrekt ausführen, indem wir diese Seiten auf einem lokalen oder Remote-Server starten und testen.

Das obige ist der detaillierte Inhalt vonLogin-Sprungseite HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html location
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verlinken Sie Bilder in HTMLNächster Artikel：So verlinken Sie Bilder in HTML

In Verbindung stehende Artikel

Mehr sehen