NodeJS 프레임워크 Express의 템플릿 보기 메커니즘 분석

<SPAN style="FONT-SIZE: 13px">app.get(&#39;/&#39;, function(req, res){ 
res.render(&#39;index.jade&#39;, { title: &#39;CSSer, 关注Web前端技术！&#39; }); 
}); 
</SPAN>

<SPAN style="FONT-SIZE: 13px">app.set(&#39;view engine&#39;, &#39;jade&#39;); 
</SPAN>

따라서 다음 방법을 사용할 수 있습니다.

<SPAN style="FONT-SIZE: 13px">res.render(&#39;index&#39;); 
</SPAN>

대신 방법:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;index.jade&#39;); 
</SPAN>

"뷰 엔진"이 설정된 후 템플릿 확장은 선택 사항이 되며 여러 템플릿 엔진을 혼합하여 사용할 수도 있습니다.

<SPAN style="FONT-SIZE: 13px">res.render(&#39;another-page.ejs&#39;); 
</SPAN>

Express는 또한 각 뷰 렌더링 후에 적용되는 뷰 옵션 설정을 제공합니다. 예를 들어 레이아웃을 자주 사용하지 않는 경우 다음과 같이 설정할 수 있습니다.

<SPAN style="FONT-SIZE: 13px">app.set(&#39;view options&#39;, { 
layout: false 
}); 
</SPAN>

필요한 경우 후속 res.render() 호출에서 이러한 설정을 재정의할 수 있습니다.

<SPAN style="FONT-SIZE: 13px">res.render(&#39;csser-view.ejs&#39;, { layout: true }); 
</SPAN>

경로 시스템 기본값을 바꾸려면 예를 들어 "view 엔진"을 jade로 설정하고 "./views/mylayout.jade"라는 레이아웃을 사용자 정의하는 경우 다음과 같이 사용할 수 있습니다.

<SPAN style="FONT-SIZE: 13px">res.render(&#39;page&#39;, { layout: &#39;mylayout&#39; }); 
</SPAN>

그렇지 않으면 확장자는 다음과 같아야 합니다. 지정됨:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;page&#39;, { layout: &#39;mylayout.jade&#39; }); 
</SPAN>

이 경로는 절대 경로일 수도 있습니다.

<SPAN style="FONT-SIZE: 13px">res.render(&#39;page&#39;, { layout: __dirname + &#39;///www.jb51.net/mylayout.jade&#39; }); 
</SPAN>

이에 대한 더 좋은 예는 사용자 정의 ejs 템플릿의 열기 및 닫기 태그입니다:

<SPAN style="FONT-SIZE: 13px">app.set(&#39;view options&#39;, { 
open: &#39;{{&#39;, 
close: &#39;}}&#39; 
}); 
</SPAN>

View Partials

<SPAN style="FONT-SIZE: 13px">partial(&#39;comment&#39;, { collection: comments }); 
</SPAN>

<SPAN style="FONT-SIZE: 13px">partial(&#39;comment&#39;, comments); 
</SPAN>

• firstInCollection 값은

• indexInCollection의 첫 번째 객체일 때 true입니다. 컬렉션의 개체 인덱스 값

• lastInCollection은 마지막 개체일 때 true입니다

• collectionLength 컬렉션의 길이

성능 팁: 부분 컬렉션을 사용하여 100 길이 배열을 렌더링하는 경우 뷰를 100번 렌더링해야 함을 의미합니다. 간단한 컬렉션의 경우 부분 컬렉션을 사용하는 대신 루프를 인라인할 수 있습니다. 시스템 비용을 줄일 수 있습니다.

View 조회

View 조회는 우리와 같은 상위 뷰를 기준으로 수행됩니다. "views/user/list.jade"라는 페이지 뷰입니다. 이 뷰에서 부분('edit')이 호출되면 뷰 시스템은 "views/user/edit.jade" 및 부분('. ./messages')는 "views/messages.jade"를 로드합니다.

뷰 시스템은 색인 템플릿도 지원하므로 동일한 이름의 디렉터리를 사용할 수 있습니다. 예를 들어, 경로에서 "views/users.jade" 또는 "views/users/index.jade"를 가리키는 res.render('users')를 실행합니다.

위 인덱스 뷰를 사용할 때 부분('users')을 사용하여 같은 이름의 디렉터리에서 "views/users/index.jade"를 참조할 수 있습니다. , 보는 동안 시스템은 "../users/index"를 시도하므로 부분('인덱스')을 호출할 필요성이 줄어듭니다.

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

Node.js의 경로 처리 모듈 경로 소개

# 🎜🎜#SpringBoot와 Vue.js는 프런트엔드와 백엔드 분리의 파일 업로드 기능을 실현합니다 🎜#

위 내용은 NodeJS 프레임워크 Express의 템플릿 보기 메커니즘 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!