Bagaimana untuk menghubungi bahagian belakang dalam vue

Vue ialah rangka kerja JavaScript untuk membina antara muka pengguna. Ia mempunyai banyak kelebihan, seperti mudah dipelajari, boleh disesuaikan, menjadikannya mudah untuk membuat aplikasi satu halaman yang kompleks dan banyak lagi. Vue biasanya melihat masalah dari perspektif pembinaan bahagian hadapan, tetapi ia perlu disepadukan dengan bahagian belakang dalam banyak projek untuk berkomunikasi dengan aplikasi bahagian belakang seperti pangkalan data dan pelayan. Artikel ini akan memperkenalkan cara menggunakan Vue untuk berinteraksi dengan bahagian belakang.

1. Tetapan Backend

Sebelum memulakan, pastikan aplikasi backend boleh menerima permintaan daripada Vue. Ini biasanya memerlukan penyediaan titik akhir API untuk menghantar permintaan kepada Vue dan menerima respons. Dalam kod hujung belakang anda, anda perlu menentukan laluan untuk semua permintaan yang dihantar oleh aplikasi Vue anda. Penghalaan bertanggungjawab untuk menentukan fungsi dalam aplikasi yang akan bertindak balas kepada permintaan Vue.

Tambahkan kod berikut pada fail penghalaan:

app.get('/getdata', function(req, res) {

res.send（sampledata）;

});

Kod di atas mentakrifkan penghalaan untuk aplikasi supaya apabila DAPATKAN titik akhir "/getdata" dalam penyemak imbas, respons yang ditakrifkan dalam kod dikembalikan.

2. Menghantar permintaan daripada aplikasi Vue

Kaedah utama untuk Vue meminta data hujung belakang ialah menggunakan pemalam Sumber Vue. Sumber Vue ialah perpustakaan HTTP yang menyediakan perkhidmatan dalam Vue yang boleh digunakan untuk menghantar permintaan HTTP.

Tambahkan kod berikut pada komponen Vue:

import Vue daripada 'vue'
import VueResource daripada 'vue-resource'

Vue.use(VueResource) ;

eksport lalai {

name: 'my-component',
data () {
  return {
    results: {}
  }
},
created () {
    this.$http.get('/getdata')
        .then(response => {
            this.results = response.body;
        }, response => {
            console.log('Error fetching data');  
        });
    }

}

Dalam kod di atas, apabila komponen dibuat, ia akan memanggil perkhidmatan $http Vue untuk menghantar permintaan GET ke pelayan , dan akan Respons dikembalikan kepada komponen. Jika permintaan mengembalikan data berjaya, templat komponen dipaparkan menggunakan data.

3. Memproses respons bahagian belakang

Apabila Sumber Vue menerima respons, ia akan mengembalikan objek Promise. Objek ini boleh digunakan untuk menyemak sama ada respons berjaya dan, jika ya, gunakan data daripada respons.

Dalam kod di atas, jika respons berjaya, data dalam badan tindak balas disimpan dalam objek hasil dalam komponen. Objek ini kemudiannya digunakan untuk memaparkan templat Vue. Jika permintaan gagal, mesej ralat dicetak.

Ini pada asasnya cara berinteraksi dengan bahagian belakang menggunakan Vue. Untuk menggunakan fungsi yang lebih maju, seperti menghantar permintaan menggunakan kaedah POST, PUT dan DELETE, menghantar dan memproses data borang, dsb., anda boleh melihat dokumentasi Sumber Vue.

Ringkasan

Vue ialah teknologi penting untuk aplikasi web moden. Pemalam Vue Resource ialah alat utama untuk berinteraksi dengan bahagian belakang. Apabila membina aplikasi Vue, menyepadukan Sumber Vue ke dalam aplikasi anda adalah satu kemestian. Pastikan pelayan anda disediakan untuk menerima permintaan Vue dan menghantar respons kembali kepada aplikasi anda. Dengan melihat dokumentasi Sumber Vue, anda boleh mengetahui cara Vue menggunakan lebih banyak ciri untuk berinteraksi dengan bahagian belakang.

Atas ialah kandungan terperinci Bagaimana untuk menghubungi bahagian belakang dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!