Heim > Artikel > Web-Frontend > Lernen Sie Vue und Axios von Grund auf, um die Front-End- und Back-End-Datenübertragung zu realisieren

Lernen Sie Vue und Axios von Grund auf, um die Front-End- und Back-End-Datenübertragung zu realisieren

王林Original: 2023-07-17 13:22:392882Durchsuche

Lernen Sie Vue und Axios von Grund auf, um die Front-End- und Back-End-Datenübertragung zu implementieren

Vue.js ist ein beliebtes JavaScript-Framework, mit dem wir interaktive Webschnittstellen erstellen können. Axios ist ein leistungsstarker HTTP-Client, der problemlos mit Backend-APIs kommunizieren kann. In diesem Artikel erfahren Sie, wie Sie Vue und Axios von Grund auf erlernen und wie Sie sie zur Implementierung der Front-End- und Back-End-Datenübertragung verwenden.

Schritt 1: Vue und Axios installieren

Zuerst müssen wir Vue und Axios installieren. Sie können mit npm (Node Package Manager) oder Yarn installiert werden. Öffnen Sie ein Befehlszeilenfenster und führen Sie den folgenden Befehl im Stammverzeichnis des Projekts aus:

npm install vue axios

oder

yarn add vue axios

Warten Sie, bis die Installation abgeschlossen ist, und wir können mit dem nächsten Schritt fortfahren.

Schritt 2: Erstellen Sie eine Vue-Instanz

Als nächstes müssen wir eine Vue-Instanz erstellen. Erstellen Sie im Stammverzeichnis des Projekts eine Datei mit dem Namen app.js und schreiben Sie den folgenden Code hinein: 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

Schritt drei: Vue-Vorlagen und -Komponenten erstellen

Jetzt müssen wir Vue erstellen Vorlagen und Komponenten zum Anzeigen von Daten auf Seiten. Erstellen Sie im Stammverzeichnis eine Datei mit dem Namen index.html und fügen Sie den folgenden Code hinein:

rrreee

Schritt 4: Schreiben Sie die Axios-Anfrage

Jetzt senden wir HTTP mit Axios. Anfragen werden an gestellt mit dem Backend interagieren. Fügen Sie in der Datei app.js den folgenden Code hinzu: 🎜rrreee🎜Im obigen Code verwenden wir die post-Methode von Axios für /api/sendEs wurde eine POST-Anfrage gesendet, die ein Objekt mit der Nachricht übergab. Bitte stellen Sie sicher, dass die entsprechende API-Route im Backend eingerichtet ist. 🎜🎜Schritt fünf: Entwicklungsserver starten🎜🎜Jetzt müssen wir lokal einen Entwicklungsserver starten, um unsere Anwendung im Browser anzuzeigen. Sie können vue-cli verwenden, um schnell ein Vue-Projekt zu erstellen und den integrierten Entwicklungsserver zu verwenden. 🎜🎜Wenn Sie vue-cli nicht installiert haben, können Sie es mit dem folgenden Befehl installieren: 🎜rrreee🎜Führen Sie nach Abschluss der Installation den folgenden Befehl im Stammverzeichnis des zu startenden Projekts aus der Entwicklungsserver: 🎜rrreee🎜Sechster Schritt: Testen Sie die Anwendung 🎜🎜Jetzt können wir unsere Anwendung testen, indem wir localhost:8080 im Browser aufrufen. Wenn wir einen Text in das Eingabefeld eingeben und auf die Schaltfläche „Senden“ klicken, wird der Text über Axios an das Backend gesendet und die Antwort in der Konsole angezeigt. 🎜🎜Zusammenfassung🎜🎜Durch das Erlernen von Vue und Axios können wir die Front-End- und Back-End-Datenübertragung problemlos implementieren. In diesem Artikel haben wir zunächst Vue und Axios installiert und eine Vue-Instanz erstellt. Anschließend haben wir eine HTML-Datei geschrieben, die die Vue-Vorlage und -Komponenten enthält, und die HTTP-Anfrage mithilfe von Axios gesendet. Abschließend haben wir den Entwicklungsserver gestartet und unsere Anwendung im Browser getestet. 🎜🎜Ich hoffe, der Beispielcode in diesem Artikel kann Ihnen dabei helfen, schnell loszulegen und Vue und Axios zur Implementierung der Front-End- und Back-End-Datenübertragung zu verwenden. Ich wünsche dir viel Erfolg! 🎜

Das obige ist der detaillierte Inhalt vonLernen Sie Vue und Axios von Grund auf, um die Front-End- und Back-End-Datenübertragung zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Teilen der Vue-Technologie: So verwenden Sie die NetEase Cloud API, um die globale Suchfunktion des MV-Players zu implementierenNächster Artikel：Teilen der Vue-Technologie: So verwenden Sie die NetEase Cloud API, um die globale Suchfunktion des MV-Players zu implementieren

In Verbindung stehende Artikel

Mehr sehen