Cara menghantar nilai ke backend dalam vue

Vue ialah rangka kerja bahagian hadapan yang popular yang membenarkan interaksi data dengan bahagian belakang. Apabila interaksi data berlaku antara bahagian hadapan dan bahagian belakang, selalunya perlu untuk menghantar data dari bahagian hadapan ke bahagian belakang. Jadi, bagaimanakah anda menghantar nilai ke bahagian belakang dalam Vue? Artikel ini akan membincangkan aspek berikut.

1. Gunakan Axios untuk permintaan data

Axios ialah klien HTTP ringan yang popular yang boleh digunakan untuk membuat permintaan data dalam Vue. Berikut ialah penggunaan asas Axios:

1 Perkenalkan Axios dalam Vue:

import axios from 'axios'

2 Hantar permintaan HTTP:

axios({
  method: 'get',
  url: '/api/getData',
  params: {
    id: 1
  }
})
  .then(function (response) {
    console.log(response.data)
  })
  .catch(function (error) {
    console.log(error)
  })

Dalam contoh ini, kami adalah backend A Permintaan GET telah dihantar, alamat permintaan ialah '/api/getData' dan parameter permintaan ialah id=1. Apabila permintaan berjaya, kami mencetak data yang dikembalikan oleh bahagian belakang ke konsol.

2. Gunakan Ambil untuk membuat permintaan data

Fetch ialah API JavaScript asli yang juga boleh digunakan untuk membuat permintaan data dalam Vue. Berikut ialah penggunaan asas Fetch:

1 Hantar permintaan HTTP:

fetch('/api/getData?id=1')
  .then(function (response) {
    return response.json()
  })
  .then(function (data) {
    console.log(data)
  })
  .catch(function (error) {
    console.log(error)
  })

Dalam contoh ini, kami menghantar permintaan GET ke bahagian belakang, dan alamat yang diminta ialah '/api/. getData ', parameter yang diminta ialah id=1. Apabila permintaan berjaya, kami mencetak data yang dikembalikan oleh bahagian belakang ke konsol.

3. Gunakan Vue-resource untuk membuat permintaan data

Vue-resource ialah pemalam Vue yang boleh digunakan untuk membuat permintaan data dalam Vue. Berikut ialah penggunaan asas Vue-resource:

1 Perkenalkan Vue-resource ke dalam Vue:

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

2 Hantar permintaan HTTP:

this.$http.get('/api/getData', {
  params: {
    id: 1
  }
})
  .then(function (response) {
    console.log(response.body)
  })
  .catch(function (error) {
    console.log(error)
  })

Dalam contoh ini, Kami menghantar permintaan GET ke bahagian belakang, alamat permintaan ialah '/api/getData' dan parameter permintaan ialah id=1. Apabila permintaan berjaya, kami mencetak data yang dikembalikan oleh bahagian belakang ke konsol.

Ringkasan:

Di atas ialah tiga cara untuk menghantar nilai ke bahagian belakang dalam Vue. Tidak kira kaedah yang digunakan, kita perlu memberi perhatian kepada perkara berikut:

1 Alamat permintaan dan parameter yang diminta perlu sepadan dengan API bahagian belakang.
2. Kaedah permintaan perlu sepadan dengan API bahagian belakang.
3. Apabila menghantar permintaan, anda perlu mengendalikan kejayaan dan kegagalan permintaan.
4. Anda perlu memberi perhatian kepada isu merentas domain semasa membuat permintaan.

Di atas adalah pengenalan untuk menghantar nilai ke bahagian belakang dalam Vue. Saya harap ia akan membantu pembaca.

Atas ialah kandungan terperinci Cara menghantar nilai ke backend dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!