hujung hadapan web
View.js
Cara menggunakan Vue dan Axios untuk melaksanakan operasi CRUD pada data
Cara menggunakan Vue dan Axios untuk melaksanakan operasi CRUD pada data
Cara menggunakan Vue dan Axios untuk melaksanakan operasi CRUD pada data
Dalam pembangunan bahagian hadapan, selalunya perlu untuk berinteraksi dengan pelayan bahagian belakang untuk melaksanakan operasi penambahan, pemadaman, pengubahsuaian dan pertanyaan (CRUD) data. Vue ialah rangka kerja JavaScript popular yang membantu kami membina antara muka pengguna interaktif. Axios ialah perpustakaan HTTP berasaskan Promise yang boleh membantu kami menyampaikan data dengan mudah dengan pelayan. Dengan menggabungkan Vue dan Axios, kami boleh melaksanakan operasi CRUD pada data dengan mudah.
Dalam artikel ini, kami akan mengambil sistem pengurusan tugasan mudah sebagai contoh untuk menunjukkan cara menggunakan Vue dan Axios untuk operasi CRUD.
- Buat contoh Vue
Pertama, kita perlu mencipta tika Vue untuk pengikatan dan operasi data. Anda boleh memperkenalkan Vue dalam fail HTML dan mencipta tika Vue dalam JavaScript:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CRUD Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 页面内容 -->
</div>
<script src="app.js"></script>
</body>
</html>// app.js
var app = new Vue({
el: '#app',
data: {
tasks: []
},
methods: {
// CRUD方法
},
mounted: function() {
// 获取任务列表
}
}); Dalam kod di atas, kami mencipta tika Vue dan menentukan tatasusunan kosong bernama tasks, menggunakan untuk menyimpan senarai tugasan . Pada masa yang sama, kami juga menentukan beberapa kaedah untuk operasi CRUD. tasks的空数组，用来存储任务列表。同时，我们也定义了一些用来进行CRUD操作的方法。
- 获取任务列表
在Vue的mounted生命周期钩子中，我们可以使用Axios发送一个GET请求来获取任务列表，并将返回的数据赋值给tasks：
// app.js
mounted: function() {
var vm = this;
axios.get('/api/tasks')
.then(function(response) {
vm.tasks = response.data;
})
.catch(function(err) {
console.error(err);
});
}上述代码中，我们使用Axios的get方法来发送一个GET请求到/api/tasks接口，然后在then回调函数中将返回的数据赋值给tasks。
- 添加任务
添加任务时，我们需要发送一个POST请求到服务器，并将新任务的数据传递过去。可以在Vue实例中定义一个addTask方法来处理这个请求：
// app.js
methods: {
addTask: function() {
var vm = this;
axios.post('/api/tasks', { title: 'New Task' })
.then(function(response) {
vm.tasks.push(response.data);
})
.catch(function(err) {
console.error(err);
});
}
}上述代码中，我们使用Axios的post方法来发送一个POST请求到/api/tasks接口，并将{ title: 'New Task' }作为请求体传递过去。在then回调函数中，我们将服务器返回的新任务数据追加到tasks数组中。
- 更新任务
更新任务时，我们需要发送一个PUT请求到服务器，并将更新后的任务数据传递过去。可以在Vue实例中定义一个updateTask方法来处理这个请求：
// app.js
methods: {
updateTask: function(task) {
var vm = this;
axios.put('/api/tasks/' + task.id, { title: task.title })
.then(function(response) {
// 更新成功
})
.catch(function(err) {
console.error(err);
});
}
}上述代码中，我们使用Axios的put方法来发送一个PUT请求到/api/tasks/:id接口，并将任务的ID和更新后的标题作为请求参数传递过去。在then回调函数中，我们可以执行一些更新成功后的操作。
- 删除任务
删除任务时，我们需要发送一个DELETE请求到服务器，并指定待删除任务的ID。可以在Vue实例中定义一个deleteTask方法来处理这个请求：
// app.js
methods: {
deleteTask: function(task) {
var vm = this;
axios.delete('/api/tasks/' + task.id)
.then(function(response) {
vm.tasks = vm.tasks.filter(function(t) {
return t.id !== task.id;
});
})
.catch(function(err) {
console.error(err);
});
}
}上述代码中，我们使用Axios的delete方法来发送一个DELETE请求到/api/tasks/:id接口，并指定待删除任务的ID。在then回调函数中，我们可以使用filter方法来过滤出不包含删除任务的tasks
- Dapatkan senarai tugas🎜Dalam cangkuk kitaran hayat
dipasang Vue, kami boleh menggunakan Axios untuk menghantar permintaan GET untuk mendapatkan senarai tugas dan mengembalikan data yang dikembalikan Berikan nilai kepada tasks: 🎜rrreee🎜Dalam kod di atas, kami menggunakan kaedah get Axios untuk menghantar permintaan GET ke /api/tasks antara muka, Kemudian tetapkan data yang dikembalikan kepada tasks dalam fungsi panggil balik then. 🎜- 🎜Tambah tugasan🎜🎜🎜Apabila menambah tugasan, kita perlu menghantar permintaan POST ke pelayan dan menghantar data tugasan baharu. Anda boleh menentukan kaedah
addTask dalam contoh Vue untuk mengendalikan permintaan ini: 🎜rrreee🎜Dalam kod di atas, kami menggunakan kaedah post Axios untuk menghantar permintaan POST ke antara muka /api/tasks dan hantar { title: 'New Task' } sebagai badan permintaan. Dalam fungsi panggil balik then, kami menambahkan data tugasan baharu yang dikembalikan oleh pelayan pada tatasusunan tasks. 🎜- 🎜Kemas kini tugas🎜🎜🎜Apabila mengemas kini tugasan, kami perlu menghantar permintaan PUT ke pelayan dan menghantar data tugasan yang dikemas kini. Anda boleh mentakrifkan kaedah
updateTask dalam contoh Vue untuk mengendalikan permintaan ini: 🎜rrreee🎜Dalam kod di atas, kami menggunakan kaedah put Axios untuk menghantar permintaan PUT kepada /api/tasks/:id antara muka, dan lulus ID tugasan dan tajuk yang dikemas kini sebagai parameter permintaan. Dalam fungsi panggil balik then, kami boleh melakukan beberapa operasi selepas kemas kini berjaya. 🎜- 🎜Padam tugasan🎜🎜🎜Apabila memadamkan tugasan, kita perlu menghantar permintaan DELETE ke pelayan dan nyatakan ID tugasan yang hendak dipadamkan. Anda boleh mentakrifkan kaedah
deleteTask dalam contoh Vue untuk mengendalikan permintaan ini: 🎜rrreee🎜Dalam kod di atas, kami menggunakan kaedah delete Axios untuk menghantar permintaan DELETE ke /api/tasks/:id antara muka dan nyatakan ID tugas yang hendak dipadamkan. Dalam fungsi panggil balik then, kita boleh menggunakan kaedah filter untuk menapis tatasusunan tasks yang tidak mengandungi tugasan yang dipadamkan. 🎜🎜Melalui contoh kod di atas, kita dapat melihat cara menggunakan Vue dan Axios untuk melaksanakan operasi CRUD pada data. Sudah tentu, dalam projek sebenar, kita juga perlu menjalankan beberapa pengembangan dan pengoptimuman mengikut keperluan khusus. Saya harap artikel ini dapat membantu anda memahami dan menggunakan Vue dan Axios dengan lebih baik. 🎜Atas ialah kandungan terperinci Cara menggunakan Vue dan Axios untuk melaksanakan operasi CRUD pada data. 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.
Cara Menanyakan Versi Vue
Apr 07, 2025 pm 11:24 PM
Anda boleh menanyakan versi VUE dengan menggunakan Vue Devtools untuk melihat tab VUE dalam konsol penyemak imbas. Gunakan NPM untuk menjalankan arahan "NPM LIST -G VUE". Cari item VUE dalam objek "Dependencies" fail Package.json. Untuk projek Vue CLI, jalankan perintah "Vue -version". Semak maklumat versi di & lt; skrip & gt; Tag dalam fail HTML yang merujuk kepada fail VUE.
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.
Cara melompat ke Div Vue
Apr 08, 2025 am 09:18 AM
Terdapat dua cara untuk melompat elemen div di Vue: Gunakan Vue Router dan tambahkan komponen router-link. Tambah pendengar acara @Click dan panggil ini. $ Router.push () kaedah untuk melompat.
