Comment implémenter la fonction de connexion dans vue

Vue est un framework JavaScript open source largement utilisé dans le développement front-end. Avec la popularité d'Internet et l'augmentation du nombre de fonctionnalités des sites Web, les besoins des utilisateurs sont de plus en plus élevés. La fonction de connexion au site Web est devenue une fonction essentielle de chaque site Web. Cet article présentera les étapes et méthodes pour implémenter la fonction de connexion dans Vue.

1. Pré-connaissances

Points de connaissances à utiliser dans cet article :

Utilisez Vue-cli3 pour construire le projet

Vue-router, utilisé pour la gestion du routage des pages

Vuex, utilisé pour la gestion des statuts

Axios, utilisez les données de requête asynchrone dans la page

2. Initialisation du projet

1 Installer Vue-cli3

Vue-cli3 est l'outil d'échafaudage officiel de Vue.js, qui peut nous aider à initialiser rapidement un projet Vue. Entrez la commande suivante dans la fenêtre de ligne de commande :

npm install -g @vue/cli

2. Créez un projet

Entrez la commande suivante dans la fenêtre de ligne de commande :

vue create login

où login est le nom du projet, modifiez-le si nécessaire. Il vous sera ensuite demandé de sélectionner certains éléments de configuration, tels que les plug-ins requis pour le projet, les configurations prédéfinies, etc., qui ne seront pas expliqués ici.

3. Démarrez le projet

Entrez la commande suivante dans la fenêtre de ligne de commande :

cd login
npm run serve

4. Créez des routes et des pages

Dans le répertoire src, créez un nouveau répertoire de routeur, puis créez le fichier index.js dans le répertoire du routeur. Écrivez les règles de configuration et de routage de l'instance VueRouter dans le fichier index.js et exportez l'instance de routage.

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

Le code ci-dessus définit un composant Vue de la page de connexion et le chemin est /login. Ensuite, nous devons créer un nouveau fichier Login.vue dans le répertoire src/views. Ce fichier est le composant réel de la page de connexion.

<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. Implémentez la fonction de connexion

Dans la page de connexion Login.vue, nous devons lier l'événement de soumission du formulaire, obtenir le nom d'utilisateur et le mot de passe saisis par l'utilisateur, puis envoyer une requête Ajax en arrière-plan. pour terminer le processus de connexion. Axios est une puissante bibliothèque client HTTP JavaScript que nous pouvons utiliser pour envoyer des requêtes Ajax.

1. Installez Axios

Entrez la commande suivante dans la fenêtre de ligne de commande :

npm install axios

2. Écrivez la logique de connexion

Ajoutez le code suivant dans la méthode de soumission du fichier Login.vue :

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

Parmi eux, nous envoyer une demande de publication à l'interface /api/login. L'adresse ici doit être modifiée en fonction de la situation réelle. Les données envoyées en arrière-plan sont le nom d'utilisateur et le mot de passe saisis par l'utilisateur dans la zone de saisie, puis la logique du succès et de l'échec de la connexion est traitée. Parmi eux, si la connexion réussit, nous pouvons enregistrer les informations utilisateur dans Vuex pour la gestion de l'état.

3. Utilisez Vuex pour la gestion de l'état

Dans le répertoire src, créez un nouveau répertoire de magasin et créez un fichier index.js dans le répertoire du magasin pour la configuration de la fonction Vuex.

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

Parmi eux, la valeur initiale de user est définie sur null. La méthode de mutations setUser est utilisée pour modifier l'état de l'utilisateur. La méthode d'actions setUser est utilisée pour soumettre la méthode setUser dans les mutations.

Dans la méthode submit dans Login.vue, lorsque la connexion est réussie, nous devons appeler la méthode setUser dans les actions pour enregistrer les informations utilisateur dans Vuex.

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. Résumé

Jusqu'à présent, nous avons terminé le développement de la fonction de connexion de Vue. Utiliser Vue pour développer des pages peut rendre l'ensemble du code plus élégant et plus facile à maintenir. De plus, l'utilisation de Vuex pour la gestion des états peut rendre les données plus pratiques à utiliser et à gérer par composants, et le code sera plus lisible et maintenable. Étant donné que cette fonction est relativement simple, le traitement lié au back-end est omis et les lecteurs peuvent mettre en œuvre eux-mêmes le processus de connexion back-end et d'interaction front-end et back-end.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!