Beispiel für die Implementierung eines Login-Effekts mit Vue-ElementUIs aus einem Formular

1. Erstellen Sie grundlegende Stile mit ElementUI

Wenn Sie ElementUI nicht kennen, besuchen Sie bitte die offizielle Website https://element.eleme.cn/#/zh-CN, um ein grundlegendes Verständnis von ElementUI zu erhalten.

1.1 Verwendung von ElementUI Installieren Sie ElementUI zunächst im Projekt über den Befehl npm i element-ui S

1.2 Dann finden Sie das Formular auf der offiziellen Website und dann können Sie das grundlegende Layout vornehmen

Hier ist das Framework, das ich geschrieben habe

<el-form
      Beschriftungsposition = "oben"
      Beschriftungsbreite = "100px" Klasse = "Demo-Regelform"
      :Regeln='Regeln'
      :Modell='RegelnForm'
      Statussymbol
      ref='Regelform'
    >
        <el-form-item label="Benutzername" prop="Name">
            <el-input Typ="Text" v-Modell="RegelnForm.name"></el-input>
        </el-form-item>
 
        <el-form-item label="Passwort" prop="Passwort">
            <el-input type="Passwort" v-model="rulesForm.passwort"></el-input>
        </el-form-item>
 
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">Senden</el-button>
            <el-button>Zurücksetzen</el-button>
        </el-form-item>
    </el-form>

Die Auswirkungen dieser Codes

Hier werden einige ElementUI-Eigenschaften verwendet, daher werde ich sie hier nicht erklären. Sie sind alle auf der offiziellen Website. Ich werde also einige Screenshots einfügen, damit Sie diese Eigenschaften überprüfen können.

Anschließend werden die Regeln und das Modell zusammen verwendet, um einige Eingabefelder zum Eingeben von Regeln zu erstellen.

Binden Sie dann diese beiden Regeln an das Konto- und Kennwortfeld

ElementUI-Layout ist nur wenige Klicks entfernt

2. Klicken Sie auf die Schaltfläche Senden, um den Inhalt des Konto- und Kennwortfelds an die Hintergrunddaten zu übergeben

Wir können die Attribute im Tag besser über ref abrufen.

Das Folgende ist die Methode, um den Inhalt des Eingabefelds an den Hintergrund zu übergeben

Methoden: {
    Formular absenden(VonName){
      dies.$refs[fromName].validate((gültig)=>{
          wenn(gültig){
            //Wenn die Prüfung erfolgreich ist, senden Sie den Benutzernamen und das Passwort an den Backend-Login({
              Name:dieses.RegelnFormular.Name,
              Passwort:this.rulesForm.password
            }).dann((Daten)=>{
              wenn(data.code==0){
                localStorage.setItem('Token',Daten.Daten.Token)
                Fenster.Standort.href='/'
              }
              wenn(Datencode==1){
                dies.$Nachricht.Fehler(Daten.Nachricht)
              }
            })
          }anders{
            console.log('Fehler beim Senden!!')
            return false
          }
      })
    }
  }

Eine davon ist login, eine Methode, die durch die Kapselung einer Schnittstelle des Backends erhalten wird

Diese Methode ist an die Schaltfläche „Senden“ gebunden

Anschließend geben wir das bestehende Kontopasswort ein und klicken auf die Schaltfläche „Senden“, um uns anzumelden.

Dann rendern wir einige Anmeldeinformationen

Zusammenfassen

Es gibt zwei Schritte, um einen Anmeldeeffekt zu erzielen: Verwenden Sie zuerst ElementUI, um den entsprechenden Stil zu erstellen --- "Klicken Sie auf die Schaltfläche "Senden", um den Inhalt im Konto- und Kennwortfeld an die Hintergrunddaten zu übergeben

Dies ist das Ende dieses Artikels über das Beispiel der Verwendung von Vue ElementUIs aus Formularen, um Anmeldeeffekte zu erzielen. Weitere relevante Vue Element-Anmeldeinhalte aus Formularen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!