Maison > Article > interface Web > Apprenez Vue et Axios à partir de zéro pour réaliser la transmission de données front-end et back-end

Apprenez Vue et Axios à partir de zéro pour réaliser la transmission de données front-end et back-end

王林original: 2023-07-17 13:22:392889parcourir

Apprenez Vue et Axios à partir de zéro pour implémenter la transmission de données front-end et back-end

Vue.js est un framework JavaScript populaire qui nous permet de créer des interfaces Web interactives. Axios est un client HTTP puissant qui peut facilement communiquer avec les API backend. Cet article expliquera comment apprendre Vue et Axios à partir de zéro et montrera comment les utiliser pour implémenter la transmission de données front-end et back-end.

Étape 1 : Installer Vue et Axios

Tout d'abord, nous devons installer Vue et Axios. Ils peuvent être installés à l'aide de npm (Node package manager) ou de Yarn. Ouvrez une fenêtre de ligne de commande et exécutez la commande suivante dans le répertoire racine du projet :

npm install vue axios

yarn add vue axios

Attendez la fin de l'installation et nous pourrons passer à l'étape suivante.

Étape 2 : Créer une instance Vue

Ensuite, nous devons créer une instance Vue. Dans le répertoire racine du projet, créez un fichier appelé app.js et écrivez-y le code suivant : app.js的文件，并在其中编写以下代码：

import Vue from 'vue';

new Vue({
  el: '#app',
  data: {
    message: ''
  }
});

第三步：创建Vue模板和组件

现在，我们需要创建Vue模板和组件，以便在页面中显示数据。在根目录中，创建一个名为index.html的文件，并将以下代码粘贴到其中：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue and Axios Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input v-model="message" placeholder="Enter a message">
    <button @click="sendMessage">Send</button>
    <p>{{ message }}</p>
  </div>

  <script src="app.js"></script>
</body>
</html>

第四步：编写Axios请求

现在，让我们使用Axios发送HTTP请求来与后端进行数据交互。在app.js文件中，添加以下代码：

import axios from 'axios';

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    sendMessage: function() {
      axios.post('/api/send', {
        message: this.message
      })
      .then(function (response) {
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      });
    }
  }
});

在上述代码中，我们使用Axios的post方法向/api/send发送了一个POST请求，并传递了一个包含消息的对象。请确保在后端中设置了与之对应的API路由。

第五步：启动开发服务器

现在，我们需要在本地启动一个开发服务器，以便在浏览器中查看我们的应用程序。可以使用vue-cli快速创建一个Vue项目，并使用其内置的开发服务器。

如果还没有安装vue-cli，可以使用以下命令进行安装：

npm install -g @vue/cli

安装完成后，在项目的根目录中运行以下命令以启动开发服务器：

vue serve index.html

第六步：测试应用程序

现在，我们可以在浏览器中访问localhost:8080rrreee

Troisième étape : créer des modèles et des composants Vue

Maintenant, nous devons créer Vue modèles et composants pour afficher les données dans les pages. Dans le répertoire racine, créez un fichier appelé index.html et collez-y le code suivant :

rrreee

Étape 4 : Écrivez la requête Axios

Maintenant, envoyons HTTP en utilisant Axios. Les requêtes sont adressées à interagir avec le backend. Dans le fichier app.js, ajoutez le code suivant : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la méthode post d'Axios pour /api/sendUne requête POST a été envoyée, transmettant un objet contenant le message. Veuillez vous assurer que la route API correspondante est configurée dans le backend. 🎜🎜Cinquième étape : démarrer le serveur de développement🎜🎜Maintenant, nous devons démarrer un serveur de développement localement afin de visualiser notre application dans le navigateur. Vous pouvez utiliser vue-cli pour créer rapidement un projet Vue et utiliser son serveur de développement intégré. 🎜🎜Si vous n'avez pas installé vue-cli, vous pouvez utiliser la commande suivante pour l'installer : 🎜rrreee🎜Une fois l'installation terminée, exécutez la commande suivante dans le répertoire racine du projet pour démarrer le serveur de développement : 🎜rrreee🎜Sixième étape : tester l'application 🎜🎜Maintenant, nous pouvons tester notre application en visitant localhost:8080 dans le navigateur. Lorsque nous saisissons du texte dans la zone de saisie et cliquons sur le bouton "Envoyer", le texte est envoyé au backend via Axios et la réponse est affichée dans la console. 🎜🎜Résumé🎜🎜En apprenant Vue et Axios, nous pouvons facilement mettre en œuvre la transmission de données front-end et back-end. Dans cet article, nous avons d'abord installé Vue et Axios et créé une instance Vue. Nous avons ensuite écrit un fichier HTML contenant le modèle et les composants Vue et envoyé la requête HTTP à l'aide d'Axios. Enfin, nous avons démarré le serveur de développement et testé notre application dans le navigateur. 🎜🎜J'espère que l'exemple de code de cet article pourra vous aider à démarrer rapidement et à utiliser Vue et Axios pour implémenter la transmission de données front-end et back-end. Je vous souhaite du succès ! 🎜

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Partage de technologie Vue : Comment utiliser l'API NetEase Cloud pour implémenter la fonction de recherche globale de MV PlayerArticle suivant：Partage de technologie Vue : Comment utiliser l'API NetEase Cloud pour implémenter la fonction de recherche globale de MV Player

Articles Liés

Voir plus