Vue.jsで一部のカラムデータのみを更新する機能を実装する方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

Vue.jsで一部のカラムデータのみを更新する機能を実装する方法

PHPz

Apr 13, 2023 am 10:46 AM

実際のプロジェクト開発では、特定の条件に基づいてデータをクエリする必要があるが、すべての列ではなく一部の列のみを更新したいという状況に直面することがよくあります。現時点では、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 インスタンスのデータ属性: