相关项目：前端

任务：您需要使用 HTML、CSS、JS、jQuery 为 CRUD 后端制作 UI。我们将制作一个用于管理在线游戏帐户的管理面板。

1. 从存储库中分叉： https: //github.com/vasylmalik/project-front.git
2. 将您的项目版本下载到您的计算机。
3. 自己下载 Tomcat： https: //tomcat.apache.org/download-90.cgi。重要的: Tomcat 需要版本 9，而不是 10。
4. 通过 Idea 配置应用程序启动：Alt + Shift + F9 -> Edit Configurations… -> Alt + insert -> tom（在搜索栏中）-> Local。
• 之后，您需要单击CONFIGURE并指示下载和解压缩带有 Tomcat 的存档的位置。
• 在选项卡中Deployment：Alt + insert -> Artifact... -> rpg:war exploded -> OK。
• 在字段中Application context：仅保留/ （正斜杠）。
• 按APPLY。
• 关闭设置窗口。
5. 启动应用程序。为此：Alt + Shift + F9 ->（配置名称，我将其命名为“App”）-> 运行。
6. 部署应用程序后，将在配置期间选择的浏览器中打开一个新选项卡。很好，服务器已经配置好了，接下来你需要处理两个文件：
• <project_dir>/src/main/webapp/html/my.html- 会有标记和脚本。
• <project_dir>/src/main/webapp/css/my.css– 这里将是样式。关于样式的一切都取决于您，对它们没有任何要求。
7. 在标记 ( my.html ) 中添加一个表（不要忘记给它一个 id），在其中指定列的名称：
• #
• 姓名
• 标题
• 种族
• 职业
• 等级
• 生日
• 禁止
8. 添加一个 pair 标签<script>——我们将在这里编写函数。
9. 第一个函数应该向 URL 发送 GET 请求"/rest/players"- 获取列表。结果必须添加到第 7 段的表中（这是表 ID 派上用场的地方）。如果一切正确，在重新启动服务器后，您的页面上将显示一个 4 行的表格。第一行 - 列的名称，其余部分 - 来自服务器的数据。
10. 现在，最好给表格加上单元格边框，否则信息一般是不可读的。
11. 现在让我们继续进行分页。为此你需要：
• 在表格下，添加一个部分，例如，<div>其中将有分页按钮。
• 添加一个函数，该函数将向服务器发送 GET 请求，返回服务器上的帐户总数。网址："/rest/players/count"。
• 添加3-4个数值的下拉列表，一次显示多少个账户。数字必须介于 3 和 20 之间（含 3 和 20）。
• 在显示帐户列表的方法（第 9 页）中，我们将添加计算每页给定帐户数所需的页数，以便您可以查看所有帐户。
12. 在显示账户列表的函数中，添加一个参数，该参数将负责要显示的页面数。更正 URL，使其将“pageNumber”和“pageSize”作为查询参数传递。现在，在下拉列表中更改每页数时，应显示请求的帐户数：
13. 现在让我们对当前页码进行着色，否则很不方便......
14. 让我们向表中再添加 2 列：编辑和删除。对于每一行，让我们添加负责编辑和删除每个条目的图标。您可以使用 中的图片<project_dir>/src/main/webapp/img/，也可以使用您自己的图片。
15. 编写一个函数，负责删除一个帐户。为此，请向位于 URL 的服务器发送一个 DELETE 请求"/rest/players/{id}"。单击购物车图像时，调用此函数。通话后 - 不要忘记更新当前页面上的帐户列表。
• 在删除id=23的帐户之前
• 删除id=23的帐户后。请注意，除了篮子外，没有按下任何按钮。
16. 现在编写一个函数，负责编辑一个帐户。当你点击它时，让我们隐藏“删除”按钮，并将“编辑”按钮的图片更改为“保存”。
17. 现在让我们添加用于编辑帐户的功能。通过单击“编辑”按钮，除了更改图片外，您还需要使字段可编辑：
• 姓名
• 标题
• 种族
• 职业
• 禁止

请注意，编辑字段中的值必须是帐户中的值。

18. 现在我们将通过单击“保存”按钮发送更改。为此，需要向该URL发送一个POST请求“/rest/players/{id}”，并将所有五个字段的值作为请求体传递，可以以JSON的形式进行更改。使用JSON.stringify({...}); 更改后，不要忘记重新加载当前页面的数据。
19. 所以，除了“C”（创建）之外，目前一切都应该从 CRUD 完成。在分页按钮之后，添加一条水平线和文本，说明您可以在此处创建一个新帐户。此外，为帐户参数添加文本块和输入字段：
• 名称 - 文本，从 1 到 12 个字符。
• 标题 - 文本，从 1 到 30 个字符。
• 种族 - 下拉列表，请参阅 API 了解有效值。
• 职业 - 下拉列表，请参阅 API 了解有效值。
• 级别是一个从 0 到 100 的数字。
• 生日 - 日期（<input type="date" ...）。
• 禁止是一个布尔值。
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]
 },

项目分析。完成后观看！