So implementieren Sie die Anmeldefunktion in Vue

Vue ist ein Open-Source-JavaScript-Framework, das häufig in der Front-End-Entwicklung verwendet wird. Mit der Popularität des Internets und immer mehr Website-Funktionen werden die Anforderungen der Benutzer immer höher. Die Website-Anmeldefunktion ist zu einer wesentlichen Funktion jeder Website geworden. In diesem Artikel werden die Schritte und Methoden zum Implementieren der Anmeldefunktion in Vue vorgestellt.

1. Vorkenntnisse

Wissenspunkte, die in diesem Artikel verwendet werden müssen:

Verwenden Sie Vue-cli3, um das Projekt zu erstellen

Vue-Router, verwendet für die Seitenrouting-Verwaltung

Vuex, verwendet für die Statusverwaltung

Axios, verwenden Sie asynchrone Anforderungsdaten auf der Seite

2. Projektinitialisierung

1. Installieren Sie Vue-cli3

Vue-cli3 ist das offizielle Gerüsttool von Vue.js, das uns helfen kann, ein Vue-Projekt schnell zu initialisieren. Geben Sie den folgenden Befehl in das Befehlszeilenfenster ein:

npm install -g @vue/cli

2. Erstellen Sie ein Projekt

Geben Sie den folgenden Befehl in das Befehlszeilenfenster ein:

vue create login

wobei login der Projektname ist, ändern Sie ihn nach Bedarf. Anschließend werden Sie aufgefordert, einige Konfigurationselemente auszuwählen, z. B. für das Projekt erforderliche Plug-Ins, voreingestellte Konfigurationen usw., die hier nicht erläutert werden.

3. Starten Sie das Projekt

Geben Sie den folgenden Befehl in das Befehlszeilenfenster ein:

cd login
npm run serve

4. Erstellen Sie Routen und Seiten. Erstellen Sie im src-Verzeichnis ein neues Router-Verzeichnis und erstellen Sie dann die Datei index.js Das Router-Verzeichnis. Schreiben Sie die Konfigurations- und Routing-Regeln der VueRouter-Instanz in die Datei index.js und exportieren Sie die Routing-Instanz.

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Login from '@/views/Login.vue'

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

Der obige Code definiert eine Vue-Komponente der Anmeldeseite und der Pfad ist /login. Dann müssen wir eine neue Login.vue-Datei im Verzeichnis src/views erstellen. Diese Datei ist der eigentliche Bestandteil der Anmeldeseite.

<template>
  <div>
    <form>
      <h2>Login Form</h2>
      <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" v-model="email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" v-model="password">
      </div>
      <button type="submit" class="btn btn-default" @click.prevent="submit">Submit</button>
    </form>
  </div>
</template>

<script>

export default {
  data () {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    submit () {
      // 处理表单提交
    }
  }
}

</script>

3. Implementieren Sie die Anmeldefunktion

Auf der Anmeldeseite Login.vue müssen wir das Übermittlungsereignis des Formulars binden, den vom Benutzer eingegebenen Benutzernamen und das Kennwort abrufen und dann eine Ajax-Anfrage an den Hintergrund senden um den Anmeldevorgang abzuschließen. Axios ist eine leistungsstarke JavaScript-HTTP-Clientbibliothek, die wir zum Senden von Ajax-Anfragen verwenden können.

1. Installieren Sie Axios

Geben Sie den folgenden Befehl in das Befehlszeilenfenster ein:

npm install axios

2. Schreiben Sie die Anmeldelogik

Fügen Sie den folgenden Code in die Submit-Methode in der Datei Login.vue ein:

submit () {
  axios.post('/api/login', {
    email: this.email,
    password: this.password
  })
  .then(response => {
    console.log(response.data)
    // 处理登录成功逻辑
  })
  .catch(error => {
    console.log(error)
    // 处理登录失败逻辑
  })
}

Darunter sind wir Senden Sie eine Post-Anfrage an die /api/login-Schnittstelle. Die Adresse hier muss entsprechend der tatsächlichen Situation geändert werden. Bei den an den Hintergrund gesendeten Daten handelt es sich um den vom Benutzer in das Eingabefeld eingegebenen Benutzernamen und das Kennwort. Anschließend wird die Logik für erfolgreichen und fehlgeschlagenen Anmeldevorgang verarbeitet. Wenn die Anmeldung erfolgreich ist, können wir unter anderem die Benutzerinformationen zur Statusverwaltung in Vuex speichern.

3. Verwenden Sie Vuex für die Statusverwaltung

Erstellen Sie im src-Verzeichnis ein neues Store-Verzeichnis und erstellen Sie im Store-Verzeichnis eine index.js-Datei für die Vuex-Funktionskonfiguration.

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {
  user: null
}

const mutations = {
  setUser (state, user) {
    state.user = user
  }
}

const actions = {
  setUser ({ commit }, user) {
    commit('setUser', user)
  }
}

const store = new Vuex.Store({
  state,
  mutations,
  actions
})

export default store

Unter diesen ist der Anfangswert von user auf null gesetzt. Die setUser-Mutationsmethode wird verwendet, um den Benutzerstatus zu ändern. Die setUser-Aktionsmethode wird verwendet, um die setUser-Methode in Mutationen einzureichen.

In der Submit-Methode in Login.vue müssen wir bei erfolgreicher Anmeldung die setUser-Methode in Aktionen aufrufen, um die Benutzerinformationen in Vuex zu speichern.

submit () {
  axios.post('/api/login', {
    email: this.email,
    password: this.password
  })
  .then(response => {
    console.log(response.data)
    const user = response.data.user
    if (user) {
      this.$store.dispatch('setUser', user)
      this.$router.push('/')
    }
  })
  .catch(error => {
    console.log(error)
  })
}

4. Zusammenfassung

Bisher haben wir die Entwicklung der Anmeldefunktion von Vue abgeschlossen. Durch die Verwendung von Vue zum Entwickeln von Seiten kann der gesamte Code eleganter und einfacher zu warten sein. Darüber hinaus kann die Verwendung von Vuex für die Zustandsverwaltung die Verwendung und Verwaltung von Daten durch Komponenten komfortabler machen und den Code besser lesbar und wartbar machen. Da diese Funktion relativ einfach ist, entfällt die Back-End-bezogene Verarbeitung, und der Leser kann den Prozess der Back-End-Anmeldung sowie der Front-End- und Back-End-Interaktion selbst implementieren.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Anmeldefunktion in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!