DataManager之自定义请求之验证Token

在集算表之后，SpreadJS添加了DataManager用来管理数据源

DataManager 是一个强大的本地数据引擎。它可以与您的数据库交互、提取数据、管理数据并将实时数据同步回您的数据库。它还可以对数据进行高性能的聚合和分析。它将作为应用程序的数据核心，使应用程序能够更专注于业务逻辑和呈现。

一、创建数据源

在创建数据源前，我们要先获取dataManager对象，如下代码。

1. var dataManager = spread.dataManager();

复制代码

接下来，将表添加到数据管理器中，主要使用addTable这个api

1.         var tableName = "products";
   
2.         var dataSourceOption = {
   
3.             remote: {
   
4.                 read: {
   
5.                     url: "https://cdn.grapecity.com.cn/spreadjs/json-sample-data/salesData.json"
   
6.                 }
   
7.             },
   
8.             schema: {
   
9.                dataPath: 'data'
   
10. 
    
11.             }
    
12.         };
    
13.         var productTable = dataManager.addTable(tableName, dataSourceOption);

复制代码

上述代码中，接口"https://cdn.grapecity.com.cn/spreadjs/json-sample-data/salesData.json"返回的数据如下：

所以在schema中配置了数据路径为data 。

在浏览器中，打开此html文件，点击“数据”，“数据源”菜单，可以看到products表已经在列表中。

此时我们点击下列，可以看到该请求返回的字段

当然，我们也可以直接通过UI方式创建数据源，参考下图：

二、创建集算表

有了数据源之后，我们就可以很方便创建

1.     var dataManager = spread.dataManager();
   
2.         var tableName = "products";
   
3.         var dataSourceOption = {
   
4.             remote: {
   
5.                 read: {
   
6.                     url: "https://cdn.grapecity.com.cn/spreadjs/json-sample-data/salesData.json"
   
7.                 }
   
8.             },
   
9.             schema: {
   
10.                dataPath: 'data'
    
11. 
    
12.             }
    
13.         };
    
14.         var productTable = dataManager.addTable(tableName, dataSourceOption);
    
15.         var myView = productTable.addView("myView",[
    
16.             { value: "order_num", caption :"订单编号" ,width: 120 },
    
17.             { value: "order_date", width: 100, caption :"日期" },
    
18.             { value: "type_name", width: 100, caption :"类别" },
    
19.             { value: "product_name", width: 100, caption :"产品名称" },
    
20.             { value: "quantity", width: 100, caption :"数量" },
    
21.             { value: "unit_price", width: 100, caption :"单价" },
    
22.             { value: "discount", width: 100, caption :"折扣" },
    
23.             { width: 100, caption :"金额",value:"=[@unit_price] * [@quantity] *(1-[@discount])"}
    
24.         ]);
    
25.         var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
    
26. 
    
27.         myView.fetch().then(function () {
    
28.             sheet.setDataView(myView);
    
29.         });

复制代码

当然，也可以通过UI方式创建，如下图所示：依次点击“插入”“集算表” ，然后在右侧的panel中选择“products”表

三、remote

观察上述添加数据源的相关代码，remote属性用来描述远程数据源，支持REST API, OData, GraphQL
其属性包括

我们先介绍read
read可以返回一个GC.Data.IRemoteRequestOption， 包括adapter,body,url,method。
如最简单的用法，只有url地址。

1.      remote: {
   
2.                 read: {
   
3.                     url: "https://cdn.grapecity.com.cn/spreadjs/json-sample-data/salesData.json"
   
4.                 }
   
5.             },

复制代码

也可以返回一个Promise函数，如

1. function requestToServer(params?): Promise<any> {
   
2.     // api of request to server
   
3. }
   
4. remote: {
   
5.     read: function (): Promise<any[]>{
   
6.             return requestToServer();
   
7.         },
   
8. }
   

复制代码

这里详细介绍下Promise()方式。

四、验证token
在一些用户场景中，需要定时验证Token ，此时需要重新发送请求，来更新数据源。通过自定义接口的方式，可以很灵活实现需求，
如

1.   const getStudentList = function (token) {
   
2.         return new Promise((resolve, reject) => {
   
3.             fetch("http://127.0.0.1:3000/studentList", {
   
4.                 method: "get",
   
5.                 headers: {
   
6.                     "Authorization": token,
   
7.                 },
   
8.             }).then((response) => response.json())
   
9.                 .then((data) => resolve(data));
   
10.         });
    
11.     }

复制代码

上述代码定义了getStudentList 方法，用来返回一个Promise 。在Promise方法中，用fetch调用接口"http://127.0.0.1:3000/studentList" 来返回学生数据。
其中在headers中定义了"Authorization"，将token值传输给后端，并进行验证。
我们用NodeJS简单的起一个服务，新建App.js ，定义studentList接口，并返回相应的数据。

1. const express = require("express");
   
2. var cors = require("cors");
   
3. var bodyParser = require('body-parser');
   
4. var urlencodedParser = bodyParser.urlencoded({extended: false})
   
5. const app = express();
   
6. 
   
7. 
   
8. app.use(cors());
   
9. app.use(bodyParser.json())
   
10. 
    
11. 
    
12. let studentList = [
    
13. {name: "张三", age: 7, id: 1, sex: 0},
    
14. {name: "李四", age: 7, id: 2, sex: 0},
    
15. {name: "王五", age: 7, id: 3, sex: 0},
    
16. {name: "平平", age: 6, id: 4, sex: 1},
    
17. {name: "果果", age: 8, id: 5, sex: 1},
    
18. ];
    
19. app.get("/studentList", (req, res) => {
    
20. let Authorization = req.headers["authorization"];
    
21. if (Authorization == 1) {
    
22. res.json([studentList[0], studentList[1], studentList[2]]);
    
23. } else if (Authorization == 2) {
    
24. res.json([studentList[3], studentList[4], studentList[5
    
25. ]]);
    
26. } else {
    
27. res.json(studentList);
    
28. }
    
29. 
    
30. });
    
31. app.listen("3000", () => {
    
32. console.log("=========服务启动了，在3000端口=========");
    
33. });

复制代码

上述代码是用Express起了一个服务，此时运行App.js 此时，在浏览器中打开http://127.0.0.1:3000/studentList ，发现已经将所有的学生信息返回。




搞定接口后，我们来运行下集算表。发现只返回了三条数据

这个是因为我们在请求的时候，在header中定义了Authorization


而在刚刚的App.js中对Authorization进行了处理，


如果此时修改token ,这时候怎么更新集算表呢？

有两种方式

1. document.getElementById('reset').addEventListener('click', function () {
   
2.             getStudentList(2).then(result => {
   
3.                 let myTable = spread.dataManager().tables["myTable"];
   
4.                 myTable.options = {
   
5.                     remote: {
   
6.                         read: function () {
   
7.                             return Promise.resolve(result);
   
8.                         }
   
9.                     }
   
10.                 };
    
11.                 myTable.fetch(true).then(function () {
    
12.                     let myView = myTable.views["myView"];
    
13.                     let sheet = spread.getActiveSheetTab();
    
14.                     sheet.setDataView(myView);
    
15.                 });
    
16.             })
    
17.         })

复制代码

第二种

1. document.getElementById('reset').addEventListener('click', function () {
   
2.     let myTable = spread.dataManager().tables["myTable"];
   
3.     myTable.options = {
   
4.         remote: {
   
5.             read: function () {
   
6.                 return getStudentList(2);
   
7.             }
   
8.         },
   
9. 
   
10.     };
    
11.     myTable.fetch(true).then(function () {
    
12.         let myView = myTable.views["myView"];
    
13.         let sheet = spread.getActiveSheetTab();
    
14.         sheet.setDataView(myView);
    
15.     });
    
16. })

复制代码

这两种方式相同点是 在更新数据源后，table需要重新fetch数据，然后更新视图。
完整效果如下：




五、最后
关于上文中提到的代码，可以在下面的文件中查看
关于dataManager的介绍，可以参考index.html
关于token更新的介绍，可以参考数据更新.html
关于NodeJS服务，可以从这里下载：https://github.com/qianbeichenchen/NodeJSDataQuery