需求
使用Luckysheet新建了一個表格,然后界面操作修改表格數據,如何與后台對接來保存這些更改后的數據呢?
思路
有兩個方案:
- 一是表格操作完成后,使用
luckysheet.getAllSheets()
方法獲取到全部的工作表數據,全部發送到后台存儲。 - 二是開啟協同編輯功能,實時傳輸數據給后端。
這里重點介紹第二種方案,因為使用協同編輯功能傳輸的數據量很小,性能更好。因為保存數據只是前后端交互的中間一步,我們從整體來考慮前后端交互的方案設計。
- 首先后端根據表格的數據結構建立數據庫表
- 然后后端將配置和數據組裝起來,供前端調用,重點是起一個websocket服務
- 前端請求數據初始化表格,並使用websocket實時保存數據,后端根據前端不同的操作類型接受參數做存儲,數據庫保存后,將修改的數據推送到此服務器其它連接上(如果是集群,推薦做法是要將修改的數據推送到redis的隊列中,其他服務器接受后,也群發到各自連接的websocket上),協同編輯的其他客戶端收到信息做更新
詳細步驟
第一步 數據庫設計
一個表格的數據,包含工作簿配置、工作表配置、工作表數據。所以根據Luckysheet的數據結構作為基礎,可以抽象出數據庫表和字段信息。詳細的配置信息點擊鏈接查看官方文檔。
- 工作簿配置:根據
luckysheet.create(options)
所需要使用的options可以建立一張workbook表 - 工作表配置:根據
options.data
建立一張worksheet表 - 工作表數據:根據
options.data[0].celldata
的單個工作表的數據,建立數據表,這個可以根據自己的實際情況,決定表頭字段的分類
第二步 后端提供接口
后台需要提供三個接口來組裝數據。詳細的配置信息點擊鏈接查看官方文檔
- loadUrl:加載所有工作表的配置,並包含當前頁單元格數據
- loadSheetUrl:加載其它頁單元格數據
- updateUrl:實時保存的websocket地址
第三步 前端初始化配置
前端在表格初始化的時候,需要配置后端提供的三個接口地址和允許更新標識來開啟共享編輯功能。
allowUpdate
為true
- 配置了
loadUrl
- 配置了
loadSheetUrl
- 配置了
updateUrl
詳見:updateUrl
第四步 后端存儲分發
通過共享編輯接口updateUrl
,可以實現Luckysheet實時保存數據和多人同步數據,每一次操作都會發送不同的參數到后台,具體的操作類型和參數參見表格操作
重點在於,后台拿到這些發來的數據,分別做好歸類存儲,維護好每一個luckysheetfile,並且把前端傳來的數據同樣的分發出去,其它客戶端接收到消息,Luckysheet會自動合並更新最新數據。