Rumah > Artikel > hujung hadapan web > Cara melaksanakan fungsi mengemas kini hanya beberapa data lajur dalam Vue.js
Cara melaksanakan fungsi mengemas kini hanya beberapa data lajur dalam Vue.js
- PHPzasal
- 2023-04-13 10:46:241145semak imbas
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>
Ikat nilai elemen input pada atribut nama bagi contoh Vue.js; > - 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!