Kemas kini masa nyata dan paparan data bahagian hadapan menggunakan Vue dan Axios-View.js-php.cn

Kemas kini masa nyata dan paparan data bahagian hadapan menggunakan Vue dan Axios

王林

Lepaskan： 2023-07-17 16:13:56

asal

2830 orang telah melayarinya

Gunakan Vue dan Axios untuk mencapai kemas kini masa nyata dan paparan data bahagian hadapan

Dengan perkembangan pesat teknologi rangkaian, kaedah interaksi bahagian hadapan tidak lagi terhad kepada lompatan halaman tradisional, tetapi memberi lebih perhatian kepada masa nyata dan pengalaman pengguna. Vue dan Axios, sebagai rangka kerja dan perpustakaan yang sangat popular dalam pembangunan bahagian hadapan hari ini, boleh membantu kami mencapai pengemaskinian dan paparan data masa nyata. Artikel ini akan memperkenalkan cara menggunakan Vue dan Axios untuk melaksanakan fungsi ini dan memberikan contoh kod yang sepadan.

1. Pasang Vue dan Axios

Sebelum bermula, kita perlu memasang Vue dan Axios terlebih dahulu. Buka terminal, masukkan direktori projek, dan laksanakan arahan berikut:

npm install vue

Salin selepas log masuk

npm install axios

Salin selepas log masuk

Selepas pemasangan selesai, kami boleh memperkenalkan Vue dan Axios ke dalam projek untuk kegunaan seterusnya.

2 Buat contoh Vue

Dalam fail HTML, kami perlu memperkenalkan pautan CDN Vue dan Axios terlebih dahulu, dan menambah elemen yang mengenal pasti Vue dalam teg dalam fail JavaScript Cipta contoh Vue dan gunakan Axios untuk menghantar permintaan tak segerak untuk mendapatkan data. Selepas data berjaya diperoleh, data disimpan dalam atribut data bagi contoh Vue dan digunakan untuk paparan. Sebagai contoh:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue实例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, dipasang ialah salah satu fungsi kitaran hayat tika Vue, yang akan dilaksanakan secara automatik selepas tika Vue dipasang pada halaman. Dalam fungsi yang dipasang, kami menggunakan Axios untuk menghantar permintaan HTTP GET, dan alamat permintaan ialah /api/data. Selepas permintaan berjaya, Axios akan mengembalikan objek Promise yang mengandungi data respons. Kami menggunakan kaedah kemudian untuk mendapatkan data respons dan menyimpannya dalam atribut data bagi contoh Vue. Perlu diingatkan bahawa disebabkan masalah skop fungsi JavaScript, kita perlu menggunakan fungsi bind untuk mengikat ini pada contoh Vue untuk memastikan atribut data boleh diakses dengan betul.

Akhir sekali, kami perlu memulakan perkhidmatan bahagian belakang untuk mengendalikan permintaan dan mengembalikan data yang sepadan. Memandangkan pelaksanaan khusus perkhidmatan bahagian belakang melibatkan susunan teknologi yang berbeza, kami tidak akan membincangkan butiran di sini. Pembaca boleh memilih penyelesaian yang sesuai mengikut keperluan mereka sendiri.

3 Kemas kini dan paparkan data dalam masa nyata

Menggunakan Vue dan Axios untuk mendapatkan data dan memaparkannya pada halaman hanyalah langkah pertama Seterusnya, kami perlu mengemas kini dan memaparkan data dalam masa nyata. Dalam Vue, kita boleh menggunakan sifat yang dikira dan pendengar untuk mencapai fungsi ini.

Tentukan sifat yang dikira dalam tika Vue untuk mengembalikan data terkini masa nyata. Contohnya:

var app = new Vue({
    el: '#app',
    data: {
        data: null
    },
    mounted: function () {
        axios.get('/api/data')  // 发送异步请求获取数据
            .then(function (response) {
                this.data = response.data;  // 将获取到的数据保存在data属性中
            }.bind(this))
            .catch(function (error) {
                console.log(error);
            });
    }
});

Salin selepas log masuk

Dalam contoh ini, kami menganggap bahawa data atribut data dikemas kini dalam masa nyata setiap saat dan atribut terkira RealTimeData akan mengira dan mengembalikan data terkini secara dinamik.

Seterusnya, kita boleh menggunakan atribut terkira ini dalam templat HTML untuk memaparkan data dikemas kini masa nyata. Contohnya:

var app = new Vue({
    el: '#app',
    data: {
        data: null
    },
    computed: {
        realTimeData: function () {
            return this.data;  // 假设data属性的数据每秒都在实时更新
        }
    },
    mounted: function () {
        // ...
    }
});

Salin selepas log masuk

Dengan cara ini, apabila data atribut data berubah, atribut yang dikira RealTimeData akan dikemas kini secara automatik dan dipaparkan pada halaman dalam masa nyata.

Selain atribut yang dikira, kami juga boleh melaksanakan pemantauan masa nyata dan pengemaskinian data melalui pendengar. Contohnya:

<div id="app">
    <p>{{ realTimeData }}</p>
</div>

Salin selepas log masuk

Dalam contoh ini, apabila data dalam atribut data berubah, fungsi data dalam objek jam tangan akan dipanggil secara automatik, dengan itu mencapai pemantauan masa nyata dan pengemaskinian data.

4. Ringkasan

Artikel ini memperkenalkan cara menggunakan Vue dan Axios untuk mencapai kemas kini masa nyata dan paparan data bahagian hadapan. Dengan menghantar permintaan tak segerak melalui fungsi kitaran hayat contoh Vue dan Axios, kami boleh mendapatkan data bahagian belakang dan mengemas kininya ke halaman dalam masa nyata. Melalui sifat dan pendengar yang dikira, kami boleh memantau dan memaparkan data dengan mudah dalam masa nyata. Saya harap artikel ini dapat membantu semua orang, dan anda dialu-alukan untuk belajar dan meneroka secara mendalam dengan membaca dokumen yang berkaitan.

Atas ialah kandungan terperinci Kemas kini masa nyata dan paparan data bahagian hadapan menggunakan Vue dan Axios. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!