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












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







有用: 服务器 API:
获取玩家列表
网址 | /休息/球员 |
方法 | 可选:整数 pageNumber、整数 pageSize |
数据参数 | 没有任何 |
成功响应 |
|
笔记 | pageNumber - 负责使用分页时显示页数的参数。编号从零开始。 pageSize - 负责分页时一页结果数的参数
|
获取玩家数量
网址 | /休息/玩家/计数 |
方法 | 得到 |
网址参数 | 没有任何 |
数据参数 | 没有任何 |
成功响应 | 代码: 200 OK 内容:整数 |
笔记 |
删除播放器
网址 | /休息/玩家/{id} |
方法 | 删除 |
网址参数 | ID |
数据参数 | 没有任何 |
成功响应 | 代码: 200 OK |
笔记 | 如果未找到播放器,则响应是带有 404 代码的错误。 如果 id 值无效,响应将是带有 400 代码的错误。 |
更新播放器
网址 | /休息/玩家/{id} |
方法 | 邮政 |
网址参数 | ID |
数据参数 |
|
成功响应 |
|
笔记 | 仅更新不为空的字段。 如果在数据库中未找到播放器,则响应为 404 代码错误。 如果 id 值无效,则响应是带有 400 代码的错误。 |
创建播放器
网址 | /休息/球员 |
方法 | 邮政 |
网址参数 | 没有任何 |
数据参数 |
|
成功响应 |
|
笔记 | 如果出现以下情况,我们将无法创建玩家:
在上述所有情况下,响应都是带有 400 代码的错误。 |
项目分析。完成后观看!
GO TO FULL VERSION