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

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

王林

Lepaskan： 2023-07-17 13:22:39

asal

2904 orang telah melayarinya

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

Salin selepas log masuk

atau

yarn add vue axios

Salin selepas log masuk

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: ''
  }
});

Salin selepas log masuk

第三步：创建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>

Salin selepas log masuk

第四步：编写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);
      });
    }
  }
});

Salin selepas log masuk

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

第五步：启动开发服务器

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

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

npm install -g @vue/cli

Salin selepas log masuk

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

vue serve index.html

Salin selepas log masuk

第六步：测试应用程序

现在，我们可以在浏览器中访问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!