Luckysheet如何把表格裡的資料儲存到資料庫
阿新 • • 發佈：2020-10-22
需求
使用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會自動合併更新最新資料。