30分钟，你能做什么？你可以饱餐一顿；你可以简单地打扫房间；或者你可以跳刘耕宏《本草纲目》毽子练习10次。而今天，这颗葡萄将带你在30分钟内完成一套增删改查表系统的前后端搭建！在日常的系统开发中，网格是最常见的数据表现形式，网格中的“增删改查”是最常见的功能之一。因此，在日常的开发过程中，快速搭建一个表的增删改查框架将成为影响开发效率的重要环节之一。为了达到30分钟快速搭建一个表系统的目标，我们需要回顾一下我们年初文章中介绍的escom表的相关内容。什么是托管？为了让前端表格既有类似Excel的公式计算能力，又具备传统表格控件的高性能，我们希望将传统的高性能结构化表格（Grid）与公式计算引擎（CalcEngine）结合起来.为了实现这样的设计，我们首次提出了数据管理容器（DataManager）的概念，在前端实现了原本只能在后端使用的关系型数据引擎，从而实现了大数据量（数百万行）在环境中。接下来可以实现秒级的加载、排序、过滤，所有这些操作都可以通过JavaScript代码完全在前端浏览器中实现。数据管理容器（DataManager）不仅承担数据存储和索引的功能，还实现了多数据表关系、视图、CRUD等功能。TableSheet负责将数据管理容器（DataManager）中组织的数据、视图、关系通过SpreadJS自身的“Canvas”呈现在网页上。借助escom，电子表格中的数据管理器具备了数据源直连、数据关系（外键）管理、异步操作更新等功能，进一步提升了产品数据处理分析能力。结合升值表的功能和特点，以下问题将变得易于使用升值表：后端数据加载到表中，并进行分析处理需要整合多个数据表（源）的数据并进行分析原始数据后端提供的数据被重新处理（修改、计算等）并写回。了解完escom表，我们就正式开始内容建设。首先，我们一步步拆解问题：1.后台使用SpringBoot进行快速搭建，创建一个springbootweb项目。以下是大致使用的依赖。处理一些复杂的json格式。2、构建前后端，可以选择前后端分离，也可以选择前后端结合（示例中选择前后端结合）。React，Angular，示例使用原生JS搭建），页面中引入了SpreadJSTableSheet（集合表）的相关依赖，需要在此基础上引入gc.spread.sheets.tablesheet的依赖原始的SpreadJS依赖项。4.搭建前端escom表配置配置escom表的函数操作varmyTable=dataManager.addTable("myTable",{remote:{read:{url:"initDataManager"},batch:{url:"batchUpdateDataManager"}}，批处理：真，自动同步：假}）；以上配置读取和批量两个操作，读取设置为读取指定地址下的数据。批量操作包括批量添加、删除和修改数据。从而覆盖整个增删改查逻辑。varrowActions=GC.Spread.Sheets.TableSheet.BuiltInRowActions;varoptions=sheet.rowActionOptions();options.push(rowActions.removeRow,rowActions.saveRow,rowActions.resetRow,);sheet.rowActionOptions(选项);上面的代码设置页面上对应的按钮供用户操作（删除行、保存行、重置行）myTable.fetch().then(function(){varview=myTable.addView("myView",[{value:"id",caption:"number",width:80},{value:"firstname",caption:"surname",width:100},{value:"lastname",caption:"name",宽度：100},{value:"homephone",caption:"phone",width:100}]);sheet.setDataView(view);});上面的代码设置了表的结构，设置了每一列varsubmitButton=document.getElementById('submit');submitButton.addEventListener('click',function(){sheet.submitChanges();});通过设置一个提交按钮，用于一次性提交批量修改。5.后端构建相应的数据增删改查逻辑（示例中使用一个假数据构建一个列表进行模拟，实际情况可以扩展持久层与真实交互）与数据库）。privatestaticList
