删除 Oracle JET 虚拟 DOM 应用程序中的数据记录

简介

此教程演示如何使用 Oracle JavaScript Extension Toolkit (Oracle JET) 虚拟 DOM 应用程序删除现有数据记录并将更改提交到 REST 服务。

目标

在本教程中，您将学习如何删除现有数据记录并将更改提交到 REST 服务。

Prerequisites

设置为创建包括 Node.js 安装的 Oracle JET 虚拟 DOM 应用程序的开发环境
完成此学习路径中的上一教程，在 Oracle JET 虚拟 DOM 应用程序中更新数据记录
已完成的应用程序 JET-Virtual-DOM-app-final.zip （可选）下载

任务 1：创建删除按钮

导航到 JET-Virtual-DOM-app/src/components/ActivityItem 目录并在编辑器中打开 ItemActionsContainer.tsx 文件。

在 Props 类型别名中，定义其他 delete 属性。

type Props = {
    create: () => void;
    edit: () => void;
    itemSelected: Partial<Item>;
    delete: () => void;
 };

找到 <oj-button id="updateButton" 元素并在其下方添加 oj-button 元素。将 onojAction 属性设置为 {props.delete}，将 disabled 属性设置为 hideActions。

return (
   <div>
      <oj-button id="createButton" onojAction={props.create}>Create</oj-button>
      <oj-button id="updateButton" disabled={hideActions} onojAction={props.edit}>Update</oj-button>
      <oj-button id="deleteButton" disabled={hideActions} onojAction={props.delete}>Delete</oj-button>
   </div>

保存 ItemActionsContainer.tsx 文件。

您的代码应看上去类似于此 final-ItemActionsContainer.tsx.txt 文件。

任务 2：处理删除记录

使用提取 API 和 HTTP DELETE 方法从 REST 服务中删除记录。使用 RESTDataProvider 的 mutate 方法更新 RESTDataProvider 实例。

导航到 JET-Virtual-DOM-app/src/components/ActivityItem 目录并在编辑器中打开 ActivityItemContainer.tsx 文件。

在 ActivityItemContainer 函数中，在之前用于更新记录的代码下方创建一个名为 deleteItem 的方法。

此方法请求用户确认删除项，并在成功确认后创建 DELETE 请求，该请求将发送到 REST 服务。如果 DELETE 操作成功，则该方法将调用 RESTDataProvider mutate 事件以通知数据提供方使用者某个项已被删除。

const deleteItem = async () => {
  const really = confirm("Do you really want to delete this item?");
  if (really) {
    // Create and send request to REST service to delete item
    const request = new Request(`${restServerURLItems}${itemData.id}`, {
       method: "DELETE",
     });
    const response = await fetch(request);
    // Call  mutate method to notify dataprovider consumers that an 
    // item has been removed
    if (response.status === 200) {
      const removedRowKey = itemData.id;
      const removedRowMetaData = { key: removedRowKey };

      props.data?.mutate({
        remove: {
          data: [itemData.id],
          keys: new Set([removedRowKey]),
          metadata: [removedRowMetaData],
         },
       });
      } 
      else {
          alert(
             "Delete failed with status " 
             + response.status + " : " + response.statusText
          );
     }
  console.log("Deleted item.");
  } 
  else {
    console.log("OK, we canceled that delete.");
   }
  };

在 return 语句中，使用 delete 属性更新 ItemActionsContainer 元素。

 <div id="container">
     <h3>Activity Items</h3>
       <ItemActionsContainer edit={openEditDialog} delete={deleteItem} itemSelected={activityItemValue} create={openCreateDialog} />
       . . . 
 </div>

保存 ActivityItemContainer.tsx 文件。

您的代码应类似于此 final-delete-ActivityItemContainer.tsx.txt 文件。

任务 3：运行虚拟 DOM 应用程序并删除记录

在终端窗口中，运行虚拟 DOM 应用程序。
```
npx ojet serve
```
在应用程序中，单击棒球活动，然后单击 SureFire Ball (Set of 4) 项。
单击删除按钮。此时将打开确认窗口。
单击确定。

区段将刷新，并且该项已被删除。
关闭显示正在运行的虚拟 DOM 应用程序的浏览器窗口或选项卡。
在终端窗口中，按 Ctrl+C，如果出现提示，输入 y 以退出 Oracle JET 工具批处理作业。

任务 4：（可选）从恢复的应用程序运行虚拟 DOM 应用程序

如果要从提供的代码运行已完成的 Oracle JET 虚拟 DOM 应用程序，可以从下载的归档文件还原该应用程序。要使用“剥离和压缩”的 Oracle JET 虚拟 DOM 应用程序，必须在提取的应用程序中恢复项目依赖项，包括 Oracle JET 工具以及所需的库和模块。

下载 JET-Virtual-DOM-app-final.zip 文件并将已完成的应用程序的内容提取到 JET-Virtual-DOM-app-final 目录中。
在终端窗口中，导航到 JET-Virtual-DOM-app-final 目录并恢复 Oracle JET 虚拟 DOM 应用程序。
```
npm install
```
等待确认。
```
Success: Restore complete
```
该应用已就绪，可以运行。
在浏览器中运行虚拟 DOM 应用并进行测试。
```
npx ojet serve
```
关闭显示正在运行的虚拟 DOM 应用程序的浏览器窗口或选项卡。
在终端窗口中，按 Ctrl+C，如果出现提示，输入 y 以退出 Oracle JET 工具批处理作业。

后续步骤

本教程将结束此学习路径中有关构建虚拟 DOM Web 应用程序的模块 CRUD Operations Using a REST Service 。

您可以在 End-to-End Testing in Oracle JET 模块中继续学习路径中的下一个教程在 Oracle JET 中设置测试环境。

您还可以返回到虚拟 DOM 学习路径的主页，以访问有关构建虚拟 DOM 应用程序的所有模块以及其他学习路径。