一个“保存”按钮同时存在“增删改”三种操作，该如何去实现？

 

稿件来源：阿里云开发者社区

 

一般情况下，对表格中的数据进行“增删改”操作，都是直接操作数据库。现在有些项目因为设计或者优化的缘故，不对表格中的数据进行“增删改”，而是通过最后“保存”按钮的操作，一次性将数据传至服务器，由服务器对数据进行“增删改”。

以下通过给用户分配角色这样的功能进行说明。

操作界面大致如下（直接手画，略显粗糙，能看明白就行）：

 

说明：

• “新增”、“修改”和“删除”都不是直接操作数据库。
• 点击“保存”时才将数据传给服务器。
• 此项目中的删除均为逻辑删除（即，只是对数据打上“删除”状态的标记），不是物理删除。
• 文中说的“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 对象中的数据进行删除。

优缺点：

• 优点：影响的数据量较少，后端容易实现。
• 缺点：前端实现较难。