빠른숙달노코베이스플러그인개발 및 심층맞춤기능
아키텍처노코베이스 아키텍처 설계에 대해 자세히 알아보기
플러그인개발완전한 플러그인 개발 프로세스
심층맞춤: 확장을 통한 시스템 수준 맞춤
노코베이스의 아키텍처 설계에 대한 심층적인 이해, 플러그인 개발 및 맞춤화를 위한 기반 마련
NocoBase모듈식 아키텍처로 설계, 주로 다음과 같이 구성됩니다. 핵심 부분적으로 구성됩니다:
노코베이스의 플러그인 시스템의 확장성 핵심, 주요 기능은 다음과 같습니다:
완전한 플러그인 개발 프로세스, 제작부터 퍼블리싱까지
노코베이스가 제공하는 플러그인 스캐폴딩으로 새로운 플러그인을 만들어 보세요!
# 노코베이스 프로젝트 루트 디렉토리에서 실행합니다.
npm 실행 create-plugin 내-플러그인
플러그인 기본 구조 및 구성 파일 이해
my-plugin/
├── package.json # 플러그인 구성
├── src/
│ ├── server/ # 백엔드 코드
│ ├── client/ # 프론트엔드 코드
│ └── index.ts # 플러그인 포털
└── README.md # 플러그인 설명
서버 카탈로그에서 백엔드 로직 구현하기
// src/server/index.ts
'@nocobase/server'에서 { 플러그인 }을 가져옵니다;
export class MyPlugin extends Plugin {
async load() {
// API 경로 등록
this.app.router.get('/api/my-plugin/hello', async (ctx) => {
ctx.body = { message: '내 플러그인에서 안녕하세요!}
});
// 훅 등록
this.app.on('beforeLoad', async () => {
// 플러그인 로딩 전 로직
});
}
}
기본 마이플러그인 내보내기.
클라이언트 프론트엔드의 카탈로그 구현 컴포넌트
// src/client/index.tsx
'react'에서 React를 임포트합니다;
'@nocobase/client'에서 { Plugin }을 임포트합니다;
export class MyPluginClient extends Plugin {
async load() {
// 프론트엔드 라우터 등록
this.app.router.add('my-plugin', {
경로: '/my-플러그인', 컴포넌트: () => my-플러그인', {
component: ()=> My Plugin Page
}).
// 메뉴 등록
this.app.menu.add('my-plugin', {
name: '내 플러그인', icon: '설정', {
아이콘: '설정', 경로: '/my-플러그인', }
경로: '/my-플러그인'
});
}
}
기본 MyPluginClient 내보내기.
package.json에서 플러그인 정보 구성하기
// package.json
{
"name": "my-plugin",
"version": "1.0.0",
"description": "My NocoBase plugin",
"main": "lib/index.js",
"nocobase": {
"type": "plugin",
"name": "my-plugin",
"title": "My Plugin",
"description": "This is my plugin",
"icon": "Settings"
},
"dependencies": {
"@nocobase/server": "^1.0.0",
"@nocobase/client": "^1.0.0"
}
}
노코베이스에 설치하세요!
# 구축플러그인
cd 내-플러그인
npm 설치
npm 실행 빌드
# 노코베이스에 설치
cd ...
npm 설치 . /packages/plugins/my-plugin
# 노코베이스 시작
npm 실행 개발
복잡한 비즈니스 요구 사항을 충족하는 시스템 수준 맞춤 및 확장 기능
를 통해 핵심 모듈의 메서드를 재작성하거나 확장하여 기능 맞춤을 구현합니다.
시스템 제공을 이용한 훅, 특정 시간에 사용자 지정 로직 실행하기
확장된 데이터 라이브러리 모델, 사용자 지정 필드 및 관계 추가
개발자가 정의한 종단 컴포넌트, 기본값 교체 또는 확장 컴포넌트
색상, 글꼴, 레이아웃 등으로 시스템 테마를 사용자 지정하세요!
사용자 지정 프런트엔드 라우팅, 새 페이지 및 네비게이션 추가
// 플러그인의 server/index.ts에서
'@nocobase/server'에서 { 플러그인 }을 가져옵니다.
내보내기 클래스 MyPlugin 확장 플러그인 {
async load() {
// 사용자 정의 API 경로 추가
this.app.router.get('/api/custom/hello', async (ctx) => {
// 사용자 지정 로직 구현
const { name } = ctx.query;
ctx.body = {
message: `Hello, ${name || 'world'}! `, timestamp: new Date(); ctx.body = { message
timestamp: new Date().toISOString()
}
});
// 인증이 필요한 API 추가
this.app.router.post('/api/custom/protected', this.app.authMiddleware(), async (ctx) => {
// 인증사용자만
const user = ctx.state.currentUser;
ctx.body = {
메시지: '이것은 보호된 API입니다',
user: {
id: user.id, username: user.username
사용자명: 사용자.사용자명
}
}; }
});
}
}
기본 마이플러그인 내보내기.
// 클라이언트/컴포넌트/MyComponent.tsx의 플러그인에서
'react'에서 React를 가져옵니다.
'antd'에서 { 버튼, 카드, 타이포그래피 }를 가져옵니다;
const { 제목, 단락 } = 타이포그래피.
export const MyComponent: React.FC = () => {
const [count, setCount] = React.useState(0);
반환 (
Counter
Current count: {count}
);
}.
// 플러그인의 client/index.tsx에 등록하기
'@nocobase/client'에서 { 플러그인 }을 임포트합니다;
import { MyComponent } from '. /components/MyComponent';
export class MyPluginClient extends Plugin {
async load() {
// 컴포넌트 등록
this.app.components.register('MyComponent', MyComponent);
// 경로 추가
this.app.router.add('my-plugin', {
경로: '/my-플러그인',
component: MyComponent
});
}
}
기본 내보내기 MyPluginClient.
플러그인 개발 및 맞춤, 코드품질 및 유지보수성 보장 모범 사례
A: NocoBase의 개발 모드를 사용하여 다음을 실행합니다.npm run dev핫 리로드를 지원하는 런처 개발 서비스 웨어. 프론트엔드는 Chrome 개발자 도구를 사용하여 디버깅할 수 있으며, 백엔드는 VS 코드에서 디버깅을 위한 중단점 설정에서 찾을 수 있습니다.
A: 플러그인의 package.json을 통해 종속성을 선언하면 노코베이스가 플러그인의 로딩 순서를 자동으로 처리합니다. 플러그인에서 기타 확인 방법플러그인이 이미 로드되었는지 확인할 수도 있습니다.
A: 통해this.app.db데이터 라이브러리 인스턴스에 액세스하려면 데이터 라이브러리 작업용 시퀄라이즈 ORM을 사용할 수 있습니다. 예시:const User = this.app.db.getModel('users');
A: 먼저 플러그인이 릴리스 사양을 충족하는지 확인한 다음, 노코베이스 플러그인 마켓플레이스에 계정을 등록하고 가이드라인에 따라 플러그인을 제출하세요. 플러그인 이름, 설명, 버전 정보 및 구축 제품을 제공해야 합니다.