Implementierung der Anmeldeseite des tatsächlichen Kampfprotokolls von Vue

Inhaltsverzeichnis

1. Vorbereitende Maßnahmen

1.1 Node.js installieren
1.2 Webpack installieren
1.3 vue-cli installieren

2. Erstellen Sie ein Vue-Projekt

2.1 Projekt erstellen
2.2 Projektverzeichnis
2.3 Element-Benutzeroberfläche importieren

3 Implementierung der Anmeldeseite

3.1 App.vue ändern
3.2 Login.vue erstellen
3.3 Konfigurieren von Routen

4. Login-Funktion implementieren

4.1 Axios importieren
4.2 Qs und Mock importieren
4.3 Schreiben und Senden von js
4.4 Schreiben von Mock-Testdaten

Zusammenfassen

1. Vorbereitende Maßnahmen

1.1 Node.js installieren

Offizielle Website-Download-Adresse: https://nodejs.org/zh-cn/

Nach Abschluss der Installation geben Sie node -v im Terminal ein, um die Versionsnummer abzufragen

Überprüfen Sie die npm-Version, npm -v

1.2 Webpack installieren

Terminal-Eingang

npm install --save-dev webpack

Zeigen Sie die Version webpack -v

1.3 vue-cli installieren

Da das Vue-Projekt mit dem visuellen Tool vue-cli3 und höher erstellt wird, ist hier die Version 3 und höher ausgewählt.

npm install -g @vue/cli

Upgrade von vue-cli

npm update -g @vue/cli

Deinstallieren Sie vue-cli

npm deinstallieren vue-cli -g

2. Erstellen Sie ein Vue-Projekt

Verwenden Sie nach der Installation von vue-cli das von vue bereitgestellte Visualisierungstool, um ein Vue-Projekt zu erstellen

2.1 Projekt erstellen

Geben Sie vue ui in das Terminal ein, um das Visualisierungstool aufzurufen

Wählen Sie den Pfad zum Erstellen des Projekts

Erstellen eines Projektordners

Wählen Sie standardmäßig Manuell aus und fügen Sie die Konfiguration des Projekts manuell hinzu

Klicken Sie nach Auswahl der Funktionskonfiguration auf Weiter, um direkt ein Projekt zu erstellen

Nachdem das Projekt erstellt wurde, öffnen Sie es im WebStore

2.2 Projektverzeichnis

2.3 Element-Benutzeroberfläche importieren

Sie können die Importmethode direkt auf der offiziellen ElementUI-Website sehen. Wählen Sie hier den Import aller Module aus.

Geben Sie in die Konsole ein

 npm installiere element-ui --save

Referenz in main.js

Vue von „vue“ importieren
App aus „./App.vue“ importieren
Router aus „./router“ importieren
Store aus „./store“ importieren

Vue.config.productionTip = falsch

/*ElementUI importieren*/
importiere elementUI von „element-ui“;
/*Importiere den CSS-Stil von ElementUI*/
importiere „element-ui/lib/theme-chalk/index.css“;
/*Vue verwendet ElementUI*/
Vue.use(elementUI);

neuer Vue({
  Router,
  speichern,
  rendern: h => h(App)
}).$mount('#app')

3 Implementierung der Anmeldeseite

3.1 App.vue ändern

Hier nehmen wir zunächst die globalen Einstellungen vor und löschen die bisherigen Vorlagen.

<Vorlage>
  <div id="app">
    <Router-Ansicht/>
  </div>
</Vorlage>

<Stil>
</Stil>

Globale Stile ändern

<Vorlage>
  <div id="app">
    <!--Routing-Seite-->
    <Router-Ansicht/>
  </div>
</Vorlage>

<Stil>
/*Globale Höhe der übergeordneten Klasse*/
html {
  Höhe: 100%;
}

/*Body-Attribute zurücksetzen*/
Körper {
  Polsterung: 0;
  Rand: 0;
  /*HTML erben*/
  Höhe: 100%;
}

/*#Apps Höhe muss auch übernommen werden*/
#app {
  Höhe: 100%;
}

/* Unterstreichung von globalen Linkbeschriftungen entfernen */
A {
  Textdekoration: keine;
}
</Stil>

3.2 Login.vue erstellen

Klicken Sie mit der rechten Maustaste in das Ansichtenverzeichnis, um eine Vue-Datei mit dem Namen „Login“ zu erstellen

Suchen Sie auf der offiziellen ElementUI-Website nach den Layoutkomponenten, wählen Sie Ihr eigenes Layout aus und kopieren Sie es in die Vue-Datei

<Vorlage>
  <!-- Elemente einer Zeile -->
  <el-row Typ="flex" Klasse="row-bg" rechtfertigen="Mitte">
    <!--Erste Spalte-->
    <el-col :span="6">
      <div Klasse="grid-content bg-purple"></div>
    </el-col>
    <!--Zweite Spalte-->
    <el-col :span="6">
      <div Klasse="grid-content bg-purple-light"></div>
    </el-col>
    <!--Die dritte Spalte-->
    <el-col :span="6">
      <div Klasse="grid-content bg-purple"></div>
    </el-col>
  </el-row>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Anmelden"
}
</Skript>

<Stilbereich>

</Stil>

Kopieren Sie das Formular. Hier kopieren wir das Formular mit Verifizierung. Ändern Sie nach dem Kopieren das Formular

<Vorlage>
  <div :xl="6" :lg="7" Klasse="bg-login">
    <!--logo-->
    <el-image :src="erfordern('@/assets/logo.png')" Klasse="logo"/>
    <!--Titel-->
    <el-row Typ="flex" Klasse="row-bg Zeile-zwei" Justify="Mitte" Ausrichtung="Mitte">
      <el-col:span="6"></el-col>
      <el-col :span="6">
        <!--Titel-->
        <h1 class="title">xAdmin-Verwaltungssystem</h1>
      </el-col>
      <el-col:span="6"></el-col>
    </el-row>
    <!--form-->
    <el-row Typ="flex" Klasse="row-bg Karte" Justify="Mitte" Ausrichtung="unten">
      <el-col :span="7" class="Anmeldekarte">
        <!--loginForm-->
        <el-form :model="loginForm" :rules="Regeln" ref="loginForm" label-width="21%" class="loginForm">
          <el-form-item label="Konto" prop="Benutzername" style="width: 380px">
            <el-input v-model="loginForm.Benutzername"></el-input>
          </el-form-item>
          <el-form-item label="Passwort" prop="Passwort" style="width: 380px">
            <el-input type="Passwort" v-model="loginForm.passwort"></el-input>
          </el-form-item>
          <el-form-item label="Bestätigungscode" prop="code" style="width: 380px">
            <el-input v-model="loginForm.code" class="code-input" style="width: 70%;float: left"></el-input>
            <!--Bild des Bestätigungscodes-->
            <el-Bild: src="codeImg" Klasse="codeImg"></el-Bild>
          </el-form-item>
          <el-form-item label="Passwort merken" prop="merken">
            <el-switch v-model="loginForm.remember"></el-switch>
          </el-form-item>
          <el-form-item class="btn-ground">
            <el-button type="primary" @click="submitForm('loginForm')">Jetzt anmelden</el-button>
            <el-button @click="resetForm('loginForm')">Zurücksetzen</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Login",
  Daten() {
    zurückkehren {
      // Formularinformationen loginForm: {
        //Kontodaten Benutzername: '',
        // Passwortdaten Passwort: '',
        //Bestätigungscode-Datencode: '',
        // Passwort merken remember: false,
        // Der Schlüssel des Bestätigungscodes. Da Front-End und Back-End getrennt sind, kann der Bestätigungscode vom Back-End nicht in der Sitzung gespeichert werden und wird daher an die Vue-Statusverwaltung übergeben codeToken: ''
      },
      // Formularvalidierungsregeln: {
        // Kontoüberprüfungsregeln festlegen Benutzername: [
          {erforderlich: true, Nachricht: ‚Bitte geben Sie Ihr Konto ein‘, Auslöser: ‚unscharf‘},
          {min: 3, max: 10, Nachricht: ‚Konten mit einer Länge von 3 bis 10 Zeichen‘, Auslöser: ‚unscharf‘}
        ],
        // Regeln zur Kennwortüberprüfung festlegen password: [
          {erforderlich: true, Nachricht: ‚Bitte geben Sie Ihr Passwort ein‘, Auslöser: ‚unscharf‘},
          {min: 6, max: 15, Nachricht: ‚Passwort zwischen 6 und 15 Zeichen‘, Auslöser: ‚unscharf machen‘}
        ],
        // Bestätigungscode festlegen Validierungsregeln Code: [
          {erforderlich: true, Nachricht: ‚Bitte geben Sie den Bestätigungscode ein‘, Auslöser: ‚unscharf‘},
          {min: 5, max: 5, Nachricht: ‚Länge ist 5 Zeichen‘, Auslöser: ‚Unschärfe‘}
        ]
      },
      // Bild des Bind-Bestätigungscodes codeImg: null
    };
  },
  Methoden: {
    // Formular abschicken submitForm(formName) {
      dies.$refs[formName].validate((gültig) => {
        if (gültig) {
          //Warnung zur erfolgreichen Formularvalidierung („Senden“)
        } anders {
          console.log('Fehler beim Senden!!');
          gibt false zurück;
        }
      });
    },
    // Formular zurücksetzen resetForm(formName) {
      dies.$refs[formName].resetFields();
    }
  },
}
</Skript>

<Stilbereich>
.codeImg {
  /*Lassen Sie das Bild mit dem Bestätigungscode rechts schweben*/
  schweben: rechts;
  /*Einige abgerundete Ränder festlegen*/
  Rahmenradius: 3px;
  /*Breite festlegen*/
  Breite: 26%;
}

.bg-login {
  Höhe: 100%;
  Hintergrundbild: url("../assets/backgroud.jpg");
  Hintergrundgröße: 200 %;

}

.btn-Boden {
  Textausrichtung: zentriert;
}

.logo {
  Rand: 30px;
  Höhe: 70px;
  Breite: 70px;
  Position: fest;
}

.Titel {
  Textschatten: -3px 3px 1px #5f565e;
  Textausrichtung: zentriert;
  oberer Rand: 60 %;
  Farbe: #41b9a6;
  Schriftgröße: 40px;
}

.login-card {
  Hintergrundfarbe: #ffffff;
  Deckkraft: 0,9;
  Kastenschatten: 0 0 20px #ffffff;
  Rahmenradius: 10px;
  Polsterung: 40px 40px 30px 15px;
  Breite: automatisch;
}
</Stil>

3.3 Konfigurieren von Routen

Konfigurieren Sie in index.js unter Router

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren
Home aus '../views/Home.vue' importieren
Login aus „../views/Login.vue“ importieren

Vue.use(VueRouter)

const Routen = [
  {
    Weg: '/',
    Name: "Home",
    Komponente: Startseite
  },
  //Konfiguriere das Routing der Login-Seite {
    Pfad: '/login',
    Name: 'Anmelden',
    Komponente: Login
  }
]

const router = neuer VueRouter({
  Routen
})

Standardrouter exportieren

Effektbild:

4. Login-Funktion implementieren

4.1 Axios importieren

In vue ist es nur für die Seite verantwortlich, d. h. für die Ansicht. Wenn wir uns jedoch anmelden, müssen wir dies im Hintergrund überprüfen. In vue wird die Kommunikation daher von Axios abgewickelt.

Geben Sie das Konsolenterminal ein

npm installiere axios --save

Drücken Sie die Eingabetaste, um das Modul automatisch zu importieren.

Registrieren Sie sich in main.js

/*Axios importieren*/
importiere Axios von „Axios“;
/*Globale Bindungsachsen*/
Vue.prototype.$axios = axios;

4.2 Qs und Mock importieren

qs ist ein in vue bereitgestelltes Plug-In, das uns beim Parsen von Zeichenfolgen und Serialisieren von Parametern helfen kann

Geben Sie das Konsolenterminal ein

 npm install qs --save

Drücken Sie die Eingabetaste, um das Modul automatisch zu importieren.

Registrieren Sie sich in main.js

/*qs importieren*/
importiere qs von „qs“;
/*Globale Bindung*/
Vue.prototype.$qs = qs;

Da es derzeit kein Backend-Design gibt, können wir die Datenbankdaten nicht abrufen. Daher verwenden wir Mock, um die Backend-Daten zu simulieren.

Geben Sie das Konsolenterminal ein

 npm installiere mockjs --save-dev

Drücken Sie die Eingabetaste, um das Modul automatisch zu importieren.

Erstellen Sie eine Mock-JS-Datei, erstellen Sie eine leere JS-Datei und benennen Sie sie nach Belieben

Mock in main.js importieren

/*Mock-Daten einführen*/
erfordern('./mock/LoginService.js')

4.3 Schreiben und Senden von js

Bestätigungscode erhalten:

// Erhalte den Bestätigungscode Methode getVerifyCodeImg() {
  /*Bestätigungscode erhalten*/
  dies.$axios.get('/getVerifyCode').then(res => {
    // Den Verifizierungscode-Schlüssel abrufen
    this.loginForm.codeToken = res.data.data.codeToken;
    // Holen Sie sich das Bild mit dem Bestätigungscode this.codeImg = res.data.data.codeImg;
  })
}
// Da wir den Bestätigungscode nach dem Rendern der Seite benötigen, binden wir ihn unter create created() {
  //Nachdem die Seite gerendert wurde, führen Sie die Bestätigungscodemethode this.getVerifyCodeImg() aus.
}

Formularübermittlung:

Formular absenden(Formularname) {
  dies.$refs[formName].validate((gültig) => {
    if (gültig) {
      // Formularüberprüfung erfolgreich this.$axios.post('/login', this.loginForm).then(res => {
        // Ergebnis abrufen let result = JSON.parse(res.data.data);
        let Nachricht = res.data.msg;
        //Beurteile das Ergebniswenn (Ergebnis) {
          /*Anmeldung erfolgreich*/
          Element.Message.success(Nachricht);
          /* Zur Seite springen */
          router.push('/')
        } anders {
          /*Fehlermeldung drucken*/
          Element.Message.error(Nachricht);
        }
      })
    } anders {
      console.log('Fehler beim Senden!!');
      gibt false zurück;
    }
  });
}

Komplette js

<Skript>
Element aus „element-ui“ importieren;
Router aus "@/router" importieren;

Standard exportieren {
  Name: "Login",
  Daten() {
    zurückkehren {
      // Formularinformationen loginForm: {
        //Kontodaten Benutzername: '',
        // Passwortdaten Passwort: '',
        //Bestätigungscode-Datencode: '',
        // Passwort merken remember: false,
        // Der Schlüssel des Bestätigungscodes. Da Front-End und Back-End getrennt sind, kann der Bestätigungscode vom Back-End nicht in der Sitzung gespeichert werden und wird daher an die Vue-Statusverwaltung übergeben codeToken: ''
      },
      // Formularvalidierungsregeln: {
        // Kontoüberprüfungsregeln festlegen Benutzername: [
          {erforderlich: true, Nachricht: ‚Bitte geben Sie Ihr Konto ein‘, Auslöser: ‚unscharf‘},
          {min: 3, max: 10, Nachricht: ‚Konten mit einer Länge von 3 bis 10 Zeichen‘, Auslöser: ‚unscharf‘}
        ],
        // Regeln zur Kennwortüberprüfung festlegen password: [
          {erforderlich: true, Nachricht: ‚Bitte geben Sie Ihr Passwort ein‘, Auslöser: ‚unscharf‘},
          {min: 6, max: 15, Nachricht: ‚Passwort zwischen 6 und 15 Zeichen‘, Auslöser: ‚unscharf machen‘}
        ],
        // Bestätigungscode festlegen Validierungsregeln Code: [
          {erforderlich: true, Nachricht: ‚Bitte geben Sie den Bestätigungscode ein‘, Auslöser: ‚unscharf‘},
          {min: 5, max: 5, Nachricht: ‚Länge ist 5 Zeichen‘, Auslöser: ‚Unschärfe‘}
        ]
      },
      // Bild des Bind-Bestätigungscodes codeImg: null
    };
  },
  Methoden: {
    // Formular abschicken submitForm(formName) {
      dies.$refs[formName].validate((gültig) => {
        if (gültig) {
          // Formularüberprüfung erfolgreich this.$axios.post('/login', this.loginForm).then(res => {
            // Ergebnis abrufen let result = JSON.parse(res.data.data);
            let Nachricht = res.data.msg;
            //Beurteile das Ergebniswenn (Ergebnis) {
              /*Anmeldung erfolgreich*/
              Element.Message.success(Nachricht);
              /* Zur Seite springen */
              router.push('/')
            } anders {
              /*Fehlermeldung drucken*/
              Element.Message.error(Nachricht);
            }
          })
        } anders {
          console.log('Fehler beim Senden!!');
          gibt false zurück;
        }
      });
    },
    // Formular zurücksetzen resetForm(formName) {
      dies.$refs[formName].resetFields();
    },
    // Erhalte den Bestätigungscode Methode getVerifyCodeImg() {
      /*Bestätigungscode erhalten*/
      dies.$axios.get('/getVerifyCode').then(res => {
        // Den Verifizierungscode-Schlüssel abrufen
        this.loginForm.codeToken = res.data.data.codeToken;
        // Holen Sie sich das Bild mit dem Bestätigungscode this.codeImg = res.data.data.codeImg;
      })
    }
  },
  erstellt() {
    //Nachdem die Seite gerendert wurde, führen Sie die Bestätigungscodemethode this.getVerifyCodeImg() aus.
  }
}
</Skript>

4.4 Schreiben von Mock-Testdaten

Schreiben Sie Mock-Daten in das neu erstellte LoginService.js

/*Bind Mock*/
const Mock = erfordern('mockjs');
const Random = Mock.Random;

/*Legen Sie ein allgemeines Ergebnis fest, das Daten zurückgibt*/
let Ergebnis = {
  Nachricht: '',
  Daten: ''
}

/*Informationen zur Simulationsdatenbank*/
lassen Sie den Benutzernamen = "xiaolong";
lassen Sie das Passwort auf „123456“ setzen.
lassen Sie verityCode = "abcde";

/**
 * Bestätigungscode simulieren */
Mock.mock('/getVerifyCode', 'get', () => {
  Ergebnis.Daten = {
    CodeToken: Random.string(32),
    Codebild: Random.dataImage('75x40', VerityCode)
  }
  Ergebnis zurückgeben;
})

/**
 *Login-Anfrage abfangen*/
Mock.mock('/login', 'post', (erforderlich) => {
  // Anforderungsdaten abrufen let from = JSON.parse(req.body);
  //Beurteile den Bestätigungscode, wenn (verityCode === from.code) {
    // Konto verifizieren, wenn (Benutzername === from.Benutzername) {
      // Kennwort überprüfen if (password === from.password) {
        result.msg = 'Anmeldung erfolgreich'
        Ergebnis.Daten = "wahr"
      } anders {
        result.msg = 'Falsches Passwort'
        Ergebnis.Daten = "falsch"
      }
    } anders {
      result.msg = 'Benutzer existiert nicht'
      Ergebnis.Daten = "falsch"
    }
  } anders {
    result.msg = 'Fehler beim Bestätigungscode'
    Ergebnis.Daten = "falsch"
  }
  Ergebnis zurückgeben;
})

Zusammenfassen

Dies ist das Ende dieses Artikels über die Implementierung der Anmeldeseite des praktischen Vue-Datensatzes. Weitere relevante Inhalte zur Vue-Anmeldeseite 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!

Das könnte Sie auch interessieren: