実際のプロジェクト開発では、特定の条件に基づいてデータをクエリする必要があるが、すべての列ではなく一部の列のみを更新したいという状況に直面することがよくあります。現時点では、Vue.js を使用して単純なフロントエンド アプリケーションを構築し、AJAX テクノロジを介してデータ クエリと更新を実装できます。
この記事では、Vue.jsでカラムデータの一部のみを更新する機能を実装する方法を紹介します。
ステップ 1: 準備
まず、データベースを準備し、フロントエンド アプリケーションがサーバー側と対話できるように、サーバー側で対応する API を記述する必要があります。この記事では、MySQL データベースを想定し、Node.js と Express フレームワークを使用して API を作成します。
データベースに users テーブルがあり、次のフィールドが含まれているとします。
次の機能を実現したいと考えています。
この機能を実現するには、サーバー側 API にクエリ関数と更新関数をそれぞれ実装し、それぞれ 2 つのルートに対応させる必要があります:
この記事の焦点はフロントエンドの実装にあるため、サーバー側の実装方法についてはこれ以上説明しません。興味のある読者は他の関連資料を参照してください。
ステップ 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 のテンプレート構文と命令を使用して、次の関数を実装します。
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 インスタンスのデータ属性:
次に、2 つのメソッドを定義しました:
AJAX リクエストを送信するときに axios ライブラリを使用することに注意してください。API 実装メソッドに従って、axios.get メソッドまたは axios.put メソッドを対応するパラメータとともに使用して、クエリとクエリを実装できます。機能が更新されました。
最後に、Vue.js インスタンスを作成してフロントエンド アプリケーションをマウントします。
ステップ 3: アプリケーションをテストする
これで、サーバーを起動し、HTML ファイルにアクセスして、アプリケーションをテストできます。
まず、ページ上でユーザー名を入力し、クエリボタンをクリックします。クエリが成功すると、クエリ結果の電子メールと電話の入力ボックスに、ユーザーの電子メールと電話の情報が自動的に入力されます。クエリが失敗すると、エラー メッセージが表示されます。
次に、電子メールと電話の情報を変更し、更新ボタンをクリックして更新操作を実行します。アップデートが成功すると、プロンプト ボックスがポップアップ表示されます。
まとめ
この記事では、Vue.jsとAJAX技術を利用して、カラムデータの一部のみを更新する機能を実装する方法を例を用いて紹介しました。この例を通じて、次の知識ポイントを学ぶことができます:
もちろん、この記事は簡単な例に基づいて紹介されているだけであり、これらのテクノロジーを実際のプロジェクトに適用する必要がある場合は、状況に応じて調整や改善が必要になります。
以上がVue.jsで一部のカラムデータのみを更新する機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
