hujung hadapan web
Soal Jawab bahagian hadapan
Cara melaksanakan fungsi mengemas kini hanya beberapa data lajur dalam Vue.js
Cara melaksanakan fungsi mengemas kini hanya beberapa data lajur dalam Vue.js
Dalam pembangunan projek sebenar, kami sering menghadapi situasi di mana kami perlu menanyakan data berdasarkan syarat tertentu, tetapi hanya mahu mengemas kini beberapa lajur, bukan semuanya. Pada masa ini, kami boleh menggunakan Vue.js untuk membina aplikasi bahagian hadapan yang ringkas dan melaksanakan pertanyaan dan kemas kini data melalui teknologi AJAX.
Artikel ini memperkenalkan cara melaksanakan fungsi mengemas kini hanya sebahagian daripada data lajur dalam Vue.js.
Langkah 1: Penyediaan
Pertama, kita perlu menyediakan pangkalan data dan menulis API yang sepadan pada bahagian pelayan supaya aplikasi bahagian hadapan boleh berinteraksi dengan data bahagian pelayan. Dalam artikel ini, kami menganggap pangkalan data MySQL dan menulis API menggunakan Node.js dan rangka kerja Express.
Andaikan pangkalan data kami mempunyai jadual pengguna, yang mengandungi medan berikut:
- id - pengecam unik pengguna, integer yang meningkat sendiri
- nama - Pengguna nama, jenis rentetan
- e-mel - e-mel pengguna, jenis rentetan
- telefon - telefon pengguna, jenis rentetan
Kami berharap dapat mencapai fungsi berikut:
- Tanya semua maklumat pengguna berdasarkan nama pengguna;
- boleh mengemas kini e-mel dan nombor telefon pengguna, dan maklumat lain tidak dibenarkan untuk diubah suai.
Untuk melaksanakan fungsi ini, kami perlu melaksanakan fungsi pertanyaan dan kemas kini masing-masing dalam API bahagian pelayan, dan sepadan dengan dua laluan masing-masing:
- DAPATKAN /users/: nama - Tanya maklumat pengguna berdasarkan nama pengguna;
- Memandangkan fokus artikel ini adalah pada pelaksanaan bahagian hadapan, kami tidak akan membincangkan lebih lanjut tentang kaedah pelaksanaan bahagian pelayan, pembaca yang berminat boleh merujuk kepada bahan lain yang berkaitan.
Langkah 2: Bina aplikasi bahagian hadapan
Seterusnya, kami akan menggunakan Vue.js untuk membina aplikasi bahagian hadapan dan berinteraksi dengan data melalui teknologi AJAX dan API bahagian pelayan.
Pertama, kita perlu memperkenalkan perpustakaan Vue.js dan jQuery ke dalam fail HTML Kodnya adalah seperti berikut:
Dalam fail HTML, kami mentakrifkan div dengan id. Elemen "aplikasi" berfungsi sebagai titik pelekap untuk kejadian Vue.js. Dalam div ini, kami menggunakan sintaks templat dan arahan Vue.js untuk melaksanakan fungsi berikut:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="app">
<div>
<label>用户名：</label>
<input type="text" v-model="name">
<button @click="search">查询</button>
</div>
<div v-if="result">
<label>邮箱：</label>
<input type="text" v-model="result.email" :disabled="loading">
<label>电话：</label>
<input type="text" v-model="result.phone" :disabled="loading">
<button @click="update">更新</button>
</div>
<div v-else>
{{ message }}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="app.js"></script>
</body>
</html>- Apabila butang pertanyaan diklik, kaedah carian dipanggil;
- Arahan v-if secara dinamik memaparkan hasil pertanyaan atau gesaan ralat berdasarkan nilai atribut hasil bagi contoh Vue.js, dan hasil dan atribut mesej menyimpan hasil pertanyaan dan mesej ralat masing-masing Kandungan mesej ralat; semasa memuatkan;
- Apabila butang kemas kini diklik, kaedah kemas kini dipanggil.
- Perlu diambil perhatian bahawa kami memperkenalkan perpustakaan axios dalam fail HTML, iaitu klien HTTP berasaskan Promise yang boleh digunakan untuk menghantar permintaan AJAX.
- Seterusnya, kami menulis kod untuk contoh Vue.js dalam fail app.js Kod tersebut adalah seperti berikut:
Dalam fail app.js, kami tentukan dahulu. Vue.js Atribut data contoh termasuk:
nama: menyimpan syarat pertanyaan yang dimasukkan oleh pengguna (iaitu nama penggunavar app = new Vue({
el: "#app",
data: {
name: "",
result: null,
message: "",
loading: false,
},
methods: {
search: function() {
var self = this;
self.loading = true;
self.result = null;
self.message = "正在加载...";
axios.get("/api/users/" + self.name).then(function(res) {
self.loading = false;
if (res.data.status === 0) {
self.result = res.data.result;
self.message = "";
} else {
self.message = res.data.message;
}
}).catch(function() {
self.loading = false;
self.message = "加载失败，请重试";
});
},
update: function() {
var self = this;
var data = {
email: self.result.email,
phone: self.result.phone,
};
axios.put("/api/users/" + self.result.id, data).then(function(res) {
if (res.data.status === 0) {
alert("更新成功");
} else {
alert(res.data.message);
}
}).catch(function() {
alert("更新失败，请重试");
});
},
},
});hasil: menyimpan hasil pertanyaan
- mesej: Mesej ralat storan;
- memuatkan: mengenal pasti sama ada data sedang dimuatkan.
- Kemudian, kami menentukan dua kaedah:
- carian: hantar permintaan AJAX, tanya maklumat pengguna berdasarkan nama pengguna dan kemas kini atribut data berdasarkan hasil pertanyaan; >
- Perlu diambil perhatian bahawa kami menggunakan perpustakaan axios apabila menghantar permintaan AJAX Menurut kaedah pelaksanaan API, anda boleh menggunakan kaedah axios.get atau axios.put dengan parameter yang sepadan untuk melaksanakan pertanyaan dan. Ciri yang dikemas kini.
- Akhir sekali, kami memasang aplikasi bahagian hadapan dengan mencipta tika Vue.js.
- Langkah 3: Uji aplikasi
Sekarang, kita boleh memulakan pelayan, mengakses fail HTML dan menguji aplikasi.
Pertama, masukkan nama pengguna pada halaman dan klik butang pertanyaan. Jika pertanyaan berjaya, kotak input e-mel dan telefon hasil pertanyaan akan diisi secara automatik dengan e-mel dan maklumat telefon pengguna. Jika pertanyaan gagal, mesej ralat akan dipaparkan.
Kemudian, kami boleh mengubah suai maklumat e-mel dan telefon, dan klik butang kemas kini untuk melaksanakan operasi kemas kini. Selepas kemas kini berjaya, kotak gesaan akan muncul.
Ringkasan
Dalam artikel ini, kami memperkenalkan melalui contoh cara menggunakan teknologi Vue.js dan AJAX untuk melaksanakan fungsi mengemas kini hanya sebahagian daripada data lajur. Melalui contoh ini, kita boleh mempelajari mata pengetahuan berikut:
Cara menentukan sifat dan kaedah data dalam Vue.js Cara menggunakan sintaks templat dan arahan untuk melaksanakan pengikatan data dan kemas kini dinamik; Cara menggunakan perpustakaan axios untuk menghantar permintaan AJAX.- Sudah tentu, artikel ini hanya diperkenalkan berdasarkan contoh mudah Jika teknologi ini perlu diaplikasikan dalam projek sebenar, ia perlu diselaraskan dan diperbaiki mengikut situasi tertentu.
Atas ialah kandungan terperinci Cara melaksanakan fungsi mengemas kini hanya beberapa data lajur dalam Vue.js. 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
Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan?
Mar 19, 2025 pm 03:58 PM
Artikel ini membincangkan useeffect dalam React, cangkuk untuk menguruskan kesan sampingan seperti pengambilan data dan manipulasi DOM dalam komponen berfungsi. Ia menerangkan penggunaan, kesan sampingan yang biasa, dan pembersihan untuk mencegah masalah seperti kebocoran memori.
Terangkan konsep pemuatan malas.
Mar 13, 2025 pm 07:47 PM
Lazy memuatkan kelewatan memuatkan kandungan sehingga diperlukan, meningkatkan prestasi web dan pengalaman pengguna dengan mengurangkan masa beban awal dan beban pelayan.
Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula?
Mar 18, 2025 pm 01:44 PM
Fungsi pesanan yang lebih tinggi dalam JavaScript meningkatkan ketabahan kod, kebolehgunaan semula, modulariti, dan prestasi melalui abstraksi, corak umum, dan teknik pengoptimuman.
Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya?
Mar 18, 2025 pm 01:45 PM
Artikel ini membincangkan kari dalam JavaScript, teknik yang mengubah fungsi multi-argumen ke dalam urutan fungsi argumen tunggal. Ia meneroka pelaksanaan kari, faedah seperti aplikasi separa, dan kegunaan praktikal, meningkatkan kod baca
Bagaimanakah algoritma Rekonsiliasi React berfungsi?
Mar 18, 2025 pm 01:58 PM
Artikel ini menerangkan algoritma perdamaian React, yang dengan cekap mengemas kini DOM dengan membandingkan pokok DOM maya. Ia membincangkan manfaat prestasi, teknik pengoptimuman, dan kesan terhadap pengalaman pengguna. Kira -kira: 159
Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen?
Mar 19, 2025 pm 03:59 PM
Artikel ini menerangkan USEContext dalam React, yang memudahkan pengurusan negara dengan mengelakkan penggerudian prop. Ia membincangkan faedah seperti keadaan terpusat dan penambahbaikan prestasi melalui pengurangan semula yang dikurangkan.
Bagaimana anda mengelakkan tingkah laku lalai di pengendali acara?
Mar 19, 2025 pm 04:10 PM
Artikel membincangkan menghalang tingkah laku lalai dalam pengendali acara menggunakan kaedah pencegahanDefault (), faedahnya seperti pengalaman pengguna yang dipertingkatkan, dan isu -isu yang berpotensi seperti kebimbangan aksesibiliti.
Apakah kelebihan dan kekurangan komponen terkawal dan tidak terkawal?
Mar 19, 2025 pm 04:16 PM
Artikel ini membincangkan kelebihan dan kekurangan komponen terkawal dan tidak terkawal dalam React, yang memberi tumpuan kepada aspek seperti ramalan, prestasi, dan kes penggunaan. Ia menasihatkan faktor -faktor yang perlu dipertimbangkan ketika memilih di antara mereka.
