ホームページ > 記事 > ウェブフロントエンド > Vue.jsで一部のカラムデータのみを更新する機能を実装する方法
Vue.jsで一部のカラムデータのみを更新する機能を実装する方法
- PHPzオリジナル
- 2023-04-13 10:46:241150ブラウズ
実際のプロジェクト開発では、特定の条件に基づいてデータをクエリする必要があるが、すべての列ではなく一部の列のみを更新したいという状況に直面することがよくあります。現時点では、Vue.js を使用して単純なフロントエンド アプリケーションを構築し、AJAX テクノロジを介してデータ クエリと更新を実装できます。
この記事では、Vue.jsでカラムデータの一部のみを更新する機能を実装する方法を紹介します。
ステップ 1: 準備
まず、データベースを準備し、フロントエンド アプリケーションがサーバー側と対話できるように、サーバー側で対応する API を記述する必要があります。この記事では、MySQL データベースを想定し、Node.js と Express フレームワークを使用して API を作成します。
データベースに users テーブルがあり、次のフィールドが含まれているとします。
- id - ユーザーの一意の識別子、自己増加する整数
- name -ユーザー名、文字列型
- email - ユーザーの電子メール、文字列型
- phone - ユーザーの電話番号、文字列型
次の機能を実現したいと考えています。
- ユーザー名に基づいてすべてのユーザー情報をクエリします。
- はユーザーの電子メールと電話番号を更新できますが、他の情報は変更できません。
この機能を実現するには、サーバー側 API にクエリ関数と更新関数をそれぞれ実装し、それぞれ 2 つのルートに対応させる必要があります:
- GET /users/: name - ユーザー名に基づいてユーザー情報をクエリします;
- PUT /users/:id - ユーザー情報を更新します。
この記事の焦点はフロントエンドの実装にあるため、サーバー側の実装方法についてはこれ以上説明しません。興味のある読者は他の関連資料を参照してください。
ステップ 2: フロントエンド アプリケーションを構築する
次に、Vue.js を使用してフロントエンド アプリケーションを構築し、AJAX テクノロジとサーバーサイド API を通じてデータを操作します。
最初に、Vue.js および jQuery ライブラリを HTML ファイルに導入する必要があります。コードは次のとおりです:
<!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>
HTML ファイルでは、id が「」の div 要素を定義します。 app" として Vue.js インスタンスのマウント ポイント。この div では、Vue.js のテンプレート構文と命令を使用して、次の関数を実装します。
- input 要素の値を Vue.js インスタンスの name 属性にバインドします;
- クエリ ボタンがクリックされると、検索メソッドが呼び出されます;
- v-if 命令は、Vue.js インスタンスの result 属性値に基づいてクエリ結果またはエラー プロンプトを動的に表示します。 result 属性と message 属性には、それぞれクエリ結果とエラー メッセージが格納されます。エラー メッセージの内容。
- input 要素の値をクエリ結果の電子メール フィールドと電話フィールドにバインドし、input 要素を無効にします。読み込み中;
- 更新ボタンをクリックすると、update メソッドが呼び出されます。
HTML ファイルに axios ライブラリを導入したことに注意してください。これは、AJAX リクエストの送信に使用できる Promise ベースの HTTP クライアントです。
次に、app.js ファイルに Vue.js インスタンスのコードを記述します。コードは次のとおりです:
var 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("更新失败，请重试");
});
},
},
});
app.js ファイルで、最初に Vue を定義します.js インスタンスのデータ属性:
- name: ユーザーが入力したクエリ条件 (ユーザー名など) を保存します;
- result: クエリ結果を保存します;
- メッセージ: エラーを保存します。 ヒント;
- loading: データが現在ロードされているかどうかを示します。
次に、2 つのメソッドを定義しました:
- search: AJAX リクエストを送信し、ユーザー名に基づいてユーザー情報をクエリし、クエリに基づいてデータ属性を更新します。 results;
- update: AJAX リクエストを送信し、ユーザー情報を更新し、プロンプト ボックスをポップアップします。
AJAX リクエストを送信するときに axios ライブラリを使用することに注意してください。API 実装メソッドに従って、axios.get メソッドまたは axios.put メソッドを対応するパラメータとともに使用して、クエリとクエリを実装できます。機能が更新されました。
最後に、Vue.js インスタンスを作成してフロントエンド アプリケーションをマウントします。
ステップ 3: アプリケーションをテストする
これで、サーバーを起動し、HTML ファイルにアクセスして、アプリケーションをテストできます。
まず、ページ上でユーザー名を入力し、クエリボタンをクリックします。クエリが成功すると、クエリ結果の電子メールと電話の入力ボックスに、ユーザーの電子メールと電話の情報が自動的に入力されます。クエリが失敗すると、エラー メッセージが表示されます。
次に、電子メールと電話の情報を変更し、更新ボタンをクリックして更新操作を実行します。アップデートが成功すると、プロンプト ボックスがポップアップ表示されます。
まとめ
この記事では、Vue.jsとAJAX技術を利用して、カラムデータの一部のみを更新する機能を実装する方法を例を用いて紹介しました。この例を通じて、次の知識ポイントを学ぶことができます:
- Vue.js でデータ プロパティとメソッドを定義する方法;
- テンプレート構文とデータ バインディングを実装する手順を使用する方法および動的更新;
- axios ライブラリを使用して AJAX リクエストを送信する方法。
もちろん、この記事は簡単な例に基づいて紹介されているだけであり、これらのテクノロジーを実際のプロジェクトに適用する必要がある場合は、状況に応じて調整や改善が必要になります。
以上がVue.jsで一部のカラムデータのみを更新する機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。