折旧
这已经移到 @advanced-rest-client/idb-store
高级REST客户端应用的数据模型. 此模块包含应用程序用于存储数据并恢复到UI的逻辑.
它还提供基于DOM事件的API访问. 每个操作都有相应的事件可以用来访问数据.
使用事件API的方便方法是使用 ArcModelEvents 财务报告和审定财务报表 ArcModelEventTypes 接口.
第一种提供访问功能,用于调用创建和发送特定节点上的事件. 后一则提供了事件类型的定义,用于人工处理.
强烈建议在打字员的支持下使用这种模型. 库和每个组件都有类型定义,有便于使用的文档. 类型在 @advanced-rest-client/arc-types 模块.
使用量
这些模型是模块化的,因此ARC应用程序可以根据接口的不同而方便地替换出每个接口. 它还允许从外部提取部分应用程序逻辑 并使用相同的模型来添加存储支持.
安装
npm install --save @advanced-rest-client/arc-models
配合活动
每个模型都有对应的(几乎)每个公用方法,一个事件可以使用而不是直接访问模型实例. 它比每个组件中直接使用库更方便,因为如果组件使用抽象层而不是直接API,那么管理API变化就更容易了. 这样,改变当组件直接使用库时的数据存储执行是简单得多的任务.
您想要列出ARC请求存储在应用程序中的数据 。 这一点得到 request-model。您可以通过发送列表事件访问数据 :
import '@advanced-rest-client/arc-models/request-model.js';
import { ArcModelEvents } '@advanced-rest-client/arc-models';
const result = await ArcModelEvents.Request.list(document.body, 'saved', {
limit: 25,
});
const { items } = result;
倾斜
所有组件都使用相同的接口来列出数据. 打电话时 list() 函数(或相应的事件)一个模型
它总是接受一个物体与 limit 财务报告和审定财务报表 nextPageToken 属性。 两者都是可选的.
限制告诉模型有多少实体随响应而返回. 然后随每个列表结果返回下一页符并包含关于当前位置的散列数据.
import '@advanced-rest-client/arc-models/request-model.js';
import { ArcModelEvents } '@advanced-rest-client/arc-models';
const result = await ArcModelEvents.Request.list(document.body, 'saved', {
limit: 25,
});
const { items, nextPageToken } = result;
这个 items 阵列包含一个列表 ARCSavedRequest 实体。 通过查询返回的第二个财产是 nextPageToken ,现在可以传递到下一个列表请求,以请求下一页的结果.
const next = await ArcModelEvents.Request.list(document.body, 'saved', {
limit: 25,
nextPageToken,
});
请注意,由于页面光标不存储此信息,每个调用必须定义限制 .
在 html 文件内
<html>
<head>
<script type="module">
import '@advanced-rest-client/arc-models/auth-data-model.js';
import '@advanced-rest-client/arc-models/host-rules-model.js';
import '@advanced-rest-client/arc-models/project-model.js';
import '@advanced-rest-client/arc-models/request-model.js';
import '@advanced-rest-client/arc-models/rest-api-model.js';
import '@advanced-rest-client/arc-models/url-indexer.js';
import '@advanced-rest-client/arc-models/variables-model.js';
import '@advanced-rest-client/arc-models/websocket-url-history-model.js';
</script>
</head>
<body>
<auth-data-model></auth-data-model>
<host-rules-model></host-rules-model>
<project-model></project-model>
<request-model></request-model>
<rest-api-model></rest-api-model>
<url-indexer></url-indexer>
<variables-model></variables-model>
<websocket-url-history-model></websocket-url-history-model>
</body>
</html>
在 LitElement 模板中
import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/arc-models/auth-data-model.js';
import '@advanced-rest-client/arc-models/host-rules-model.js';
import '@advanced-rest-client/arc-models/project-model.js';
import '@advanced-rest-client/arc-models/request-model.js';
import '@advanced-rest-client/arc-models/rest-api-model.js';
import '@advanced-rest-client/arc-models/url-indexer.js';
import '@advanced-rest-client/arc-models/variables-model.js';
import '@advanced-rest-client/arc-models/websocket-url-history-model.js';
class SampleElement extends LitElement {
render() { `
<auth-data-model></auth-data-model>
<host-rules-model></host-rules-model>
<project-model></project-model>
<request-model></request-model>
<rest-api-model></rest-api-model>
<url-indexer></url-indexer>
<variables-model></variables-model>
<websocket-url-history-model></websocket-url-history-model>
`;
}
}
customElements.define('sample-element', SampleElement);
在多聚体3元素中
import {PolymerElement, html} from '@polymer/polymer';
import '@advanced-rest-client/arc-models/auth-data-model.js';
import '@advanced-rest-client/arc-models/host-rules-model.js';
import '@advanced-rest-client/arc-models/project-model.js';
import '@advanced-rest-client/arc-models/request-model.js';
import '@advanced-rest-client/arc-models/rest-api-model.js';
import '@advanced-rest-client/arc-models/url-indexer.js';
import '@advanced-rest-client/arc-models/variables-model.js';
import '@advanced-rest-client/arc-models/websocket-url-history-model.js';
class SampleElement extends PolymerElement {
static get template() {
return html`<auth-data-model></auth-data-model>
<host-rules-model></host-rules-model>
<project-model></project-model>
<request-model></request-model>
<rest-api-model></rest-api-model>
<url-indexer></url-indexer>
<variables-model></variables-model>
<websocket-url-history-model></websocket-url-history-model>`;
}
}
customElements.define('sample-element', SampleElement);
导出元素
导入数据检查器元素
一个可视化检查 ARC 导出对象的元素 。 它被ARC在导入流量时使用.
<import-data-inspector .data="${data}" @cancel="${this.cancelled}" @import="${this.imported}"></import-data-inspector>
数据对象为 ArcExportObject 在 @advanced-rest-client/arc-types/DataExport 声明.
导出选项元素
向用户提供应用程序处理的文件导出选项的元素 .
<export-options file="my-demo-file.arc" provider="drive" parentId="drive file id" withEncrypt></export-options>
元素发送事件定义于 GoogleDriveEventTypes.listAppFolders 以请求该应用程序列出Google Drive应用程序中创建的所有应用程序文件夹.
弧出输出格式
一个包含 UI 以显示 ARC 数据库导出选项的元素 。 它与 ArcDataExportElement 通过活动.
<arc-export-form withEncrypt provider="drive" parentId="drive file id"></arc-export-form>
ArcData 输出
通过事件处理 ARC 数据导出逻辑的组件 。 它注意为 ARC 数据创建导出对象,加密内容(当请求时),并通过事件生成与导出提供的通信.
这一要素应插入项目中的某个地方的DOM.
<are-data-export appVersion="major.minor.patch" electronCookies></are-data-export>
ArcDataImport 组件
反之则 ArcDataExportElement 键。 提供导入流量的逻辑,并通过事件系统与其他组件通信以完成导入流量.
<are-data-import></are-data-import>
发展
git clone https://github.com/@advanced-rest-client/arc-models
cd arc-models
npm install
本地运行演示
npm start
运行测试
npm test