Luckysheet如何把表格⾥的数据保存到数据库
需求
使⽤Luckysheet新建了⼀个表格,然后界⾯操作修改表格数据,如何与后台对接来保存这些更改后的数据呢?
思路
有两个⽅案:
前端websocket怎么用
⼀是表格操作完成后,使⽤AllSheets()⽅法获取到全部的⼯作表数据,全部发送到后台存储。
⼆是开启协同编辑功能,实时传输数据给后端。
这⾥重点介绍第⼆种⽅案,因为使⽤协同编辑功能传输的数据量很⼩,性能更好。因为保存数据只是前后端交互的中间⼀步,我们从整体来考虑前后端交互的⽅案设计。
⾸先后端根据表格的数据结构建⽴数据库表
然后后端将配置和数据组装起来,供前端调⽤,重点是起⼀个websocket服务
前端请求数据初始化表格,并使⽤websocket实时保存数据,后端根据前端不同的操作类型接受参数做存储,数据库保存后,将修改的数据推送到此服务器其它连接上(如果是集,推荐做法是要将修改的数据推送到redis的队列中,其他服务器接受后,也发到各⾃连接的websocket上),协同编辑的其他客户端收到信息做更新
详细步骤
第⼀步数据库设计
⼀个表格的数据,包含⼯作簿配置、⼯作表配置、⼯作表数据。所以根据Luckysheet的数据结构作为基础,可以抽象出数据库表和字段信息。详细的配置信息点击链接查看官⽅⽂档。
:根据ate(options)所需要使⽤的options可以建⽴⼀张workbook表
:根据options.data建⽴⼀张worksheet表
:根据options.data[0].celldata的单个⼯作表的数据,建⽴数据表,这个可以根据⾃⼰的实际情况,决定表头字段的分类
第⼆步后端提供接⼝
后台需要提供三个接⼝来组装数据。详细的配置信息点击链接查看官⽅⽂档
:加载所有⼯作表的配置,并包含当前页单元格数据
:加载其它页单元格数据
:实时保存的websocket地址
第三步前端初始化配置
前端在表格初始化的时候,需要配置后端提供的三个接⼝地址和允许更新标识来开启共享编辑功能。
allowUpdate为true
配置了loadUrl
配置了loadSheetUrl
配置了updateUrl
详见:
第四步后端存储分发
通过共享编辑接⼝updateUrl,可以实现Luckysheet实时保存数据和多⼈同步数据,每⼀次操作都会发送不同的参数到后台,具体的操作类型和参数参见
重点在于,后台拿到这些发来的数据,分别做好归类存储,维护好每⼀个luckysheetfile,并且把前端传来的数据同样的分发出去,其它客户端接收到消息,Luckysheet会⾃动合并更新最新数据。
参考

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。