DataManager之自定义请求之验证Token

收藏

本帖最后由 Ellia.Duan 于 2024-3-20 14:27 编辑

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

image.png148251952.png

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

一、创建数据源

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

var dataManager = spread.dataManager();

复制代码

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

var tableName = "products";
var dataSourceOption = {
remote: {
read: {
url: "https://cdn.grapecity.com.cn/spreadjs/json-sample-data/salesData.json"
}
},
schema: {
dataPath: 'data'
}
};
var productTable = dataManager.addTable(tableName, dataSourceOption);

复制代码

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

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

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

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

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

二、创建集算表

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

var dataManager = spread.dataManager();
var tableName = "products";
var dataSourceOption = {
remote: {
read: {
url: "https://cdn.grapecity.com.cn/spreadjs/json-sample-data/salesData.json"
}
},
schema: {
dataPath: 'data'
}
};
var productTable = dataManager.addTable(tableName, dataSourceOption);
var myView = productTable.addView("myView",[
{ value: "order_num", caption :"订单编号" ,width: 120 },
{ value: "order_date", width: 100, caption :"日期" },
{ value: "type_name", width: 100, caption :"类别" },
{ value: "product_name", width: 100, caption :"产品名称" },
{ value: "quantity", width: 100, caption :"数量" },
{ value: "unit_price", width: 100, caption :"单价" },
{ value: "discount", width: 100, caption :"折扣" },
{ width: 100, caption :"金额",value:"=[@unit_price] * [@quantity] *(1-[@discount])"}
]);
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
myView.fetch().then(function () {
sheet.setDataView(myView);
});

复制代码

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

三、remote

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

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

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

复制代码

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

function requestToServer(params?): Promise<any> {
// api of request to server
}
remote: {
read: function (): Promise<any[]>{
return requestToServer();
},
}

复制代码

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

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

const getStudentList = function (token) {
return new Promise((resolve, reject) => {
fetch("http://127.0.0.1:3000/studentList", {
method: "get",
headers: {
"Authorization": token,
},
}).then((response) => response.json())
.then((data) => resolve(data));
});
}

复制代码

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

const express = require("express");
var cors = require("cors");
var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({extended: false})
const app = express();
app.use(cors());
app.use(bodyParser.json())
let studentList = [
{name: "张三", age: 7, id: 1, sex: 0},
{name: "李四", age: 7, id: 2, sex: 0},
{name: "王五", age: 7, id: 3, sex: 0},
{name: "平平", age: 6, id: 4, sex: 1},
{name: "果果", age: 8, id: 5, sex: 1},
];
app.get("/studentList", (req, res) => {
let Authorization = req.headers["authorization"];
if (Authorization == 1) {
res.json([studentList[0], studentList[1], studentList[2]]);
} else if (Authorization == 2) {
res.json([studentList[3], studentList[4], studentList[5
]]);
} else {
res.json(studentList);
}
});
app.listen("3000", () => {
console.log("=========服务启动了，在3000端口=========");
});

复制代码

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

image.png507477416.png

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

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

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

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

有两种方式

document.getElementById('reset').addEventListener('click', function () {
getStudentList(2).then(result => {
let myTable = spread.dataManager().tables["myTable"];
myTable.options = {
remote: {
read: function () {
return Promise.resolve(result);
}
}
};
myTable.fetch(true).then(function () {
let myView = myTable.views["myView"];
let sheet = spread.getActiveSheetTab();
sheet.setDataView(myView);
});
})
})

复制代码

第二种

document.getElementById('reset').addEventListener('click', function () {
let myTable = spread.dataManager().tables["myTable"];
myTable.options = {
remote: {
read: function () {
return getStudentList(2);
}
},
};
myTable.fetch(true).then(function () {
let myView = myTable.views["myView"];
let sheet = spread.getActiveSheetTab();
sheet.setDataView(myView);
});
})

复制代码

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

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

		自动登录	找回密码
密码			立即注册

DataManager之自定义请求之验证Token

0 个回复

SpreadJS 认证

SpreadJS 高级认证