hujung hadapan web
View.js
Pelajari Vue dan Axios dari awal untuk merealisasikan penghantaran data bahagian hadapan dan belakang
Pelajari Vue dan Axios dari awal untuk merealisasikan penghantaran data bahagian hadapan dan belakang
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
atau
yarn add vue axios
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: ''
}
});第三步：创建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>第四步：编写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);
});
}
}
});在上述代码中，我们使用Axios的post方法向/api/send发送了一个POST请求，并传递了一个包含消息的对象。请确保在后端中设置了与之对应的API路由。
第五步：启动开发服务器
现在，我们需要在本地启动一个开发服务器，以便在浏览器中查看我们的应用程序。可以使用vue-cli快速创建一个Vue项目，并使用其内置的开发服务器。
如果还没有安装vue-cli，可以使用以下命令进行安装：
npm install -g @vue/cli
安装完成后，在项目的根目录中运行以下命令以启动开发服务器：
vue serve index.html
第六步：测试应用程序
现在，我们可以在浏览器中访问localhost:8080rrreee
index.html dan tampal kod berikut ke dalamnya: rrreee
Langkah 4: Tulis permintaan AxiosSekarang, mari hantar HTTP menggunakan Axios Requests are made to berinteraksi dengan bahagian belakang. Dalam failapp.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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Cara menambah fungsi ke butang untuk vue
Apr 08, 2025 am 08:51 AM
Anda boleh menambah fungsi ke butang VUE dengan mengikat butang dalam templat HTML ke kaedah. Tentukan kaedah dan tulis logik fungsi dalam contoh Vue.
Cara menggunakan bootstrap di vue
Apr 07, 2025 pm 11:33 PM
Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.
Cara merujuk fail js dengan vue.js
Apr 07, 2025 pm 11:27 PM
Terdapat tiga cara untuk merujuk kepada fail JS dalam vue.js: Secara langsung tentukan jalan menggunakan & lt; skrip & gt; tag ;; import dinamik menggunakan cangkuk kitaran hayat yang dipasang (); dan mengimport melalui Perpustakaan Pengurusan Negeri VUEX.
Cara Menggunakan Watch di Vue
Apr 07, 2025 pm 11:36 PM
Pilihan Watch di Vue.js membolehkan pemaju mendengar perubahan dalam data tertentu. Apabila data berubah, tontonkan mencetuskan fungsi panggil balik untuk melakukan paparan kemas kini atau tugas lain. Pilihan konfigurasinya termasuk segera, yang menentukan sama ada untuk melaksanakan panggilan balik dengan serta -merta, dan mendalam, yang menentukan sama ada untuk mendengarkan secara rekursif terhadap objek atau tatasusunan.
Cara kembali ke halaman sebelumnya oleh Vue
Apr 07, 2025 pm 11:30 PM
Vue.js mempunyai empat kaedah untuk kembali ke halaman sebelumnya: $ router.go (-1) $ router.back () menggunakan & lt; router-link to = & quot;/& quot; Komponen Window.History.Back (), dan pemilihan kaedah bergantung pada tempat kejadian.
Vue menyedari kesan menatal marquee/teks
Apr 07, 2025 pm 10:51 PM
Melaksanakan kesan menatal marquee/teks di VUE, menggunakan animasi CSS atau perpustakaan pihak ketiga. Artikel ini memperkenalkan cara menggunakan animasi CSS: Buat teks tatal dan bungkus teks dengan & lt; div & gt;. Tentukan animasi CSS dan tetapkan limpahan: tersembunyi, lebar, dan animasi. Tentukan frasa key, set Transform: TranslateX () pada permulaan dan akhir animasi. Laraskan sifat animasi seperti tempoh, kelajuan tatal, dan arah.
Cara Menggunakan Fungsi Memintas Vue
Apr 08, 2025 am 06:51 AM
Pemintasan fungsi dalam VUE adalah teknik yang digunakan untuk mengehadkan bilangan kali fungsi dipanggil dalam tempoh masa yang ditentukan dan mencegah masalah prestasi. Kaedah pelaksanaan adalah: mengimport perpustakaan lodash: import {debounce} dari 'lodash'; Gunakan fungsi debounce untuk membuat fungsi memintas: const debouncedfunction = debounce (() = & gt; { / logical /}, 500); Panggil fungsi Intercept, dan fungsi kawalan dipanggil paling banyak sekali dalam 500 milisaat.
Apakah yang dimaksudkan dengan pembangunan Vue Multi-Page?
Apr 07, 2025 pm 11:57 PM
Pembangunan pelbagai halaman Vue adalah cara untuk membina aplikasi menggunakan rangka kerja VUE.JS, di mana permohonan dibahagikan kepada halaman berasingan: Penyelenggaraan kod: Memisahkan aplikasi ke dalam beberapa halaman boleh menjadikan kod lebih mudah untuk dikendalikan dan diselenggarakan. Modularity: Setiap halaman boleh digunakan sebagai modul yang berasingan untuk penggunaan semula dan penggantian mudah. Routing mudah: Navigasi antara halaman boleh diuruskan melalui konfigurasi penghalaan mudah. Pengoptimuman SEO: Setiap halaman mempunyai URL sendiri, yang membantu SEO.
