2022-09-19 01:23:01 +00:00
|
|
|
|
# 编写第一个插件
|
|
|
|
|
|
2022-11-06 00:34:03 +00:00
|
|
|
|
在开始前前,需要先安装好 NocoBase:
|
2022-09-19 01:23:01 +00:00
|
|
|
|
|
2022-11-06 00:34:03 +00:00
|
|
|
|
- [create-nocobase-app 安装](/welcome/getting-started/installation/create-nocobase-app)
|
|
|
|
|
- [Git 源码安装](/welcome/getting-started/installation/git-clone)
|
2022-09-19 01:23:01 +00:00
|
|
|
|
|
2022-10-06 09:21:56 +00:00
|
|
|
|
安装好 NocoBase 之后,我们就可以开始插件开发之旅了。
|
2022-09-19 01:23:01 +00:00
|
|
|
|
|
|
|
|
|
## 创建插件
|
|
|
|
|
|
2022-10-31 03:52:17 +00:00
|
|
|
|
首先,你可以通过 CLI 快速的创建一个空插件,命令如下:
|
2022-09-19 01:23:01 +00:00
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
yarn pm create hello
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-31 03:52:17 +00:00
|
|
|
|
插件所在目录 `packages/plugins/hello`,插件目录结构为:
|
2022-09-19 01:23:01 +00:00
|
|
|
|
|
2022-10-31 03:52:17 +00:00
|
|
|
|
```bash
|
2022-09-19 01:23:01 +00:00
|
|
|
|
|- /hello
|
|
|
|
|
|- /src
|
2022-10-31 03:52:17 +00:00
|
|
|
|
|- /client # 插件客户端代码
|
|
|
|
|
|- /server # 插件服务端代码
|
2022-09-19 01:23:01 +00:00
|
|
|
|
|- client.d.ts
|
|
|
|
|
|- client.js
|
2022-10-31 03:52:17 +00:00
|
|
|
|
|- package.json # 插件包信息
|
2022-09-19 01:23:01 +00:00
|
|
|
|
|- server.d.ts
|
|
|
|
|
|- server.js
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-31 03:52:17 +00:00
|
|
|
|
package.json 信息
|
|
|
|
|
|
|
|
|
|
```json
|
|
|
|
|
{
|
|
|
|
|
"name": "@nocobase/plugin-hello",
|
|
|
|
|
"version": "0.1.0",
|
|
|
|
|
"main": "lib/server/index.js",
|
|
|
|
|
"devDependencies": {
|
|
|
|
|
"@nocobase/client": "0.8.0-alpha.1",
|
|
|
|
|
"@nocobase/test": "0.8.0-alpha.1"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
NocoBase 插件也是 NPM 包,插件名和 NPM 包名的对应规则为 `${PLUGIN_PACKAGE_PREFIX}-${pluginName}`。
|
|
|
|
|
|
|
|
|
|
`PLUGIN_PACKAGE_PREFIX` 为插件包前缀,可以在 .env 里自定义,[点此查看 PLUGIN_PACKAGE_PREFIX 说明](/api/env#plugin_package_prefix)。
|
|
|
|
|
|
2022-09-19 01:23:01 +00:00
|
|
|
|
## 编写插件
|
|
|
|
|
|
2022-10-31 03:52:17 +00:00
|
|
|
|
查看 `packages/plugins/hello/src/server/plugin.ts` 文件,并修改为:
|
2022-09-19 01:23:01 +00:00
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
import { InstallOptions, Plugin } from '@nocobase/server';
|
|
|
|
|
|
2022-10-31 03:52:17 +00:00
|
|
|
|
export class HelloPlugin extends Plugin {
|
|
|
|
|
afterAdd() {}
|
2022-09-19 01:23:01 +00:00
|
|
|
|
|
2022-10-31 03:52:17 +00:00
|
|
|
|
beforeLoad() {}
|
2022-09-19 01:23:01 +00:00
|
|
|
|
|
|
|
|
|
async load() {
|
2022-10-31 03:52:17 +00:00
|
|
|
|
this.db.collection({
|
2022-09-19 01:23:01 +00:00
|
|
|
|
name: 'hello',
|
2022-10-31 03:52:17 +00:00
|
|
|
|
fields: [
|
|
|
|
|
{ type: 'string', name: 'name' }
|
|
|
|
|
],
|
2022-09-19 01:23:01 +00:00
|
|
|
|
});
|
2022-10-31 03:52:17 +00:00
|
|
|
|
this.app.acl.allow('hello', '*');
|
2022-09-19 01:23:01 +00:00
|
|
|
|
}
|
|
|
|
|
|
2022-10-31 03:52:17 +00:00
|
|
|
|
async install(options?: InstallOptions) {}
|
|
|
|
|
|
|
|
|
|
async afterEnable() {}
|
|
|
|
|
|
|
|
|
|
async afterDisable() {}
|
|
|
|
|
|
|
|
|
|
async remove() {}
|
2022-09-19 01:23:01 +00:00
|
|
|
|
}
|
|
|
|
|
|
2022-10-31 03:52:17 +00:00
|
|
|
|
export default HelloPlugin;
|
2022-09-19 01:23:01 +00:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 注册插件
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
yarn pm add hello
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 激活插件
|
|
|
|
|
|
2022-10-31 03:52:17 +00:00
|
|
|
|
插件激活时,会自动创建刚才编辑插件配置的 hello 表。
|
|
|
|
|
|
2022-09-19 01:23:01 +00:00
|
|
|
|
```bash
|
|
|
|
|
yarn pm enable hello
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-06 09:21:56 +00:00
|
|
|
|
## 启动应用
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
# for development
|
|
|
|
|
yarn dev
|
|
|
|
|
|
|
|
|
|
# for production
|
|
|
|
|
yarn build
|
|
|
|
|
yarn start
|
|
|
|
|
```
|
|
|
|
|
|
2022-09-19 01:23:01 +00:00
|
|
|
|
## 体验插件功能
|
|
|
|
|
|
2022-10-31 03:52:17 +00:00
|
|
|
|
向插件的 hello 表里插入数据
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
curl --location --request POST 'http://localhost:13000/api/hello:create' \
|
|
|
|
|
--header 'Content-Type: application/json' \
|
|
|
|
|
--data-raw '{
|
|
|
|
|
"name": "Hello world"
|
|
|
|
|
}'
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
查看 hello 表数据
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
curl --location --request GET 'http://localhost:13000/api/hello:list'
|
|
|
|
|
```
|