서 문 .
이전 기사 에서는 Node - R ED 의 editor - api 모듈 에 대해 설명 했습니다 .그것은 주로 프 런 트 엔 드 인터페 이스 에 제공 되는 데 사용됩니다 .
이 기사 에서는 Node - R ED 의 editor - client 모듈 을 살펴 보 겠습니다 .
이 모듈 은 프 런 트 엔 드 코드 이며 , 우리가 보는 인터페 이 스를 결정 합니다 .
Node - R ED 의 인터페 이 스를 수정 하려는 경우 , 자세히 살펴 봐야 합니다 .
아래 에서 함께 살펴 보자 .
편집 기 - 클 라이언 트
package / node _ models / editor - client 디 렉 토 리에 있습니다 .
4 개의 핵심 카 탈 로그 가 있습니다 .
- 지역 인터페 이스 의 국제 번역 , 당신은 특정 텍스트 를 수정 하려는 경우 , 당신은 여기에서 그것을 찾아 야합니다 .
- public 이 디 렉 토 리에 의해 컴 파 일 된 파 일이 저장 됩니다 .일반적으로 수정 되지 않습니다 .
- sr c 스트 림 편집 기의 핵심 파일 은 편집 기의 모든 비즈니스 코드 , 구성 요소 및 리 소 스를 저장 합니다 .
- 템 플 릿 프로그램 입 구 , m st 파일 .
editor-client下的第一级目录就是这样子的。
로 컬 디 렉 토 리 에는 다양한 언어 버전 의 번역 이 저장 되어 있습니다 .
zh - CN 은 중국 어 간 체 입니다 .
zh - T W 는 중국 어 전통 체 입니다 .
en - US 영어
먼저 sr c 디 렉 토 리를 살펴 보자 .
sr c 디 렉 터 리
아래 에서 아래 로 , 목록 은 각각
- Ace 코드 편집 기의 리 소 스 저장 소
- Images 모든 이미지
- js 편집 기 코 드가 중요합니다 .
- s ass 편집 기 스타일 파일
- 투 어 사전 설정 스트 림 , 데 모 또는 릴 리스 피 쳐
- types ts 의 선언 유형
- Ace , j qu ery , mona co , d 3, font - awesome 와 같은 공급 업체 외부 종 속 라이 브 러 리
Node - R ED 페이지 의 이미지 , 아이 콘 을 수정 하려는 경우 이미 지에서 찾아 동일한 이름 의 이미지 파일 로 대체 할 수 있습니다 .
Node - R ED 의 현재 버전 은 3. x 입니다 .이 버전 의 기본 코드 편집 기는 mona co 이 지만 전환 으로 Ace Editor 의 코 드는 여전히 코 드에 남아 있으며 사용자는 구 성을 전환 하고 Ace Editor 를 계속 사용할 수 있습니다 .
sass目录存放的是页面上所有的css样式，其中比较重要的是
이 파일 은 node - red 이 사용하는 CSS 스타일 변 수를 정의 하며 , 이러한 변 수를 변경 하면 한 번에 여러 곳에서 스타 일을 변경 할 수 있습니다 .
구체적인 각 변 수가 사용되는 곳은 또 신중 하게 숙 고 해야 한다 .
sr c 에서 핵심 디 렉 토 리는 js 디 렉 토 리 입니다 .이 디 렉 토 리의 입 구는 main . js 입니다 .
모든 메 서 드 및 변 수는 R ED 객 체 에 정의 됩니다 .
이벤트 구 독 , 배 포 이벤트 , 작업 스 택 역사 , 후 크 후 크
플 러 그 인 플 러 그 인 , 설정 , 로 그 인 사용자 UI 및 논 리 , 로 그 인 팝 업 창 이 더 추 하다고 생각 되면 user . js 에서 수정 할 수 있습니다 .
Node - R ED 에서 2 차 인터페 이스 개발 을 할 때 불편 한 점은 그의 dom 구조 의 대부분이 j qu ery 를 사용하여 접 합 된다는 것입니다 .
따라서 node - red 에서 HTML 코드를 찾을 수 없습니다 .
예를 들어 , 랜 딩 페이지 의 팝 업
var dialog = $(' div id = " n ode - dialog - login " class = " h ide " style = " display : flex ; alig n - items : flex - end ; "> ' +<
'
'
'
'
'
dialog . dialog ({
자동 열 기 : false ,
클래 스 : {
" ui - dialog ": " red - ui - editor - dialog ",
" ui - dialog - title bar - close ": " h ide ",
" ui - wid get - over lay ": " red - ui - editor - dialog "
},
모 드 : true ,
close On Es cape : !! op ts . canc ella ble ,
폭 : 600 ,
크기 조정 가능 : false ,
드 래 그 가능 : false ,
close : function (ev ent , ui) {
$( " # node - dialog - login "). dialog (' d estro y '). remove ();
R ED . key board . enable ()
}
});UI 섹션 의 페이 지는 찾 기가 쉽지 않지만 다행히 도 node - red 은 UI 에 대한 좋은 분류 를 했습니다 .
편집 기의 UI 의 대부분은 js / ui 디 렉 토 리에 저장 됩니다 .배 포 버튼 , 이벤트 로 그 , 키 누 르기 , 알 림 , 붙 여 넣 기 등 과 같은 ...잠깐 만 요 .
요 약
많은 가 전 제 품 에 " 고 전 압 이 있어요 " 라고 붙 인 것처럼 ,비전문가들은 해체하지 마라. " Node - RED 를 수정하는 것도 마찬가지이며 전신을 움직입니다.
맞춤형이 필요한 경우 전문가를 찾으십시오.
发表回复