Vueのフロントエンドとバックエンドのデータのやり取りと表示を理解する方法

1. 技術概要

バックエンドで計算されたデータはフロントエンドページの対応する位置に提示され、ユーザーのクリック操作に応じて対応するデータとインターフェースが変更され、その値がバックエンドに渡されます。このテクノロジーは Web 開発に不可欠であり、フロントエンドとバックエンドのやり取りを結び付けます。難しいのは、バックエンドデータを取得し、データのリンクを防ぐことです。

2. 技術的な詳細

1. インターフェースからバックエンドデータを取得する

（１）バックエンドから送信されるデータの種類を慎重に確認してください。重要なのは、配列と単一のデータを区別することです。バックエンドのリクエストメソッドを確認し、post と get を区別します。

（２）まず、バックエンドから送信されたデータを受信するために、xxxData:[]配列または変数xxxData:<type>をdataに返します。

（３）メソッド内にリクエスト関数を定義します。例えば関数名をupdateと定義します。リクエスト関数で最も重要なことは、API を介してバックエンド データを取得するためのリクエスト ステートメントです。

{params:this.xxx} には、渡されたパラメータが入力されます。

取得時に、params はすべてのパラメータの転送を制御するキーワードとして使用されます。たとえば、パラメータの名前が id で、値が data で宣言された値 myId である場合、get 要求ステートメントは次のように記述できます。

アップデート（）{
      this.$http.get(baseURL+`api/condition`,{params:{id:this.myId}}).then(function(res){
        this.memberData = res.body;
     });
},

投稿時に params キーワードを追加する必要はありません。直接書くと次のようになります:

アップデート（）{
      this.$http.get(baseURL+`api/condition`,{id:this.myId}).then(function(res){
        this.memberData = res.body;
     });
},

返されるパラメータは、その後の匿名関数内にあります。

ここで、baseURL はプロジェクトのパスです。プロジェクトがサーバー上にデプロイされている場合、一般的な形式は www.XXX.com/プロジェクト名です。次の api は、バックエンドによってカプセル化された API インターフェイスです。

フロントエンドで定義された変数は、多くの場合、api/condition に表示されます。値を渡すときに直接記述すると、インターフェイス アドレスの一部になります。内部値を表すには、${} を使用して値を取得します。例えば：

console.info(`みなさんこんにちは。私の名前は${name}です。今年で${age}歳になります`)
// console.info('みなさんこんにちは。私の名前は ' + name + '、今年は ' + age + ' 歳です') と同等です

（４）このとき、リクエスト操作は呼び出されずデフォルトで実行されるため、マウント時にはリアルタイムで実行する必要がある。

全体的なコードの表示は次のとおりです。

<スクリプト>
    エクスポートデフォルト{
        データ（）{
            memberData[], // 受信配列がバックエンドデータを格納するのを待機中},
        マウントされた(){
            this.update();//HTML が読み込まれた後、バックエンドのデータをページに同期して表示するのと同じになります},
        方法:{
            アップデート（）{
                  this.$http.get(`/api/project/${this.$store.state.project.id}`, {
                      project_id:this.$store.state.project.id、
                    }).then(doc => {
                          var コード = doc.data.status;
                          var msg = doc.data.msg;
                      if (code == 0){//リクエストは成功し、異なるステータスコードの戻り値に応じて対応するアクションを実行できます。this.memberData = doc.data.data.member//この配列はバックエンドデータに保存されます}			
                  })
            },
        },
    };
</スクリプト>

上記の例では、doc は doc.data から始まる返されたパラメータを受け取ります。バックエンドから送信されるデータはデータ構造を持っているため、その中のメンバーデータを取得するために .data が再度使用されます。

注: データの取得方法を初めて学習したとき、リクエスト URL を誤って一重引用符 (') で引用してしまいました。ここでは、単一のバッククォート (`) が使用されています。

Vue プログラミングを使用する場合、コンポーネントにバインドされたイベントに着信イベント名文字列/文字列パラメータがある場合、一重引用符と二重引用符のみを使用すると文字列が未定義になります。このとき、一重引用符を使用する必要があります。

バックエンド プロジェクトのドキュメントを比較します。

2. フロントエンドとバックエンドの価値伝達の相互作用

フロントエンドからバックエンドに値を渡すという概念は、先ほど述べたパラメータを運ぶという概念と同じであり、方法も同じです。ただし、違いは、これは主にフロントエンドからバックエンドにパラメータを渡すインタラクションであるため、パラメータが多いとコードが長くなりすぎて読み書きが面倒になりやすいことです。これにより、中間変数構造を構築し、値を均一に渡すことができるため、1 つのパラメータのみを入力する必要があります。例えば：

var obj ={//すべてのパラメータをまとめます project_id:this.$store.state.project.id,
    id:this.id、
    仕上げ: チェック済み、
    名前:this.flowName
}
this.$http.post(`/api/project/${this.$store.state.project.id}/task/update`, obj)//直接的な値転送のコレクション。then(doc => {
            var コード = doc.data.status;
            var msg = doc.data.msg;
			(コード == 0)の場合{
				this.update()//バックエンドデータを更新した後、フロントエンドを自動的に更新し、外観を変更します }
    		それ以外{
					this.$alert(msg,'false')
			}
	});

3. 取得したデータを表示する

データの取得と比較すると、データの表示ははるかに簡単です。

まず、バックエンドから送信されるデータは、多層構造またはコレクションである必要があるため、大きな配列を使用してバックエンド データを受信する場合は、データの戻り値に表示する必要があるいくつかの特定の変数を宣言する必要があります。バックグラウンド データは、フロントエンドで使用される前に、フロントエンド変数に明確に保存されている必要があります。配列内のデータを再度分離します。例えば：

getTaskData:関数(){
	this.$http.get(`/api/project/${this.$store.state.project.id}/task/info? id=${this.messageId}`, //バックエンドによって提供される URL によると、? の後のパラメータは ${} と記述する必要があります。
        {パラメータ:{プロジェクト ID:this.$store.state.project.id、タスク ID:this.messageId}})
        .then(doc=>{
            if(doc.data.data){//データを受信した場合にのみ取得できます。空の場合、渡されたデータの下で構造体内のサブ変数を再度検索するときにエラーが発生します。
                this.taskData=doc.data.data;//いわゆる全体的な大きな配列には、送信されたすべてのデータが含まれます this.defaultChecked=this.taskData.finish;//送信されたデータ構造を細分化し、宣言された変数に格納します this.taskRemarks=this.taskData.remarks;   
            }                  
            それ以外
                this.taskData = null;
            }).catch(err=>{//エラーの処理方法 this.$alert("不明なエラー", "false"); //サーバーはまだセットアップされていません })                
},

データの受信に初めて触れたとき、疑問に思ったことがあります。次のような「サブデータ」を取得する方法がわかりませんでした。

特定のデータを取得した後、それを HTML で表示したいと思います。一般的に、変数またはそれが表す情報は、HTML タグに挿入することで Web ページに表示されます。属性値としての変数は、v-bind を使用して実装する必要があります。 v-bind はデータと要素属性をバインドするために使用されます。例えば：

<a href="myHome.com" rel="external nofollow" >OK</a>

href 属性の値をリアルタイムで更新する場合は、カスタム変数をバインドする必要があり、二重引用符で囲まれた変数は文字列として扱われます。現時点では、これを実現するには v-bind を使用する必要があります。バインド後、対応する値が vue データ内で見つかる必要があります。コンソールで URL を変更すると、対応するものも変更されます。同様に、画像の src 属性と class 属性をバインドすることもできます。

//ここで url はデータで返されるカスタム変数で、リンク文字列を格納します //url: "MyHome.com",
<a v-bind:href="url" rel="外部 nofollow" rel="外部 nofollow" >OK</a>
// 省略形 (属性として変数名が必要な場合は、属性の前にコロンを追加するだけです)
<a :href="url" rel="外部 nofollow" rel="外部 nofollow" >OK</a>

最初、ページの表示データをリアルタイムに変更したい、つまりバックエンドから送られてきたデータに応じてページの表示タグの属性を変更したいと思ったとき、要素の表示を制御するために誤って DOM を使用していました。これまで Vue に触れたことがなかったため、インターフェース要素の変更に対する認識は「document.getElementById('xxx').<attribute>=xxx」の段階にとどまっています。これにより、コードが煩雑で非効率になり、コードの結合度が高くなります。

4. データのリンクを防ぐ

タスク パネル モジュールでは、クリックごとに異なるタスクの詳細を表示するには、各タスクの一意の ID を渡す必要があります。詳細を表示した後、情報を変更する機能があります。ここでランダムに変更すると、他のタスクの情報に影響を与え、情報の混乱を引き起こす可能性があります。主な理由は、最初にすべてのコンポーネントの変更を監視したことです。たとえば、タスクの緊急度が変更されると、次のコードが呼び出されます。

onFlowPri(pri){
			this.taskpriority = pri
			これ.$http
         .post(`/api/project/${this.$store.state.project.id}/task/update`,{//緊急度が変わると、データがバックエンドに転送されます。1つの変更だけですべてのデータが変更されます。この時点で、他の古いデータの転送で問題が発生します。project_id:this.$store.state.project.id,
				id:this.id、
				備考:this.flowMarks、
				名前:this.flowName、
				終了:this.finish、
				優先度:pri、
			})
         .then(doc => {
            var コード = doc.data.status;
            var msg = doc.data.msg;
				(コード == 0)の場合{
					this.update()
				}それ以外{
					this.$alert(msg,'false')
				}
         });
},

ただし、ユーザーが変更データを保存するかどうかが不明なときに変更データを早めに送信し、積極的に監視すると、エラーが発生します。コードの複雑さが増します。特に、ユーザーが操作するデータが大量にある場合は、混乱が生じる可能性があります。良い方法は、ユーザーが確認して保存することを選択した後、フォーム全体に入力する必要があるデータをバックエンドに転送し、1 回の送信でデータの正確性を確保することです。

3. 技術的な問題

1. インターフェースの自動更新

問題の説明: ユーザーが特定の機能のプロパティを変更すると、インターフェイスに表示されるデータまたはコンポーネントがリアルタイムで変更されないため、ユーザーはページ全体を手動で更新する必要があります。

解決策: まず、インターフェイスの読み込みは、表示用のバックグラウンド データを取得するためにマウントされたメソッドで定義されたメソッド (ここでは、メソッドの名前は通常 update) に依存します。フック関数として、バックエンドに要求し、データを取得し、ルーターフックを使用して何かを実行します。データの取得には主に API に依存しており、マウントまたは変更時に直接 update を呼び出すことができます。つまり、ユーザーのクリック イベントが発生すると、対応するイベントの場所で update が呼び出され、バックグラウンドから新しいデータが取得されます。

2. データ配列の取得エラー

問題の説明: バックエンドはフロントエンドに配列を渡します。フロントエンドが独自の配列を受け取った後、2 回目に新しい要素を配列にプッシュするとエラーが発生します。

問題は表面的には単純に見えます。理由は、プッシュした配列が配列として認識されないことです。しかし、受信データ型が実際にデータ内の配列として宣言されていることを何度も確認しました。このエラーの具体的な場所が見つかりません。すべてのエラーはランタイム キャッシュから読み取られ、ソース ファイルはマップされません。それは形而上学的な質問です。

解決策: プロジェクトを選択します。とても簡単です。当製品はプロジェクト、つまりプロジェクトIDを選択してデータをバックグラウンドに送信するものです。そのため、エラーメッセージが不明瞭な場合は、情報が読み取られないなどの問題がないか確認してください。

3. 値の送信と表示（時間の場合）

問題の説明: フロントエンドとバックエンドのデータ相互作用におけるより複雑な問題は、時間が DateTime 型の値として渡される場合のデータ型変換です。また、時間セレクターを使用すると、コンポーネント内の時間は渡された値の時間として表示されます。

図に示すように、時間設定位置に表示される時間は間違っていますが、コンソールはバックグラウンドから渡された正しい時間を出力しています。つまり、時間選択ボックスには時間をリアルタイムで表示することはできません。

「Set Time」などの時間選択ボックスから時間を変更してバックエンドに渡すと、型の不一致の問題が発生します。つまり、String と DateTime 間の変換です。

解決策: 時間セレクターに :value 属性を追加し、moment を使用して表示される時間変数を制限します。例:

 :value="[taskDetails.t_begin の瞬間、taskDetails.t_end の瞬間)]"

時間フォーマット コンポーネント moment の使用: スクリプトにコンポーネントをインポートし、メソッドで moment を宣言する必要があります。

<script>「moment」から moment をインポートします</script>

時間データをバックエンドに渡す場合は、文字列型のデータを変換する必要があります。つまり、toDateTime 関数を宣言して定義する必要があります。

関数 toDateTime(time) {
	var date = new Date(time);
	var Y = date.getFullYear() + '-';
	var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
	var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
	var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
	var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
	var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
	strDate = Y+M+D+h+m+s;
	strDate を返します。
}

値を渡すときに直接正規化します。

IV. 結論

1. Vue で値を送信するのは比較的簡単な部分です。主に、受信を待つ変数を準備し、データが正常に読み込まれたことを確認することです。データのタイプにも注意する必要があり、バックエンドから送信されるデータを慎重にチェックする必要があります。 Vue のフロントエンドとバックエンドのインタラクションは、比較的シンプルで実用的なテンプレートで実装されているため、習得が容易です。

2. データを表示するときは、さまざまなコンポーネントの表示方法を理解する必要があります。項目ループ表示を使用するものもあれば、直接引用するものもありますが、v-bind を使用して変数の影響表示を実現するものも多くあります。

3. このプロジェクトの開発では、タスクパネルの開発とコードの記述が非常に複雑で混乱しやすいです。ポップアップウィンドウとパネルが複数あり、ユーザーが入力したコンテンツとバックグラウンドから受信して表示されるコンテンツが異なり、それらの間のデータ連携が非常にひどいためです。注意しないと、新しいパネルデータが以前に表示された古いデータを上書きしやすくなります。特に、ユーザーの参加を必要とするフォームなどのコンポーネントでは、インタラクティブなサブコンポーネントをそれぞれリアルタイムで監視する必要があります。ただし、すべてのサブコンポーネントがタイムリーなフィードバックを必要とするわけではないことに注意することが重要です。そうでないと、不要な関連アクションが情報の最終的な保存に影響を与える可能性があります。特に、ワ​​ンクリックリセットを必要とするキャンセル機能付きのフォームの場合、対応するアクションを早めに実行すると逆効果になります。

上記は、Vue フロントエンドとバックエンドデータの相互作用と表示を理解する方法の詳細です。Vue フロントエンドとバックエンドデータの相互作用と表示の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。