Implementierung der Vue-Anmeldefunktion

Vorne geschrieben

Die Vue-Datei muss am Ende eine Leerzeile haben, sonst wird ein Fehler gemeldet, was wirklich seltsam ist ...

Anmeldeübersicht

Login-Geschäftsprozess

1. Geben Sie Ihren Benutzernamen und Ihr Passwort auf der Anmeldeseite ein

2. Rufen Sie zur Überprüfung die Backend-Schnittstelle auf

3. Springen Sie nach der Überprüfung entsprechend dem Antwortstatus des Hintergrunds zur Projekthomepage

Zugehörige technische Punkte des Login-Dienstes

HTTP ist zustandslos. Es zeichnet den Status auf der Clientseite durch Cookies auf, zeichnet den Status auf der Serverseite durch Sitzungen auf und behält den Status durch Token bei.

Hier bitte Klarheit schaffen!

Analyse des Login-Token-Prinzips

1. Geben Sie Ihren Benutzernamen und Ihr Passwort auf der Anmeldeseite ein, um sich anzumelden

2. Nachdem der Server den Benutzer verifiziert hat, generiert er ein Token und gibt es zurück

3. Der Client speichert das Token

4. Alle nachfolgenden Anfragen werden dieses Token enthalten, um die Anfrage zu senden

5. Der Server überprüft, ob das Token weitergegeben wurde

Implementierung der Login-Funktion

Layout der Anmeldeseite

Implementierung des Layouts durch Element-UI-Komponenten

• el-Form
• el-form-item
• el-Eingang
• el-Taste
• Schriftsymbole
  

Öffnen Sie das Terminal in vscode ctrl+~

git status Den aktuellen Git-Status anzeigen
git checkout -b login erstellt einen neuen Zweig namens login
git branch Zweig wechseln

Starten Sie in Vue-UI!

Der Terminalbefehl npm run serve funktioniert auch!

Erstellen Sie eine Vue-Datei unter der Komponentendatei

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren
Login aus „./components/login.vue“ importieren
Vue.use(VueRouter)

const Routen = [
      {Pfad:'/login',Komponente:login}
]

const router = neuer VueRouter({
  Routen
})

Standardrouter exportieren

Routing konfigurieren (und Routing-Umleitungen hinzufügen)

const router = neuer VueRouter({
  Routen: [
    {
      Weg: '/',
      Umleitung: '/login'
    },
    {
      Pfad: '/login',
      Komponente: Login
    }
  ]
})

Achte unbedingt auf die Leerzeichen, sonst gibt es eine Fehlermeldung, Mist!

Seiten schreiben

Geben Sie zunächst ein globales Stylesheet an

/* Globales Stylesheet */
html,
Körper,
#app{
    Höhe: 100%;
    Rand: 0;
    Polsterung: 0;
}

Und importieren Sie es in main.js

importiere './assets/css/global.css'

Vollständiges Login-Box-Center

Hinweis: Mit der Verschiebungsfunktion kann der Cursor bewegt werden, um eine echte Zentrierung zu erreichen.

.login_box{
    Breite: 450px;
    Höhe: 300px;
    Hintergrundfarbe: #fff;
    Position: absolut;
    links: 50%;
    oben: 50 %;
    transformieren: übersetzen(-50 %,-50 %);
}

Fügen Sie ein Anmeldesymbol hinzu

   .avatar_box{
        Höhe: 130px;
        Breite: 130px;
        Rand: 1px durchgezogen #eee;
        Randradius: 50 %;
        Polsterung: 10px;
        Kastenschatten: 0px 0px 10px #ddd;
        Position: absolut;
        links: 50%;
        transformieren: übersetzen(-50 %,-50 %);
        Hintergrundfarbe: #fff;
        img{
            Breite: 100 %;
            Höhe: 100%;
            Randradius: 50 %;
            Hintergrundfarbe: #eee;
        }
    }

Layout des Anmeldeformulars

Implementierung des Layouts durch Element-UI-Komponenten

• el-form
• el-form-item
• el-Eingang
• el-Taste
• Schriftsymbole

Auf der Webseite der Elements-Komponentenbibliothek finden Sie einige grundlegende Vorlagencodes, die auf der Website verwendet werden können

Komponenten importieren

Vue von „vue“ importieren
importiere { Button, Form, FormItem, Input } von 'element-ui'//Separate Importe führen zu einem Fehler Vue.use(Button)
Vue.use(Formular)
Vue.use(FormItem)
Vue.use(Eingabe)

Das mittlere Formular und der Button sind direkt in der oben stehenden Komponentenbibliothek zu finden.

Ich werde einen Teil des Codes in der Mitte nicht veröffentlichen, da er ziemlich langweilig ist.

Insbesondere werden unsere kleinen Symbole aus der Symbolbibliothek von Alibaba heruntergeladen

Informationen zur spezifischen Verwendung finden Sie in einem Blog, den ich zuvor geschrieben habe: Alibaba Icon Icons stehen unter Ihrer Kontrolle (wie Sie eine Symbolbibliothek im Frontend einführen, schöne Symbole stehen Ihnen zur Verfügung TT)

Datenbindung für Login-Formular

1.:model="loginForm" bindet ein Formular

2. Verwenden Sie das V-Modell, um Datenobjekte in Formularelementen bidirektional zu binden

3. Im Exportstandard gibt data() Formulardaten zurück

Validierungsregeln für das Login-Formular

1.: rules="ruleForm" bindet eine Regel

2. Verwenden Sie im Formularelement das Prop-Attribut, um den Feldnamen festzulegen, der überprüft werden muss

      // Dies ist das Formularvalidierungsregelobjekt loginFormRules: {
        // Überprüfen Sie, ob der Benutzername ein gültiger Benutzername ist: [
          { erforderlich: true, Nachricht: 'Bitte geben Sie Ihren Anmeldenamen ein', Auslöser: 'unscharf' },
          { min: 3, max: 10, Nachricht: ‚Länge liegt zwischen 3 und 10 Zeichen‘, Auslöser: ‚unscharf‘ }
        ],
        // Überprüfen Sie, ob das Kennwort gültig ist. Kennwort: [
          { erforderlich: true, Nachricht: ‚Bitte geben Sie Ihr Anmeldekennwort ein‘, Auslöser: ‚unscharf‘ },
          { min: 6, max: 15, Nachricht: ‚Länge liegt zwischen 6 und 15 Zeichen‘, Auslöser: ‚Unschärfe‘ }
        ]

      }

Zurücksetzen des Anmeldeformulars

1. Fügen Sie einen Ref-Referenznamen in el-form hinzu, um das Formular zu erhalten

2. Fügen Sie eine Methode in die Methode ein und verwenden Sie this.$refs.loginFormRef.resetFields() um das Formular zurückzusetzen. Beachten Sie, dass der Wert des Formulars der in data festgelegte Anfangswert wird.

Login-Vorauthentifizierung

1. Das gleiche this.$refs.loginFormRef.validate()

2. Axios konfigurieren

Axios von „Axios“ importieren
// Konfigurieren Sie den Stammpfad der Anfrage axios.defaults.baseURL = 'https://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http = axios

3. Holen Sie sich die Abfrageergebnisse wie folgt: Verwenden Sie async und await, um die zurückgegebenen Ergebnisse zu erhalten

      dies.$refs.loginFormRef.validate(async valid => {
        wenn (!gültig) zurückgeben
        const { data: res } = warte auf dies.$http.post('login', this.loginForm)
        Konsole.log(res)
        if (res.meta.status !== 200) return console.log('Anmeldung fehlgeschlagen')
        console.log('Anmeldung erfolgreich')
      })

Popup-Eingabeaufforderung zur Konfiguration der Anmeldekomponente

1. Fügen Sie die Nachricht in element.js ein und mounten Sie sie auf vue

Vue.prototype.$message = Nachricht // Auf Vue gemountet

2. Rufen Sie dies direkt auf. $message.error('Anmeldung fehlgeschlagen!')

Verhalten nach erfolgreichem Login

1. Speichern Sie das Token nach dem Login im SessionStorage des Clients

1. Auf andere API-Schnittstellen im Projekt muss außer der Anmeldung nach der Anmeldung zugegriffen werden

2. Das Token sollte nur gültig sein, während die aktuelle Website geöffnet ist. Speichern Sie das Token daher im SessionStorage

Der Token wird gespeichert in Sitzungsspeicherung

2. Springen Sie über die programmgesteuerte Navigation zur Backend-Homepage. Die Routing-Adresse lautet /home

        window.sessionStorage.setItem('token', 'res.data.token')//Token speichern Dies ist ein fester Wert, der zufällig gespeichert wird this.$router.push('/home') //Zur nächsten Seite springen

Dies ist das Ende dieses Artikels über die Implementierung der Vue-Anmeldefunktion. Weitere relevante Vue-Anmeldeinhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!