Rumah >hujung hadapan web >View.js >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.
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.
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模板和组件,以便在页面中显示数据。在根目录中,创建一个名为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发送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:8080
rrreee
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/send
Permintaan 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!