Pelajari Vue dan Axios dari awal untuk merealisasikan penghantaran data bahagian hadapan dan belakang-View.js-php.cn

Rumah

hujung hadapan web

View.js

Pelajari Vue dan Axios dari awal untuk merealisasikan penghantaran data bahagian hadapan dan belakang

王林

Jul 17, 2023 pm 01:22 PM

vueaxiosPenghantaran data bahagian hadapan dan hujung belakang

Ketahui Vue dan Axios dari awal untuk melaksanakan penghantaran data bahagian hadapan dan belakang

Vue.js ialah rangka kerja JavaScript popular yang membolehkan kami membina antara muka web interaktif. Axios ialah klien HTTP berkuasa yang boleh berkomunikasi dengan mudah dengan API bahagian belakang. Artikel ini akan memperkenalkan cara mempelajari Vue dan Axios dari awal, dan menunjukkan cara menggunakannya untuk melaksanakan penghantaran data bahagian hadapan dan belakang.

Langkah 1: Pasang Vue dan Axios

Mula-mula, kita perlu memasang Vue dan Axios. Ia boleh dipasang menggunakan npm (pengurus pakej Node) atau benang. Buka tetingkap baris arahan dan jalankan arahan berikut dalam direktori akar projek:

npm install vue axios

atau

yarn add vue axios

Tunggu pemasangan selesai, dan kita boleh meneruskan ke langkah seterusnya.

Langkah 2: Buat tika Vue

Seterusnya, kita perlu mencipta tika Vue. Dalam direktori akar projek, buat fail yang dipanggil app.js dan tulis kod berikut di dalamnya: 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

Langkah Tiga: Buat Templat dan Komponen Vue

Sekarang, kita perlu mencipta Vue templat dan komponen untuk memaparkan data dalam halaman. Dalam direktori akar, buat fail yang dipanggil index.html dan tampal kod berikut ke dalamnya:

rrreee

Langkah 4: Tulis permintaan Axios

Sekarang, mari hantar HTTP menggunakan Axios Requests are made to berinteraksi dengan bahagian belakang. Dalam fail app.js, tambahkan kod berikut: 🎜rrreee🎜Dalam kod di atas, kami menggunakan kaedah post Axios untuk /api/sendPermintaan POST telah dihantar, menghantar objek yang mengandungi mesej. Sila pastikan bahawa laluan API yang sepadan disediakan di bahagian belakang. 🎜🎜Langkah Lima: Mulakan Pelayan Pembangunan🎜🎜Sekarang, kita perlu memulakan pelayan pembangunan secara tempatan untuk melihat aplikasi kita dalam penyemak imbas. Anda boleh menggunakan vue-cli untuk mencipta projek Vue dengan cepat dan menggunakan pelayan pembangunan terbina dalamnya. 🎜🎜Jika anda belum memasang vue-cli, anda boleh menggunakan arahan berikut untuk memasangnya: 🎜rrreee🎜Selepas pemasangan selesai, jalankan arahan berikut dalam direktori akar projek untuk bermula pelayan pembangunan: 🎜rrreee🎜Langkah Keenam: Uji aplikasi 🎜🎜Kini, kami boleh menguji aplikasi kami dengan melawati localhost:8080 dalam penyemak imbas. Apabila kami memasukkan beberapa teks dalam kotak input dan klik butang "Hantar", teks dihantar ke bahagian belakang melalui Axios dan respons dipaparkan dalam konsol. 🎜🎜Ringkasan🎜🎜Dengan mempelajari Vue dan Axios, kami boleh melaksanakan penghantaran data bahagian hadapan dan belakang dengan mudah. Dalam artikel ini, kami mula-mula memasang Vue dan Axios dan mencipta tika Vue. Kami kemudian menulis fail HTML yang mengandungi templat dan komponen Vue dan menghantar permintaan HTTP menggunakan Axios. Akhirnya, kami memulakan pelayan pembangunan dan menguji aplikasi kami dalam penyemak imbas. 🎜🎜Saya harap kod sampel dalam artikel ini dapat membantu anda bermula dengan cepat dan menggunakan Vue dan Axios untuk melaksanakan penghantaran data bahagian hadapan dan belakang. Saya doakan anda berjaya! 🎜

Atas ialah kandungan terperinci Pelajari Vue dan Axios dari awal untuk merealisasikan penghantaran data bahagian hadapan dan belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

React, Vue, dan Masa Depan Frontend NetflixApr 12, 2025 am 12:12 AM

Netflix terutamanya menggunakan React sebagai rangka kerja front-end, ditambah dengan VUE untuk fungsi tertentu. 1) Komponen React dan DOM maya meningkatkan prestasi dan kecekapan pembangunan aplikasi Netflix. 2) VUE digunakan dalam alat dalaman dan projek kecil Netflix, dan fleksibiliti dan kemudahan penggunaannya adalah kunci.

Vue.js di frontend: aplikasi dan contoh dunia nyataApr 11, 2025 am 12:12 AM

Vue.js adalah rangka kerja JavaScript yang progresif yang sesuai untuk membina antara muka pengguna yang kompleks. 1) Konsep terasnya termasuk data responsif, komponen dan DOM maya. 2) Dalam aplikasi praktikal, ia boleh ditunjukkan dengan membina aplikasi todo dan mengintegrasikan vuerouter. 3) Apabila debugging, disyorkan untuk menggunakan Vuedevtools dan Console.log. 4) Pengoptimuman prestasi boleh dicapai melalui V-IF/V-Show, senarai pengoptimuman rendering, pemuatan asynchronous komponen, dll.

Vue.js dan bertindak balas: Memahami perbezaan utamaApr 10, 2025 am 09:26 AM

Vue.js sesuai untuk projek kecil dan sederhana, sementara React lebih sesuai untuk aplikasi besar dan kompleks. 1. Sistem responsif vue.js secara automatik mengemas kini DOM melalui pengesanan ketergantungan, menjadikannya mudah untuk menguruskan perubahan data. 2. Leact mengamalkan aliran data sehala, dan data mengalir dari komponen induk ke komponen kanak-kanak, menyediakan aliran data yang jelas dan struktur yang mudah dibuang.

Vue.js vs React: Pertimbangan khusus projekApr 09, 2025 am 12:01 AM

Vue.js sesuai untuk projek kecil dan sederhana dan lelaran yang cepat, sementara React sesuai untuk aplikasi besar dan kompleks. 1) Vue.js mudah digunakan dan sesuai untuk situasi di mana pasukan tidak mencukupi atau skala projek kecil. 2) React mempunyai ekosistem yang lebih kaya dan sesuai untuk projek dengan prestasi tinggi dan keperluan fungsional yang kompleks.

Cara melompat tag ke vueApr 08, 2025 am 09:24 AM

Kaedah untuk melaksanakan lompatan tag dalam Vue termasuk: menggunakan tag dalam templat HTML untuk menentukan atribut HREF. Gunakan komponen router-link routing VUE. Gunakan ini. $ Router.push () kaedah dalam JavaScript. Parameter boleh dilalui melalui parameter pertanyaan dan laluan dikonfigurasikan dalam pilihan penghala untuk lompatan dinamik.

Cara melaksanakan lompat komponen untuk vueApr 08, 2025 am 09:21 AM

Terdapat kaedah berikut untuk melaksanakan lompat komponen di Vue: Gunakan Router-Link dan & lt; Router-View & GT; Komponen untuk melaksanakan lompat hiperpautan, dan tentukan: untuk atribut sebagai laluan sasaran. Gunakan & lt; router-view & gt; Komponen secara langsung untuk memaparkan komponen yang dijalankan yang sedang dialihkan. Gunakan kaedah router.push () dan router.replace () untuk navigasi programatik. Bekas menjimatkan sejarah dan yang kedua menggantikan laluan semasa tanpa meninggalkan rekod.

Cara melompat ke Div VueApr 08, 2025 am 09:18 AM

Terdapat dua cara untuk melompat elemen div di Vue: Gunakan Vue Router dan tambahkan komponen router-link. Tambah pendengar acara @Click dan panggil ini. $ Router.push () kaedah untuk melompat.

Cara memindahkan nilai dengan melompat vueApr 08, 2025 am 09:15 AM

Terdapat dua cara utama untuk lulus data dalam VUE: Props: Data satu arah mengikat, lulus data dari komponen induk ke komponen kanak-kanak. Peristiwa: Lulus data antara komponen menggunakan peristiwa dan peristiwa tersuai.

See all articles