Maison >interface Web >Voir.js >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 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.
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
ou
yarn add vue axios
Attendez la fin de l'installation et nous pourrons passer à l'étape suivante.
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模板和组件,以便在页面中显示数据。在根目录中,创建一个名为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发送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:8080
rrreee
index.html
et collez-y le code suivant : rrreee
Étape 4 : Écrivez la requête AxiosMaintenant, envoyons HTTP en utilisant Axios. Les requêtes sont adressées à interagir avec le backend. Dans le fichierapp.js
, ajoutez le code suivant : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la méthode post
d'Axios pour /api/send
Une 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!