Cara menggunakan data borang untuk menghantar permintaan dalam vue

Vue ialah rangka kerja bahagian hadapan yang popular yang menyediakan pelbagai alatan yang membolehkan kami membina aplikasi web dengan mudah. Dalam proses ini, kami selalunya perlu menghantar permintaan HTTP ke pelayan untuk mendapatkan data atau menghantar data ke bahagian belakang.

Dalam Vue, kami boleh menggunakan pustaka Axios untuk menghantar permintaan HTTP. Jika kami perlu menghantar data borang ke pelayan, maka kami boleh mengekod data kami dalam format data borang. Artikel ini akan memperkenalkan cara menggunakan perpustakaan Vue dan Axios untuk menghantar permintaan dalam format data borang.

Axios ialah perpustakaan permintaan HTTP yang popular yang menyediakan banyak kaedah ringkas dan mudah untuk menghantar pelbagai jenis permintaan. Menggunakan perpustakaan Axios, kami boleh mengekod data kami dengan mudah ke dalam format data borang dan kemudian menghantarnya ke pelayan.

Langkah 1: Pasang perpustakaan Axios

Sebelum menggunakan Axios untuk menghantar permintaan, kami perlu memasang perpustakaan ini terlebih dahulu. Kita boleh menggunakan npm untuk memasang Axios, cuma jalankan arahan berikut:

npm install axios

Langkah 2: Cipta komponen Vue

Sebelum kita mula menulis kod, kita perlu mencipta komponen Vue terlebih dahulu . Dalam komponen ini, kami akan menggunakan Axios untuk menghantar permintaan dalam format data borang. Berikut ialah contoh komponen Vue mudah:

<template>
  <div>
    <form>
      <input type="text" v-model="name" />
      <input type="file" ref="file" />
      <button @click.prevent="submitForm">Submit</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'FormDataExample',
  data() {
    return {
      name: '',
    };
  },
  methods: {
    async submitForm() {
      const formData = new FormData();
      formData.append('name', this.name);
      formData.append('file', this.$refs.file.files[0]);
      
      try {
        const response = await axios.post('/api/submit-form', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });
        
        console.log(response);
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

Komponen ini termasuk borang dengan kotak input teks dan kotak input muat naik fail, serta butang hantar. Dalam fungsi submitForm, kami mencipta contoh FormData dan menambah data kami pada formData. Kami kemudian menggunakan kaedah post perpustakaan Axios untuk menghantar permintaan POST ke pelayan. Kami memberitahu pelayan format data yang akan kami hantar dengan menetapkan atribut Content-Type pengepala permintaan kepada multipart/form-data.

Apabila kami mengklik butang hantar, fungsi submitForm dipanggil dan perpustakaan Axios menghantar permintaan kepada pelayan dan mengekod data kami sebagai format data borang.

Langkah 3: Uji

Kami telah selesai menulis kod. Kini kami perlu menguji komponen kami untuk memastikan kami menghantar permintaan data borang ke pelayan dengan betul. Untuk menguji kod, kami boleh memulakan pelayan tempatan dan membuka komponen Vue dalam penyemak imbas.

Andaikan kami telah memulakan pelayan Node.js Express dan titik akhir API pelayan ialah /api/submit-form. Apabila kami menyerahkan borang dalam penyemak imbas, pelayan akan menerima dan memproses permintaan tersebut.

Apabila kami mengklik butang hantar, kami dapat melihat data respons yang dikembalikan oleh pelayan dalam konsol penyemak imbas. Jika kami berjaya menerima data daripada respons pelayan, maka kami boleh mengesahkan bahawa kami berjaya menghantar permintaan dalam format data borang kepada pelayan.

Kesimpulan

Dengan menggunakan perpustakaan Vue dan Axios, kami boleh menghantar permintaan format data borang ke pelayan dengan mudah. Kami hanya perlu menggunakan FormData untuk mengekod data kami dan menambahkannya pada permintaan. Jika kita perlu melaksanakan fungsi muat naik fail dalam aplikasi Vue, maka menggunakan perpustakaan Axios dan pengekodan format data borang akan menjadi pilihan terbaik.

Atas ialah kandungan terperinci Cara menggunakan data borang untuk menghantar permintaan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!