ONES插件开发的学习笔记

首先插件的功能是私有化部署的功能, 只能在私有化部署的 ONES 上能安装和使用插件。

安装最新版本 Node.js 的稳定版, 配置 ONES 的私有 npm 仓库：

$ npm config set registry=https://registry.npmjs.org/
$ npm config set @ones:registry=https://npm.partner.ones.cn/registry/
$ npm config set @ones-op:registry=https://npm.partner.ones.cn/registry/

这里本来想先安装 Homebrew 后通过 brew install n 安装 n 工具, 再使用 sudo n 16.13.0 安装 v16.13.0 版本的 Node.js 环境, 但是出现 github.com port 443: Operation timed out 异常, 尝试过更换中科院的镜像地址和 Leensa 网络代理工具均无效时, 放弃这个方案。

下载 cmake-3.22.2-macos-universal.dmg 安装 CMake 工具, 然后通过 cmake --version 检查是否安装成功。

这里遇到了 Error: Running Homebrew as root is extremely dangerous and no longer supported. 异常, 通过下面的命令解决：

$ sudo chown -R `whoami` /usr/local/Homebrew/
$ sudo chown -R $(whoami) $(brew --prefix)/*
$ sudo mkdir /usr/local/Frameworks
$ sudo chown -R `whoami` /usr/local/Frameworks/

使用 npm install -g @ones/cli 安装 ONES CLI 脚手架工具, 再使用 ones --version 验证是否正确安装, 以后的升级用 npm update -g @ones/cli 命令来完成。

创建插件

插件在作用范围上, 分为 组织级别 和 团队级别 两种；在功能范围上, 分为 业务插件 、账号管理与通知 和 托管独立服务 三种。

新建一个目录作为插件工程的根目录, 进入目录执行 ones create -d 命令创建一个插件工程, 其中的 -d 选项表示使用默认的工程创建预设配置。这样创建的是 团队级别 的插件, 可以用 --plugin-type organization 选项表示创建 组织级别 的插件。

插件项目的目录 (ONES CLI 创建的插件工程目录结构) 生成后, 使用 npx op packup Demo 命令对插件进行打包, 模式 (no-modify-无修改 | major-主版本 | minor-次版本 | patch-修复版本) 选择 no-modify 无修改。

打包完成后, 工程根目录中就可以看到 Demo.opk 这个 opk 包, 这个是 团队级别 的插件, 在 “配置中心 -> 插件管理” 选择 Demo.opk 文件完成安装, 如果是 组织级别 的则在 “组织管理 -> 插件管理” 页面安装。

调试插件

执行 npx op login 命令在私有化部署环境中获取用户凭证的参数 (执行前需要在 “配置中心 -> 插件管理” 删除掉之前安装), 并存储到 config/local.yaml 中。命令要求输入的参数 base URL 是私有化 ONES 平台的域名地址 (例如 “https://xxxx/”), 参数 host URL 是私有化 ONES 平台的 TCP 主机地址和 9006 端口号 (例如 “tcp://127.0.0.1:9006”), 还有就是登录私有化 ONES 平台的账号密码, 以及选择进入的团队。

生成 config/local.yaml 后, 执行 npx op invoke run 启动本地调试, 这个命令会为插件工程的前端部分 (/web) 启动一个热更新的开发服务器, 第一次启动后控制台会返回 instance_uuid 值, 这个值是插件被安装到具体环境时动态生成的实例 uuid 值。

现在 “配置中心 -> 插件管理” 里刷新, 可以看到插件已经被安装了, 中断前面的 npx op invoke run 进程, 再执行 npx op invoke clear 就可以卸载插件, 卸载完成后再中断当前进程, 这个就是插件的调试过程。

修改插件的配置文件 (config/plugin.yaml) 后需要卸载插件后重新安装, 即重新执行 npx op invoke run 和 npx op invoke clear 命令。

添加插槽

插槽是纯前端的能力, 存放于 /web/src/modules/ 目录下以插槽模块命名的目录中, 插槽模块相当于一个独立的 React 应用, 支持 TypeScript 语言。

以全局的顶栏公告插槽 ones:global:banner 为例, 执行 npx op add module 命令并选择 ones:global:banner 插槽, 输入 banner 或其他标题, 就完成插槽的创建, 在 /config/plugin.yaml 文件的最后多了一个 modules 字段, 在这个字段下有一个 entry 字段, 对应的是 /web/src/{entry} 目录下的文件路径, 这个文件目录下包含 index.tsx 与 index.css 两个文件。

插槽模块目录下的 index.css 文件是样式代码, 自动生成的 #ones-mf-root {} 是插槽模块的根元素, 插槽支持 PostCSS 框架, 例如可以创建一个单独的样式文件 banner.css 并输入下面代码：

.banner {width: 100%;
}

然后在 index.css 中引入这个 banner.css 文件：

@import 'banner.css';#ones-mf-root {}

保存以上代码后, 在 ONES 平台页面的顶部就可以看到插槽模块的效果, 插件在打包时仅执行 .ts 和 .tsx 文件的转译, 插件模块的打包以模块内的 index.tsx 文件为入口, 这个文件里的 <ConfigProvider> 组件必须保留。

添加能力

能力有 基础能力-平台开放能力 和 业务能力-应用开放能力 两种, 以 简单登录 能力为例, 执行 npx op add ability 指令向插件新增开放能力, 并选择 simple-auth 能力, 就完成能力的创建, 在 /config/plugin.yaml 文件的最后多了一个 abilities 字段, 同时在 /backend/src 目录下, 生成了 index.ts 和 simple-auth.ts 两个文件。

大概得出一个小结, 插槽是前端的显示, 能力是后端的实现, 插槽和能力如何进行关联需要更深入的了解。

接口请求

首先是前端请求, 进入插件工程的 /web 目录执行 npm install @ones-op/fetch 命令进行依赖安装, 使用 ONES CLI 创建工程的时默认帮注册的 API 即 hello 接口, 在 plugin.yaml 中有一个 apis 字段, 它的 url 字段是 /hello, 对应的是在 /backend/src/index.ts 里有一个 export async function hello(request: PluginRequest) 函数, 这个就是 API 的实现。这样就可以在插件中使用 OPFetch 来请求这个接口。

直接用 Postman 请求时需要带上 Ones-Check-Point、Ones-Plugin-Id、Ones-Check-Id 三个请求头, 插件 ID 在 “配置中心 -> 插件管理 -> 插件详情” 的 URL 里看, 团队 ID 在 “配置中心 -> 团队配置 -> 团队消息” 的 URL 里看, 然后用 POST 请求 https://xxxx/project/api/project/hello 地址就可以获得响应。

然后是后端请求, 进入插件工程的 /backend 目录执行 npm install @ones-op/node-fetch 命令进行依赖安装, 在 /backend/src/index.ts 文件里修改代码, 用 const projects = await fetchONES<ProjectResponseBody>({...})... 就可以调用接口请求。

数据获取

在插件里可以获取平台的 全局数据 和 特定上下文数据 两种, 进入插件工程的 /web 目录执行 npm install @ones-op/store 命令进行依赖安装, 然后就可以通过下面代码获取当前团队信息：

import { useTeamInfo } from '@ones-op/store'const { uuid, name } = useTeamInfo()

把上面代码加到插槽模块里, 这样就可以在前面的插槽模块里显示当前团队信息。

事件通信

平台提供了一套事件通信库, 通过进入插件工程的 /web 目录执行 npm install @ones-op/event 命令进行依赖安装, 就可以使用一套事件通信库：

  • 示例一：激活全局进度管理器
  • 示例二：触发成员列表刷新

大概实现的通过插槽模块里调用事件通信库, 来使用平台提供的事件, 例如在 “创建新用户时” 调用 “触发成员列表刷新”、“访问自定义的项目概率插件” 时 “激活全局进度管理器” 等实现。

生命周期

插件的生命周期是指插件在 ONES 私有环境中从上传到卸载整个阶段的完整过程, 包括 “未安装”、“未启用”、“启用” 三个过程, 而在这个过程中伴随着一系列的生命周期事件的钩子函数, 这些钩子函数在插件工程初始化后就包含在 /backend/src/index.ts 文件中, 直接看注释就可以理解其含义。

插件打包

在插件工程的根目录下执行 npx op packup 命令就可以打包插件了。

插件自定义配置

插件支持在 plugin.yaml 文件下的 config 字段添加自定义配置项, 配置项分3个类型, 通过配置项字段 type 区分：

  • type: Input # 单行输入框
  • type: TextArea # 多行输入框
  • type: Password # 密码输入框

除了 type 还有另外4个配置项字段, 其中必填的有1个：

配置项字段说明类型
key唯一标识string

其中必填的有3个：

配置项字段说明类型默认值
required字段是否必填booleanfalse
label字段别名string取 key 字段的值
value字段默认值string无

还可以在详情页面里新建选项卡, 在插件工程目录下执行 npx op add module 命令, 选择创建 settings 插槽的模块, 再输入一个标签页标题, 这样在插件详情页, 就可以在插件详情页面看到新的标签页。

接口注册

接口注册属于插件能力, 插件能力允许插件注册 插件级别 和 团队级别 两种级别的接口, 它们在注册时的区别在于在 config/plugin.yaml 文件的 apis 字段的 type 子字段, 片段type: addition 表示 插件级别 的接口, 片段type: external 表示 团队级别 的接口, 它们的访问路径也不同：

  • 插件级别通过URL https://xxx/project/api/project/hello 访问
  • 团队级别通过URL https://xxx/project/api/project/team/:teamUUID/hello1 访问

除了文档中提供的内容, 还有另外一种区分方法：

  • URL包含 /project/api/project/ 的为全局接口
  • URL包含 /project/api/project/team/:teamUUID/ 的为团队接口
  • URL包含 /project/api/project/organization/:organizationUUID/ 的为组织接口

此外 apis 字段还有一个 scope 子字段, 用于定义当前接口的路由是 project 还是 wiki 路径：

  • 当 scope: project 时URL为 /project/api/project/ 路径
  • 当 scope: wiki 时URL为 /wiki/api/wiki/ 路径

还有一些特殊情况, 例如 https://xxx/wiki/api/project/organization/:organizationUUID/user_list_filter_rules 接口, 就是 /wiki/api/project/ 这样的路径。

接口劫持

接口劫持可以替换平台已有的接口, 也可以对已有的接口请求前后添加 前置处理 和 后置处理 逻辑, 实现接口劫持同样是在 config/plugin.yaml 文件 apis 字段的 type 子字段里：

  • 当 type: replace 时为接口替换, 即重写接口
  • 当 type: prefix 时为前置劫持, 即前置处理
  • 当 type: suffix 时为后置劫持, 即后置处理

因为是对已有接口做处, 所以填写的 url 必须跟访问 ONES API 的 url 保持一致, 同时要确认被操作接口是 POST 请求还是 GET 请求, 还要注意请求参数和响应内容。此外 apis 字段还有一个 query 子字段, 用于控制接口劫持的前置条件, 只有当请求值包含某些参数时才劫持接口。

自定义权限点

第一个 场景：系统顶栏右侧组件 例子中, 是通过 permission 字段和 permission: component_permissions 为 插槽模块 直接配置一个独立的权限管理：

service:permission:- name: Component permissionsfield: component_permissionsdesc: System sider permissions
modules:- id: ones-layout-header-action-new-LZrdtitle: layoutHeaderActionmoduleType: ones:layout:header:action:newenableMemoryRouter: trueentry: modules/ones-layout-header-action-new-LZrd/index.htmlpermission: component_permissions

第二个 场景：支持权限上下文的自定义迭代组件 例子中, 先使用 npx op add ability 添加了 custom-permission 这个 插件能力 并将其与 插槽模块 关联, 实现权限控制。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/126286.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

docker安装软件

docker安装软件

docker安装redis及其配置 docker安装redis及其配置 安装镜像 查询镜像 docker search redis拉取镜像 docker pull redis:7.2.2创建文件目录 创建目录 mkdir /home/redis/conf mkdir /home/redis/data创建配置文件 cd /home/redis/conf touch redis.conf以下链接中下载相…
阅读更多...
electron汇总

electron汇总

python3自带了pip pip search已经被禁用&#xff0c;安装pip—— pip install pip-searchpython3.x移除了distutils 管理员权限下运行cmd&#xff0c;运行以下命令 // 修改pip镜像地址 pip config set global.index-url https://mirrors.aliyun.com/pypi/simple/ // 安装 Set…
阅读更多...
jsoncpp fatal error C1083: 无法打开编译器生成的文件

jsoncpp fatal error C1083: 无法打开编译器生成的文件

使用jsoncpp库的时候&#xff0c;在Debug模式下正常&#xff0c;但是release却报错&#xff0c;开始以为是开发项目设置问题&#xff0c;于是网络搜索&#xff0c;发现是jsoncpp的编译选项问题。 修改生成静态库文件的工程的属性&#xff1a;路径为&#xff1a;菜单&#xff0…
阅读更多...
用二维码搭建设备巡检系统，轻松实现扫码巡检和数字化台账

用二维码搭建设备巡检系统，轻松实现扫码巡检和数字化台账

针对设备状态不透明、纸质记录效率低、故障报修不及时等设备点巡检的常见问题&#xff0c;可以在草料二维码上自主搭建涵盖点检、巡检、报修、维修、保养等功能的管理系统&#xff0c;无需安装APP&#xff0c;微信扫码就能查看设备档案、用表单替代纸质检查表。 譬如“台州沿海…
阅读更多...
基于FPGA的图像差分运算及目标提取实现,包含testbench和MATLAB辅助验证程序

基于FPGA的图像差分运算及目标提取实现,包含testbench和MATLAB辅助验证程序

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 timescale 1ns / 1ps // // Company: // Engineer: // // Create Date: 2022/07/28 01:51:…
阅读更多...
ctfshow-web入门37-52

ctfshow-web入门37-52

include($c);表达式包含并运行指定文件。 使用data伪协议 ?cdata://text/plain;base64,PD9waHAgc3lzdGVtKCdjYXQgZmxhZy5waHAnKTs/Pg PD9waHAgc3lzdGVtKCdjYXQgZmxhZy5waHAnKTs/Pg 是<?php system(cat flag.php);?> base64加密 源代码查看得到flag 38 多禁用了ph…
阅读更多...
YOLO算法改进3【中阶改进篇】：添加HorNet卷积模块

YOLO算法改进3【中阶改进篇】：添加HorNet卷积模块

论文地址：https://arxiv.org/pdf/2207.14284.pdf 源码地址：https://github.com/raoyongming/HorNet. HorNet是在Swin transformer结构的基础上，结合大核思想提出的新的网络结构模块，使用该模块，作者在ImageNet-1k数据集上做分类，分割以及检测任务都在当时达到了SOTA的效果…
阅读更多...
货物税收问题，分段进行征税

货物税收问题，分段进行征税

税收问题&#xff0c;怎么把一个数按照部分进行计算呢&#xff1f;比如一个数大于10000&#xff0c;然后超过10000的部分按照5%计算&#xff0c;10000-5000的区间按照3%计算 在C中&#xff0c;你可以使用条件语句&#xff08;if-else语句&#xff09;来根据不同的条件计算税收…
阅读更多...
数据可视化篇——pyecharts模块

数据可视化篇——pyecharts模块

在之前的文章中我们已经介绍过爬虫采集到的数据用途之一就是用作可视化报表&#xff0c;而pyecharts作为Python中可视化工具的一大神器必然就受到广大程序员的喜爱。 一、什么是Echarts&#xff1f; ECharts 官方网站 : https://echarts.apache.org/zh/index.html ECharts 是…
阅读更多...
Python的错误和异常处理

Python的错误和异常处理

一、错误和异常 编程中出现的错误大致可以分为两类&#xff1a;错误和异常。 (一)错误 错误又可以分为两类&#xff1a;语法错误和逻辑错误。 1. 语法错误 语法错误又称解析错误&#xff0c;它是指在编写程序时&#xff0c;程序的语法不符合Python语言的规范&#xff0c;导致…
阅读更多...
广告行业中那些趣事系列65：使用chatgpt编写基金定投程序

广告行业中那些趣事系列65：使用chatgpt编写基金定投程序

导读&#xff1a;本文是“数据拾光者”专栏的第六十五篇文章&#xff0c;这个系列将介绍在广告行业中自然语言处理和推荐系统实践。本篇介绍了prompt生成器和使用chatgpt来编写一个基金定投程序&#xff0c;对于希望使用chatgpt提升工作效率&#xff0c;尤其是对投资基金感兴趣…
阅读更多...
【微服务 Spring Cloud Alibaba】- Nacos 服务注册中心

【微服务 Spring Cloud Alibaba】- Nacos 服务注册中心

目录 1. 什么是注册中心&#xff1f; 1.2 注册中心的作用 2. SpringBoot 整合 Nacos 实现服务注册中心 2.1 将服务注册到 Nacos 2.2 实现消费者 3. 服务列表各个参数的含义、作用以及应用场景 1. 什么是注册中心&#xff1f; 注册中心是微服务架构中的一个重要组件&…
阅读更多...
数模竞赛那么累，究竟能给我带来什么？

数模竞赛那么累，究竟能给我带来什么？

国赛官网上有这么一句话&#xff1a;一次参赛&#xff0c;终生受益。 学生时代&#xff0c;我对这句话没啥感触。 因为刚开始学数模时感觉很没头绪&#xff0c;书也看不懂&#xff0c;论文也看不懂&#xff0c;看啥都看不懂。 比赛时题目看不懂&#xff0c;答案搜不到&#xf…
阅读更多...
数据资产入表来了！企业如何构建数据资产

数据资产入表来了！企业如何构建数据资产

背景 2023年8月21日&#xff0c;财政部会计司公布《企业数据资源相关会计处理暂行规定》&#xff08;财会〔2023〕11号&#xff09;&#xff08;以下简称“《暂定规定》”&#xff09;&#xff0c;“数据资产入表”正式来了&#xff0c;为企业构建数据资产体系吹响号角&#x…
阅读更多...
【接口测试】目前市面上流行的接口大多有哪几种协议的接口？

【接口测试】目前市面上流行的接口大多有哪几种协议的接口？

首先&#xff0c;关于协议这个词&#xff0c;你要清楚。 接口测试它是基于什么进行测试的&#xff0c;接口测试是什么测试类型&#xff0c;其实有有时候问到一个问题&#xff0c;关联性很强。很多关联性的问题你都可以去考虑。 首先接口测试一个功能黑盒测试&后端&#x…
阅读更多...
go-gin-vue3-elementPlus带参手动上传文件

go-gin-vue3-elementPlus带参手动上传文件

文章目录 一. 总体代码流程1.1 全局Axios部分样例1.2 上传业务 二. 后端部分三. 测试样例 go的mvc层使用gin框架. 总的来说gin的formFile封装的不如springboot的好.获取值有很多的坑. 当然使用axios的formData也有不少坑.现给出较好的解决办法 以下部分仅贴出关键代码 一. 总…
阅读更多...
5分+肿瘤预后模型生信分析如何做？单细胞分析+干湿结合

5分+肿瘤预后模型生信分析如何做？单细胞分析+干湿结合

今天给同学们分享一篇单细胞分析干湿结合的生信文章“Tumor-associated endothelial cell prognostic risk model and tumor immune environment modulation in liver cancer based on single-cell and bulk RNA sequencing: Experimental verification”&#xff0c;这篇文章于…
阅读更多...
TypeScript之高级类型

TypeScript之高级类型

一、是什么 除了string、number、boolean 这种基础类型外&#xff0c;在 typescript 类型声明中还存在一些高级的类型应用 这些高级类型&#xff0c;是typescript为了保证语言的灵活性&#xff0c;所使用的一些语言特性。这些特性有助于我们应对复杂多变的开发场景 二、有哪…
阅读更多...
LoRaWan之LoRaMAC 的快速入门指南

LoRaWan之LoRaMAC 的快速入门指南

概述 本快速入门指南简要介绍了 LoRaMAC 层的重要操作。示例部分提供了不同设备类别的完整示例。 初始化 LoRaMAC层的初始化函数是LoRaMacInitialization( LoRaMacPrimitives_t *primitives, LoRaMacCallback_t *callbacks, LoRaMacRegion_t region )。该函数具有三个参数：L…
阅读更多...
企业通过ISO/IEC 27001的必要性阐述

企业通过ISO/IEC 27001的必要性阐述

文章目录 什么是ISO 27001?ISO 27001认证的必要性1&#xff0c;保护信息资产2&#xff0c;合规性要求3&#xff0c;提高客户信任4&#xff0c;降低安全风险5&#xff0c;提高内部效率6&#xff0c;改进供应链安全7&#xff0c;提高员工意识8&#xff0c;连续改进 推荐阅读 什么…
阅读更多...
最新文章

Copyright @ 2022~2023