HRS--人事システム (Springboot+vue)--基本アップグレード--(5) 現在のレコードを編集します

今日の開発の最初のステップ: 現在のレコードの [編集] をクリックしてデータを変更します。

1. まず [編集] をクリックし、現在のアイテムのデータを取得します。小さなウィンドウがポップアップ表示されます。

 このウィンドウに見覚えはありますか? はい。このウィンドウは、[追加] ボタンから表示されるウィンドウと同じです。

バグ 1 : したがって、今回の最初のバグが発生しました。つまり、[追加] ボタンをクリックした後、空白のウィンドウが表示されるはずですが、[編集] ボタンからデータを取得してしまいました。

解決策:変更方法は? 新しいボタンをクリックするときに、現在のウィンドウのデータを空に設定します。

 

2. ウィンドウが使用されているため、自然な送信確認ボタンは、add/employInfo インターフェイスである同じものを使用します。ここで変更が行われ、インターフェイス アドレスがmodify/employInfo に変更されます。この統合された外部インターフェイスでは、データの追加、削除、変更の操作において、外部に公開できるインターフェイスは 1 つだけです。

イニシャル:

 変換後:

バグ 2: 編集時の時刻選択には時、分、秒が含まれますが、バックエンドとデータベースの両方で日付タイプを使用して、年、月、日までの時間を保存します。認識できない日付が発生しました

 

  

解決策: UTCと現地時間の変換問題があるため、時、分、秒のデータを保持する統一形式に変更しましたので、Vueの要素タグでdatatimeを選択し、日付型の形式を変更しましたデータベースのデータ時間も

 時刻データの読み込み時にも型変換が行われます。

 最終的な表示は正常です

 

 ステップ 2: 現在のレコードの [削除] ボタン

バグ 3:削除後、ページは自動的に更新されず、既存のデータが再生成されます。 

ネットでいくつか方法を調べてみましたが、書き込み時にエラーが報告されるか、効果があまり良くありませんでしたので、まずはこれ(location.reload())を使って一時的に更新してみます。また、ページ全体の更新は部分的な更新ではありません。

 

 

 

おすすめ

転載: blog.csdn.net/weixin_42450130/article/details/132521073