刪除 Oracle JET 虛擬 DOM App 中的資料記錄

簡介

本教學課程示範如何使用 Oracle JavaScript Extension Toolkit (Oracle JET) 虛擬 DOM 應用程式來刪除現有資料記錄，然後將變更提交至 REST 服務。

目標

在本教學課程中，您將瞭解如何刪除現有的資料記錄，並將變更提交至 REST 服務。

必備條件

作業 1：建立刪除按鈕

  1. 瀏覽至 JET-Virtual-DOM-app/src/components/ActivityItem 目錄，然後在編輯器中開啟 ItemActionsContainer.tsx 檔案。

  2. 在 Props 類型別名中，定義額外的 delete 特性。

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

  3. 尋找 <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>

  4. 儲存 ItemActionsContainer.tsx 檔案。

    您的程式碼看起來應該類似這個 final-ItemActionsContainer.tsx.txt 檔案。

作業 2：處理刪除記錄

使用擷取 API 和 HTTP DELETE 方法，從 REST 服務刪除記錄。使用 RESTDataProvider 的 mutate 方法來更新您的 RESTDataProvider 執行處理。

  1. 瀏覽至 JET-Virtual-DOM-app/src/components/ActivityItem 目錄，然後在編輯器中開啟 ActivityItemContainer.tsx 檔案。

  2. 在 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.");
   }
  };

  3. 在 return 敘述句中，以 delete 屬性更新 ItemActionsContainer 元素。

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

  4. 儲存 ActivityItemContainer.tsx 檔案。

    您的程式碼看起來應該類似這個 final-delete-ActivityItemContainer.tsx.txt 檔案。

工作 3：執行虛擬 DOM 應用程式並刪除記錄

  1. 在終端機視窗中，執行您的虛擬 DOM 應用程式。 
    npx ojet serve

  2. 在應用程式中，按一下 Baseball 活動，然後按一下 SureFire Ball (Set of 4) 項目。

  3. 按一下刪除按鈕。即會開啟確認視窗。

  4. 然後按一下確定。

    區段會重新整理，且項目已刪除。

  5. 關閉顯示您執行中虛擬 DOM 應用程式的瀏覽器視窗或頁籤。

  6. 在終端機視窗中，按 Ctrl+C，如果出現提示，請輸入 y 以結束 Oracle JET 工具批次工作。

工作 4：(選擇性) 從回復的應用程式執行虛擬 DOM 應用程式

如果您想要從提供的程式碼執行已完成的 Oracle JET 虛擬 DOM 應用程式，可以從下載的存檔檔案回復應用程式。若要使用「去除和壓縮」的 Oracle JET 虛擬 DOM 應用程式，您必須在擷取的應用程式內還原專案相依性，包括 Oracle JET 工具和所需的程式庫和模組。

  1. 下載 JET-Virtual-DOM-app-final.zip 檔案，並將已完成的應用程式內容擷取至 JET-Virtual-DOM-app-final 目錄。
  2. 在終端機視窗中，瀏覽至 JET-Virtual-DOM-app-final 目錄並回復 Oracle JET 虛擬 DOM 應用程式。 
    npm install
  3. 等待確認。 
    Success: Restore complete

    應用程式已可執行。

  4. 在瀏覽器中執行虛擬 DOM 應用程式並進行測試。 
    npx ojet serve

  5. 關閉顯示您執行中虛擬 DOM 應用程式的瀏覽器視窗或頁籤。

  6. 在終端機視窗中，按 Ctrl+C，如果出現提示，請輸入 y 以結束 Oracle JET 工具批次工作。

下一步

本教學課程總結了此學習路徑中建置虛擬 DOM Web 應用程式的 CRUD Operations Using a REST Service 模組。

您可以前往在 Oracle JET 中設定測試環境模組中在 Oracle JET 中設定測試環境學習路徑的下一個教學課程。

您也可以返回虛擬 DOM 學習路徑的主頁面，存取建立虛擬 DOM 應用程式的所有模組，以及其他學習路徑。

其他學習資源

在 docs.oracle.com/learn 上探索其他實驗室，或在 Oracle Learning YouTube 頻道上存取更多免費學習內容。此外，請造訪 education.oracle.com/learning-explorer 以成為 Oracle Learning Explorer。

如需產品文件，請造訪 Oracle Help Center 。