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

PHPz
リリース: 2023-05-18 11:13:45
転載
1266 人が閲覧しました

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

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

1. 編集ボタン

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

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

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

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

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

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

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

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

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

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

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

テスト:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連ラベル:
ソース:yisu.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート