springboot vue プロジェクト管理のフロントエンドとバックエンドに編集機能を実装する方法

springboot vue に基づいたテスト プラットフォーム開発

1. 編集ページを開いてデータを表示します

1. 編集ボタン

前にコピーしたテーブル コンポーネントには 2 つのボタンがあります。いずれかを[編集]ボタンに変更します。

クリック イベント handleUpdate(scope.row) をバインドします。この row は現在のレコードのオブジェクトです。コンソールを追加して印刷します。

2. データ表示を処理するための handleUpdate メソッドを作成します。

現在のレコードのプロジェクト名と説明をクエリし、それをフォームに割り当てる必要があります。データを表示します。ここでは、プロジェクト ID (一意性) に基づいてクエリを実行する必要があります。

バックエンド プロジェクト リストのインターフェイスを変更して、プロジェクト ID に基づくデータのクエリをサポートします:

handleUpdate でインターフェイスを呼び出します:

this.dialogFormVisible = true の場合、まずダイアログ ボックスを開き、インターフェイスにパラメーターを渡すためのデータの projectQuery オブジェクトに ID を追加します。次に、row.id を各行の ID に this.projectQuery.id に割り当てます。最後にインターフェイスをリクエストします。返されたリストには要素が 1 つだけあり、projectName を入力します。この結果の と description をフォームに割り当てることができます。

テスト:

2. 編集ページのコンテンツを保存します

1. バックエンドに更新インターフェイスを追加します

編集ページのフォームは新規ページと同じなので、新たに記述する必要はありません。したがって、作成時と編集時にそれぞれ対応する API を呼び出すようにフォームにいくつかの変更を加える必要があります。

新しいインターフェイスはすでに存在します。更新されたインターフェイスを追加して、ProjectService への書き込みを続けます。

対応する外部コントローラー プロセッサもあります:

アップデート インターフェイスをセルフテストすると、正常に動作します。

2. フロントエンド ページの変更

これが新しいフォームか編集フォームかを区別するには、フィールドを追加する必要があります。それを識別するためのデータ: dialogStatus。

フォームの [保存ボタン] を変更します。クリックすると、dialogStatus の値を使用して、新しいメソッドを呼び出すか更新されたメソッドを呼び出すかを決定します。 :

dialogStatus が "create" と等しい場合は追加され、それ以外の場合は変更されます。

次に、編集ページ handleUpdate のデータ表示の処理方法も変更され、dialogStatus に割り当てられる値は update になります。

バックエンド更新インターフェイスを呼び出すための新しい updateData メソッドが追加されました。ただし、インターフェイス リクエストを js ファイルに追加してから、それを vue ページ ファイルにインポートすることを忘れないでください。

次に、updateData メソッドのコードを完成させます。

ここでも、 design [ [項目の追加]ボタンに変更します。[編集]ボタンをクリックしたため、dialogStatusはupdateと等しくなります。当然、追加をクリックすると、値が代入される必要があります。 create. add() メソッドを呼び出すことができます。

ただし、前の [項目の追加] ボタンは this.dialogFormVisible = true にバインドされているため、これら 2 つを抽出してメソッド handleAddmiddle に書き込みます。 :

次に、この新しいメソッドをバインドする新しいボタンを追加します。

最後に、機能をテストします。

以上がspringboot vue プロジェクト管理のフロントエンドとバックエンドに編集機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。