関連プロジェクト: フロントエンド

タスク: HTML、CSS、JS、jQuery を使用して CRUD バックエンドの UI を作成する必要があります。オンラインゲームのアカウントを管理するための管理パネルを作成します。

1. リポジトリからフォーク: https://github.com/CodeGymCC/project-frontend.git
2. プロジェクトのバージョンをコンピュータにダウンロードします。
3. Tomcat を自分でダウンロードします: https://tomcat.apache.org/download-90.cgi。重要: Tomcat にはバージョン 10ではなく、バージョン 9 が必要です。
4. Idea でアプリケーションの起動を構成します: Alt + Shift + F9 -> 構成の編集… -> Alt + insert -> トム (検索バー内) -> ローカル。
• その後、クリックしてCONFIGURE、Tomcat を含むアーカイブがダウンロードされ解凍された場所を指定する必要があります。
• タブ内Deployment: Alt + 挿入 -> アーティファクト… -> rpg:war 爆発 -> OK。
• フィールド内Application context: / (スラッシュ) のみを残します。
• を押しますAPPLY。
• 設定ウィンドウを閉じます。
5. アプリケーションを起動します。これを行うには: Alt + Shift + F9 -> (構成名、「App」という名前を付けました) -> 実行します。
6. アプリケーションをデプロイすると、構成中に選択したブラウザーで新しいタブが開きます。サーバーは構成されています。次に、2 つのファイルを操作する必要があります。
• <project_dir>/src/main/webapp/html/my.html- マークアップとスクリプトが存在します。
• <project_dir>/src/main/webapp/css/my.css– ここにスタイルがあります。スタイルに関するすべてはあなた次第であり、スタイルに対する要件はありません。
7. マークアップ ( my.html ) に、列の名前を指定するテーブルを追加します (ID を指定することを忘れないでください)。
• #
• 名前
• タイトル
• 人種
• 職業
• レベル
• 誕生日
• 禁止された
8. ペアタグを追加します<script>- ここに関数を記述します。
9. 最初の関数は、URL に GET リクエストを送信し"/rest/players"、リストを取得します。結果は段落 7 のテーブルに追加する必要があります (ここでテーブル ID が役に立ちます)。すべてを正しく行った場合、サーバーを再起動すると、ページに 4 行の表が表示されます。最初の行には列の名前が表示され、残りにはサーバーから取得したデータが表示されます。
10. ここで、表にセルの境界線を追加することが望ましいです。そうしないと、一般に情報が読めなくなります。
11. それではページングに移りましょう。このためには次のものが必要です。
• テーブルの下に、たとえば<div>ページング ボタンがあるセクションを追加します。
• サーバー上のアカウントの総数を返す GET リクエストをサーバーに送信する関数を追加します。URL: "/rest/players/count"。
• 3 ～ 4 つの数値、一度に表示するアカウントの数のドロップダウン リストを追加します。数値は 3 ～ 20 の範囲にする必要があります。
• アカウントの一覧を表示する方法 (p. 9) に、すべてのアカウントを表示できるように、1 ページあたりのアカウント数に必要なページ数の計算を追加します。
12. アカウントのリストを表示する関数に、表示されるページの番号を担当するパラメーターを追加します。URL を修正して、「pageNumber」と「pageSize」をクエリ パラメータとして渡します。これで、ドロップダウン リストでページごとの数を変更すると、要求されたアカウント数が表示されるようになります。
13. 次に、現在のページ番号に色を付けてみましょう。そうしないと不便です...
14. テーブルにさらに 2 つの列 (編集と削除) を追加しましょう。各行に、各エントリの編集と削除を担当するアイコンを追加しましょう。にある画像を使用することも<project_dir>/src/main/webapp/img/、独自の画像を使用することもできます。
15. アカウントの削除を担当する関数を作成します。これを行うには、DELETE リクエストを URL のサーバーに送信します"/rest/players/{id}"。カート画像をクリックすると、この関数が呼び出されます。通話後は、現在のページでアカウントのリストを更新することを忘れないでください。
• id=23のアカウントを削除する前に
• id=23のアカウントを削除した後。バスケット以外のボタンは押されていないことに注意してください。
16. 次に、アカウントの編集を担当する関数を作成します。クリックしたら「削除」ボタンを非表示にし、「編集」ボタンの絵を「保存」に変更しましょう。
17. 次に、アカウントを編集する機能を追加しましょう。「編集」ボタンをクリックすると、画像を変更するだけでなく、フィールドを編集可能にする必要があります。
• 名前
• タイトル
• 人種
• 職業
• 禁止された

編集フィールドの値はアカウント内の値である必要があることに注意してください。

18. 「保存」ボタンをクリックして変更を送信します。これを行うには、POST リクエストを URL に送信し“/rest/players/{id}”、5 つのフィールドすべての値をリクエスト本文として渡す必要があります。この値は JSON 形式で変更できます。JSON.stringify({...})を使用します。変更後は、現在のページのデータを忘れずにリロードしてください。
19. したがって、現時点では「C」（作成）を除くすべてを CRUD から実行する必要があります。ページング ボタンの後に、ここで新しいアカウントを作成できることを示す水平線とテキストを追加します。さらに、アカウント パラメーターのテキスト ブロックと入力フィールドを追加します。
• 名前 - 1 ～ 12 文字のテキスト。
• タイトル - 1 ～ 30 文字のテキスト。
• Race - ドロップダウン リスト。有効な値については API を参照してください。
• 職業 - ドロップダウン リスト。有効な値については API を参照してください。
• レベルは 0 から 100 までの数値です。
• 誕生日 - 日付 (<input type="date" ...)。
• Banned はブール値です。
20. ここでボタンを追加します。クリックすると、入力されたすべてのデータがサーバーに送信されます。URL への POST リクエストを使用します/rest/players。サーバーの応答後、データ入力フィールドをクリアし、現在のページでアカウントのリストを再リクエストすることを忘れないでください。
21. スタイルを通じて「美しさ」を追加できるようになりました。ここでのすべてはあなた次第です。私は次のようにそれを得ました：

便利: サーバー API:

選手リストを取得する

Code: 200 OK
Code: 200 OK
Content: [
 {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 },
 …
]

public enum Race {
    HUMAN,
    DWARF,
    ELF,
    GIANT,
    ORC,
    TROLL,
    HOBBIT
}

public enum Profession {
    WARRIOR,
    ROGUE,
    SORCERER,
    CLERIC,
    PALADIN,
    NAZGUL,
    WARLOCK,
    DRUID
}

{
  “name”:[String],       --optional
  “title”:[String],     --optional
  “race”:[Race], --optional
  “profession”:[Profession], --optional
  “banned”:[Boolean]    --optional
}

Code: 200 OK
Content: {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 }

{
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean], --optional, default=false
  “level”:[Integer]
}

Code: 200 OK
Content: {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 },

プロジェクト分析。完成後も見てね！