nodejs 에서 art-template 템 플 릿 문법 도입 및 충돌 해결 방안

4520 단어 nodejsart-template
Webstorm 을 사용 하여 nodejs express 응용 프로그램 을 만 들 때 기본적으로 jade 나 ejs 템 플 릿 을 사용 합 니 다.이 두 가지 템 플 릿 문법 에 익숙 하지 않 은 사람 에 게 는 확실히 편리 하지 않 습 니 다.괜 찮 습 니 다.여 기 는 아 트 템 플 릿 엔진 을 사용 합 니 다.사용 후 html 템 플 릿 을 직접 사용 할 수 있 습 니 다.
1.아 트 템 플 릿 설치

npm install art-template
2.app.js 파일 을 수정 하고 다음 코드 를 추가 합 니 다.

// view engine setup
app.set('views', path.join(__dirname, 'views'));
var template = require('art-template');
template.config('base', '');
template.config('extname', '.html');
app.engine('.html', template.__express);
app.set('view engine', 'html');

3.그리고 html 페이지 를 직접 만 들 면 js 경로 에서 직접 방문 할 수 있 습 니 다.
4.우선 app.js 에 다음 경로 차단 을 추가 합 니 다.

var routes = require('./routes/index');

...

app.use('/', routes);

그리고 index.js 파일:

var express = require('express');
var router = express.Router();
var tags = require('../modules/tag.js');

router.get('/', function(req, res, next) {
 res.render("index2",{title:"index2",content:"index2's content"});
});

module.exports = router;

여기 서 index 2 페이지 로 넘 어 갑 니 다.(art-template 템 플 릿 엔진 을 설정 한 후 보기 층 의 기본 파일 접 두 사 는 html 입 니 다)index 2.html 페이지 는 다음 과 같 습 니 다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>{{title}}</title>
</head>
<body>
{{content}}
</body>
</html>

응용 프로그램 을 실행 합 니 다.브 라 우 저 출력 은 다음 과 같 습 니 다.

nodejs 에서 art-template 템 플 릿 문법 충돌 해결 방안
art-template 의 github 주소:https://github.com/aui/art-template
전단 개발 에 있어 서 매우 많은 템 플 릿 엔진 의 제3자 프레임 워 크 가 있 습 니 다.그 중에서 art-template 는 비교적 잘 쓴 것 에 속 합 니 다.일반적인 템 플 릿 엔진 의 제3자 가 1~2 가지 템 플 릿 문법 을 지원 합 니 다.가장 흔히 볼 수 있 는 것 은 수염 문법{{}}과 괄호 문법<%=%>입 니 다.
이 글 은 nodejs 에서 아 트 템 플 릿 엔진 문법 충돌 을 어떻게 해결 하 는 지 소개 합 니 다.
1.1-템 플 릿 엔진 문법 충돌 장면
1.html 파일 에 클 라 이언 트 렌 더 링 도 존재 하고 서버 렌 더 링 도 존재 한다 면 이 두 가지 렌 더 링 템 플 릿 엔진 문법 이 일치 하지 않 습 니 다.그렇지 않 으 면 로드 할 때 서버 렌 더 링 은 클 라 이언 트 의 템 플 릿 도 함께 렌 더 링 했 습 니 다.
2.일반적으로 html 파일 에 서버 렌 더 링 도 있 고 클 라 이언 트 렌 더 링 도 있 는 상황 에서 서버 의 템 플 릿 엔진 은{{}문법 을 사용 하고 클 라 이언 트 렌 더 링 은<%=%>를 사용 합 니 다.
3.nodejs 에서 저 희 는 npm 를 사용 하여 art-template 를 설치 한 후 npm install art-template 를 설치 합 니 다.기본 적 인 상황 에서 art-template 는 브 라 우 저 와 서버 를 동시에 지원 하 며 가 져 온 파일 이 다 릅 니 다.
1.2-art-template 서버 템 플 릿 문법 설정
1.서버 라면 require('art-template')를 사용 하여 가 져 옵 니 다.이 때 는 index.js 를 불 러 옵 니 다.이 index.js 는 루트 디 렉 터 리 에 있 는 index.js 일 가치 가 있 습 니 다.이것 은 nodejs 모듈 로 딩 메커니즘 의 입구 입 니 다.내부 가 매우 간단 합 니 다.바로 파일 가 져 오기 작업 을 한 것 입 니 다.
서버 의 art-template 템 플 릿 문법 소스 코드 는 art-template lib 폴 더 에 있 는 copile 폴 더 에 대응 하 는 adapter 에서 두 가지 템 플 릿 문법 에 대응 하 는 파일 은 rule.art.js 간결 문법,rule.native.js 원생 문법 입 니 다.다음 그림 입 니 다.
 
2.클 라 이언 트 라면 서버 의 템 플 릿 문법 파일 을 사용 할 수 없습니다.이것 은 nodejs 가 comonjs 의 규범 을 따 르 기 때 문 입 니 다.모든 파일 API 는 모듈 로 내 보 냅 니 다.art-template 폴 더,lib->copile 폴 더 에 클 라 이언 트 전용 템 플 릿 문법 파일 template-web.js 가 있 습 니 다.이것 은 압축 된 js 패키지 입 니 다.
 
3.브 라 우 저의 템 플 릿 문법 은 기본적으로 두 가지 문법 을 지원 합 니 다.간결 하고 원생 입 니 다.이것 은 수정 할 수 없습니다.그러나 서버 에서 템 플 릿 문법{{}}만 지원 하도록 서버 의 원본 코드 를 수정 할 수 있 습 니 다.그러면 클 라 이언 트 에서<%=%>문법 을 사용 하면 서버 가 렌 더 링 할 수 없습니다.
본인 이 art-template 소스 코드 에 대한 분석 을 통 해 art-template 서버 의 두 가지 템 플 릿 문법 은 copile 파일 아래 default.js 파일 에서 가 져 온 것 을 발 견 했 습 니 다.그래서 우 리 는 소스 코드 를 조금 만 수정 하면 됩 니 다.
기본 값 은 하나의 배열 로 템 플 릿 문법 을 설정 합 니 다.[nativeRule,artRule]은 두 가지 템 플 릿 문법 을 동시에 지원 합 니 다.저 희 는 nativeRule 를 제거 하면 됩 니 다.이 때 서버 에 서 는{}문법 만 지원 합 니 다.이 코드 수정 은 클 라 이언 트 에 영향 을 주지 않 습 니 다.
 
큰 성 과 를 거 두 었 습 니 다.이때 서버 와 클 라 이언 트 의 템 플 릿 문법 은 충돌 하지 않 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기