おおよそのプロセス

まずフロントエンドページを実装する必要がありますが、肉眼で見えるページが必要です。
JS の構文をマスターする必要があります。 1 JS を通じてイベントをバインドする必要があるため (たとえば、ボタンをクリックしてサーバーにデータを送信したり、サーバーからリソースを取得したりできます) 2 ajax を通じてサーバーにリクエストを送信します。 JS を介したリクエスト3 DOM ツリーを変更することで、ページを変更できます
JSON (コンテンツタイプ) 応答形式 (シリアル番号と逆シリアル化) を学習します。

HTML

フォームフォームを通じてデータをサーバーに送信し、/save-message.do の動的リソースに送信します。JS では、送信ボタンを選択してイベントにバインドします。
テーブルはデータを表示する場所であり、フロントエンドのスタイルを変更したい場合は、このテーブルの DOM ツリーを変更することで変更できます。

tbodyのDOM構造を変更することでページの内容を変更しますが、ここで注意しなければならないのはフロントエンドとバックエンドのデータパターンが一致していることです。

formタグを使用して送信する

アドレスバーに「/message-list.html」と入力します。
1 ブラウザは /meaasge-list.html ドキュメントリソースをロードします。
2<scripts src="/messgae-list.js><scripts> がブラウザの解析プロセス中に見つかりました
3 ブラウザはGET/message-list.jsのスクリプトリソースを取得します
4 /message-list.json の動的リソースを呼び出して、リストの情報を取得する JS コードの実行を開始します (初期化されたリストには 3 つの情報があるため、これら 3 つの情報が最初に返されます)
5. 応答後、JS コードを続行し、xhr のロードイベントを駆動し、データを HTML に追加します。DOM ツリーが変更され、ページコンテンツが変更されます。
6 フォームから送信します。送信ボタンをクリックすると、post/save-message.do のリソースが投稿され、フロントエンドからの入力が表示されます。
7. リストのコンテナに情報が保存されますが、リダイレクトを利用しているため、/message-list.htmにアクセスし、上記の情報取得手順(1～5)を繰り返すことで、入力した情報が表示されますフロントエンドフォームで

1はフォーム形式を採用しています。フォームの後処理では、ブラウザが指定されたリソースに自動的にリダイレクトされるように、リダイレクトすることをお勧めします。
2 ajax + リクエスト本文を使用します: JSON の形式で、ajax の後処理の場合、JS の後処理を容易にするために JSON を返すことをお勧めします。JS はユーザーの入力を読み取り、コンテンツを送信するリクエストを開始し、継続的に結果に基づいてページを変更するか、ページをリロードします。