Essentiel pour les débutants : Comment utiliser Vue et Axios pour créer des projets interactifs front-end et back-end

Indispensable pour les débutants : Comment utiliser Vue et Axios pour créer un projet interactif front-end et back-end

Introduction :
Dans le développement Web moderne, l'architecture de séparation front-end et back-end est devenue courante. Afin de réaliser une interaction front-end et back-end, nous devons utiliser certains outils pour envoyer et traiter les requêtes HTTP. Vue.js est un framework front-end populaire et Axios est une bibliothèque HTTP basée sur Promise. Leur combinaison nous permet de réaliser facilement une interaction front-end et back-end. Cet article présentera aux débutants comment utiliser Vue et Axios pour créer des projets interactifs front-end et back-end.

Étape 1 : Créer un projet Vue
Tout d'abord, nous devons installer Vue CLI (outil d'échafaudage) pour créer un nouveau projet Vue. Ouvrez un terminal et exécutez la commande suivante :

npm install -g @vue/cli

Une fois l'installation terminée, créez un nouveau projet Vue à l'aide de la commande suivante :

vue create my-project

Ensuite, allez dans le répertoire du projet et démarrez le serveur de développement :

cd my-project
npm run serve

Ouvrez http : // dans votre navigateur /localhost:8080, vous devriez pouvoir voir une page Vue par défaut.

Étape 2 : Installer et configurer Axios
Pour utiliser Axios dans un projet Vue, nous devons d'abord installer Axios. Exécutez la commande suivante dans le terminal :

npm install axios

Une fois l'installation terminée, importez Axios dans le fichier main.js :

import axios from 'axios'

Maintenant, nous devons configurer une URL de requête globale de base pour Axios. Après l'instruction d'importation dans le fichier main.js, ajoutez le code suivant :

axios.defaults.baseURL = 'http://localhost:3000/api'

De cette façon, nous spécifions une URL de requête par défaut pour Axios, que vous pouvez modifier en conséquence en fonction de l'adresse de votre service backend.

Étape 3 : Utilisez Axios pour envoyer des requêtes
Nous avons terminé la configuration du projet Vue et d'Axios, et nous pouvons maintenant commencer à utiliser Axios pour envoyer des requêtes. Voici un exemple :

methods: {
  fetchData() {
    axios.get('/data')
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.error(error)
      })
  }
}

Dans cet exemple, nous envoyons une requête GET en utilisant Axios dans une méthode de l'instance Vue. La méthode get d'Axios renvoie une promesse. Nous utilisons la méthode then pour gérer le rappel d'une requête réussie, et la méthode catch pour gérer. le rappel d'une requête ayant échoué. En accédant à response.data, nous pouvons obtenir les données renvoyées par le serveur. get 方法返回一个 Promise，我们使用 then 方法来处理请求成功的回调，并使用 catch 方法来处理请求失败的回调。通过访问 response.data，我们可以获取到服务器返回的数据。

步骤四：处理请求参数
在实际开发中，我们可能需要向后端传递一些请求参数。以下是一个带有查询参数的 GET 请求示例：

methods: {
  search(query) {
    axios.get('/search', { params: { q: query } })
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.error(error)
      })
  }
}

在这个示例中，我们向后端传递了一个名为 q 的查询参数。在 Axios 的 get 方法的第二个参数中，我们使用了一个包含查询参数的对象 { params: { q: query } }

Étape 4 : Traiter les paramètres de la demande

Dans le développement réel, nous devrons peut-être transmettre certains paramètres de la demande au backend. Voici un exemple de requête GET avec des paramètres de requête :

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false

axios.defaults.baseURL = 'http://localhost:3000/api'

new Vue({
  render: h => h(App),
}).$mount('#app')

Dans cet exemple, nous transmettons un paramètre de requête nommé q au backend. Dans le deuxième paramètre de la méthode get d'Axios, nous utilisons un objet { params: { q: query } > qui contient les paramètres de requête.

Résumé :

Grâce à l'introduction de cet article, nous avons appris à utiliser Vue et Axios pour créer des projets d'interaction front-end et back-end. Tout d'abord, nous avons créé un projet Vue et installé Axios. Ensuite, nous avons configuré l'URL de requête globale d'Axios dans le fichier main.js. Enfin, nous avons envoyé une requête GET à l'aide d'Axios et avons appris à gérer les paramètres de la requête.

Ceci n'est qu'une petite partie des fonctionnalités de Vue et Axios, vous pouvez continuer à apprendre et explorer d'autres utilisations. J'espère que cet article pourra fournir de l'aide et des conseils aux débutants et vous aider à construire avec succès un projet d'interaction front-end et back-end.

Voir l'annexe pour des exemples de code.

Annexe : 🎜main.js🎜

<template>
  <div id="app">
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    fetchData() {
      axios.get('/data')
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

🎜App.vue🎜rrreee

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!