一個“儲存”按鈕同時存在“增刪改”三種操作，該如何去實現？

稿件來源： https://developer.aliyun.com/article/710160

一般情況下，對錶格中的資料進行 “ 增刪改 ” 操作，都是直接運算元據庫。現在有些專案因為設計或者最佳化的緣故，不對錶格中的資料進行 “ 增刪改 ” ，而是透過最後 “ 儲存 ” 按鈕的操作，一次性將資料傳至伺服器，由伺服器對資料進行 “ 增刪改 ” 。

以下透過給使用者分配角色這樣的功能進行說明。

操作介面大致如下（直接手畫，略顯粗糙，能看明白就行）：

說明：

·          “ 新增 ” 、 “ 修改 ” 和 “ 刪除 ” 都不是直接運算元據庫。

·          點選 “ 儲存 ” 時才將資料傳給伺服器。

·          此專案中的刪除均為邏輯刪除（即，只是對資料打上 “ 刪除 ” 狀態的標記），不是物理刪除。

·          文中說的 “ID” 為使用者角色的主鍵。

第一種方法：先刪後增

·          直接刪除使用者下的所有角色，將前端傳過來的資料統一新增。

優缺點：

·          優點：邏輯簡單，容易實現。

·          缺點：會產生大量的刪除資料。

第二種方法：透過有無 ID 進行操作判斷

·          過濾資料：透過 stream 過濾出無 ID 的資料和有 ID 的資料。

·          新增：無 ID 的資料均為新增的資料，在伺服器中直接對這些資料進行新增操作即可。

·          修改和刪除：查詢出使用者所有的角色，將查詢出來的 ID （ ID_A ）與前端傳過來的有 ID 的資料（ ID_B ）進行比對，交集（即 ID_A 與 ID_B 都有的資料）即為修改，差集（即 ID_A 有的資料，在 ID_B 中沒有）即為刪除。

優缺點：

·          優點：影響的資料量較少

·          缺點：實現起來比較複雜

第三種方法：前端部分分類

·          前端分類：前端將被邏輯刪除的資料儲存在 delete 物件中。

·          資料上傳：將表格中的資料（包含有新增的資料和修改的資料）和 delete 物件中的資料一起上傳至伺服器。

·          後端分類：將表格中的資料分為有 ID 的資料和無 ID 的資料。

·          增刪改操作：無 ID 的資料進行新增，有 ID 的資料進行修改， delete 物件中的資料進行刪除。

優缺點：

·          優點：影響的資料量較少，前端的分類操作比較容易，後端的分類操作和增刪改操作也比較容易。

·          缺點：後端仍需要進行分類操作。

第四種方法：前端全分類

·          前端分類：前端將需要進行新增、修改和刪除的資料分別放到 add 物件、 update 物件 和 delete 物件中。

·          資料上傳：將分類之後的資料上傳至伺服器。

·          後端增刪改操作：對 add 物件中的資料進行新增，對 update 物件中的資料進行修改，對 delete 物件中的資料進行刪除。

優缺點：

·          優點：影響的資料量較少，後端容易實現。

·          缺點：前端實現較難。