如何在 30 分鐘完成表格增刪改查的前後端框架搭建

30分鐘,你可以做什麼?
可以風捲殘雲的飽餐一頓;可以簡單地打掃一下房間;或者可以跳10十遍劉畊宏《本草綱目》毽子操。
而今天,本葡萄要帶你在30分鐘內完成一套擁有增刪改查表格系統的前後端搭建!

在日常的系統開發中,表格(Grid)是最常見的數據表達形式,而表格中“增刪改查”又是最常見的功能之一。所以在日常開發過程中,快速構建表格增刪改查的框架將會成爲影響開發效率最重要的部分之一。
爲了實現本次30分鐘快速構建表格系統的目標,我們需要回顧年初的文章中,我們介紹的集算表的相關內容。

什麼是集算表?

爲了讓前端的表格不但具備類Excel的公式計算能力,同時還擁有傳統表格控件的高性能,我們希望將傳統的高性能結構化表格 (Grid) 與公式計算引擎 (CalcEngine)結合在一起。
爲了實現這樣的設計,我們首次提出了數據管理容器 (DataManager) 的概念,將原有在後端才具備的關係數據引擎,完全在前端實現,從而實現了在大量數據(百萬行)的環境下,實現秒級的加載、排序、篩選,而這所有的操作,都能夠完全在前端瀏覽器中,通過JavaScript 代碼實現。
數據管理容器 (DataManager)不僅承擔了數據存儲與索引的功能,同時還實現了多數據表關係、視圖、CRUD等功能。
集算表(TableSheet)則負責將數據管理容器 (DataManager)中整理好的數據、視圖、關係,通過SpreadJS 本身的"Canvas畫布"呈現在網頁中。

在集算表的幫助下,電子表格中的數據管理器具備了直連數據源、數據關係(外鍵)管理和異步操作更新等功能,產品數據處理分析能力得到進一步提升。

綜合集算表的功能特性,以下問題使用集算表將會變得很容易:

  • 加載後端數據到表格中,並進行分析、處理
  • 需要整合來自多個數據表(源)的數據並進行分析
  • 對後端提供的原始數據進行再加工(修改、計算等)和回寫

實戰開始

瞭解了集算表,接下來我們就正式開始內容搭建。

首先,我們對問題進行步驟拆解:
1、後端使用Spring Boot做快速搭建,創建一個spring boot web工程,下面是大致用到的dependencies

基本除了springboot自帶的之外,額外引用了fastjson用於對一些複雜json格式進行處理。

2、構建前後臺,可以選擇前後端分離,或者結合的方式(例子中選中了前後端結合的方式),大致工程結構如下:

3、構建前端頁面,前端頁面的可以選擇適合的框架(VUE,React,Angular,例子中使用源生JS進行構建),在頁面中引入SpreadJS TableSheet(集算表)中的相關依賴

需在原本SpreadJS的依賴基礎上引入gc.spread.sheets.tablesheet這個依賴。

4、構建前端集算表配置配置集算表的功能操作

var myTable = dataManager.addTable("myTable", {
                        remote: {
                            read: {
                                url: "initDataManager"
                            },
                                        batch: {
                                                url: "batchUpdateDataManager"
                                        }
                        },
                                batch: true,
                                autoSync: false
                    });

上述配置了讀取和批量兩個操作,讀取設置是在指定地址下讀取數據。而批量操作包含對數據的批量增刪改。從而覆蓋到整個增刪改查邏輯。

var rowActions = GC.Spread.Sheets.TableSheet.BuiltInRowActions;
                    var options = sheet.rowActionOptions();
                    options.push(
                        rowActions.removeRow,
                        rowActions.saveRow,
                        rowActions.resetRow,
                    );
                    sheet.rowActionOptions(options);

上述代碼設置了頁面上供用戶進行操作的對應按鈕(刪除行,保存行,重置行)

myTable.fetch().then(function() {
                        var view = myTable.addView("myView", [
                            { value: "id", caption:"編號", width: 80 },
                            { value: "firstname", caption:"姓", width: 100 },
                            { value: "lastname", caption:"名", width: 100 },
                            { value: "homephone", caption:"電話", width: 100 }
                               ]); 
                     sheet.setDataView(view);
                        });


上述代碼設置了表格的結構,對每一列進行了設置

var submitButton = document.getElementById('submit');
                    submitButton.addEventListener('click', function() {
                        sheet.submitChanges();
                    });

通過設置一個提交的按鈕,用於將批量的修改進行一次性提交。
5、後端構建對應的數據增刪改查邏輯(實例中通過一個假數據構建一個list進行模擬,實際情況可以擴展持久層與真實的數據庫進行交互)。

private static List<Employee> list = new ArrayList<Employee>();
        static {
                for(int i=0;i<10;i++) {
                        Employee employee = new Employee();
                        employee.setId(i);
                        employee.setFirstname("FirstName"+i);
                        employee.setLastname("LastName"+i);
                        employee.setHomephone("HomePhone"+i);
                        list.add(employee);
                }
        }
        
        @RequestMapping(value = "/initDataManager", method = RequestMethod.GET)
        @ResponseBody
        public List<Employee> initWorkBook() {
                return list;
        }
        
        @RequestMapping(value = "/batchUpdateDataManager", method = RequestMethod.POST)
        @ResponseBody
        public List<Map<String,Object>> batchUpdateDataManager(@RequestBody List<BatchManager> batchManagerList) {
                List<Map<String,Object>> reutrnList = new ArrayList<Map<String,Object>>();
                for (BatchManager batchManager : batchManagerList){
                        Map<String,Object> returnMap = new HashMap<String,Object>();
                        String type = batchManager.getType().toString();
                        try{
                                if (type.equals("update"))
                    {
                        Employee employee = batchManager.getDataItem();
                        int index = batchManager.getSourceIndex();
                        Employee employeeSource = list.get(index);
                        employeeSource.setId(employee.getId());
                        employeeSource.setFirstname(employee.getFirstname());
                        employeeSource.setLastname(employee.getLastname());
                        employeeSource.setHomephone(employee.getHomephone());
                        list.remove(index);
                        list.add(index, employeeSource);
                        returnMap.put("succeed", true);
                    }else if (type.equals("insert"))
                    {
                            Employee employee = batchManager.getDataItem();
                            list.add(employee);
                            returnMap.put("succeed", true);
                            employee.setId(employee.getId()+10000);
                            returnMap.put("data", employee);
                    }else if (type.equals("delete"))
                    {
                            int index = batchManager.getSourceIndex();
                            list.remove(index);
                            returnMap.put("succeed", true);
                    }
                                
                        }catch(Exception e) {
                                returnMap.put("succeed", false);
                        }
                        reutrnList.add(returnMap);
                }
                return reutrnList;
        }

這樣,我們的框架就算搭建完成了。後面可以根據情況再做細微的調整和優化。總共耗時30分鐘左右。
實例的代碼可以參考附件,有興趣的朋友可以下載自行參考搭建

文內demo下載地址:https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MTkzOTc5fGQ1MzgxYThjfDE2NTIzMjMwMDR8NjI2NzZ8MTQyMDEy

更多純前端表格demo在線體驗:
https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章