node+express+ejs 가 모델 엔진 을 사용 하여 만 든 예제 demo

6917 단어 express ejs 모듈 엔진

템 플 릿 엔진 이란 무엇 입 니까?
템 플 릿 엔진(Template Engine)은 페이지 템 플 릿 과 표시 할 데 이 터 를 결합 하여 HTML 페이지 를 만 드 는 도구 입 니 다.위 에서 말 한 express 의 경로 제어 방법 이 MVC 의 컨트롤 러 에 해당 한다 면 템 플 릿 엔진 은 MVC 의 보기 에 해당 합 니 다.
템 플 릿 엔진 의 기능 은 페이지 템 플 릿 과 표시 할 데 이 터 를 결합 하여 HTML 페이지 를 만 드 는 것 입 니 다.서버 에서 실행 할 수도 있 고 클 라 이언 트 에서 실행 할 수도 있 습 니 다.대부분의 경우 서버 에서 HTML 로 직접 해석 되 고 분석 이 끝 난 후에 클 라 이언 트 에 전송 되 기 때문에 클 라 이언 트 는 페이지 가 템 플 릿 엔진 으로 생 성 되 었 는 지 판단 할 수 없습니다.가끔 템 플 릿 엔진 도 클 라 이언 트,즉 브 라 우 저 에서 실 행 될 수 있 습 니 다.전형 적 인 대 표 는 XSLT 입 니 다.XML 을 입력 하여 클 라 이언 트 에서 HTML 페이지 를 생 성 합 니 다.하지만 브 라 우 저 호환성 문제 로 XSLT 가 유행 하 지 는 않 는 다.현재 의 주 류 는 역시 서버 가 템 플 릿 엔진 을 실행 하 는 것 이다.
MVC 구조 에서 템 플 릿 엔진 은 서버 쪽 에 포함 되 어 있 습 니 다.컨트롤 러 가 사용자 의 요청 을 받 은 후 모델 에서 데 이 터 를 가 져 와 템 플 릿 엔진 을 호출 합 니 다.템 플 릿 엔진 은 데이터 와 페이지 템 플 릿 을 입력 하여 HTML 페이지 를 만 든 다음 컨트롤 러 에 게 돌아 가 컨트롤 러 에서 클 라 이언 트 에 게 전달 합 니 다.
전단 에 자주 사용 되 는 템 플 릿 엔진 은 무엇 입 니까?
jade
jade 는 고성능 의 node JavaScript 템 플 릿 엔진 으로 매우 강력 한 API 와 대량의 뛰어난 특성 을 가지 고 있 습 니 다.그것 은 주로 node 서버 를 대상 으로 합 니 다.
2.EJS
EJS 는 템 플 릿 엔진 의 하나 이자 우리 튜 토리 얼 에서 사용 하 는 템 플 릿 엔진 입 니 다.사용 하기에 매우 간단 하고 express 와 잘 통합 되 어 있 기 때 문 입 니 다.
3.핸들 바
Handlebars 는 JavaScript 의 의미 템 플 릿 라 이브 러 리 로 view 와 data 의 분 리 를 통 해 웹 템 플 릿 을 빠르게 구축 합 니 다.이 는'Logic-less template'(논리 적 모드 없 음)의 사 고 를 사용 하여 클 라 이언 트 가 코드 를 실행 할 때 컴 파일 되 는 것 이 아니 라 템 플 릿 로드 와 실행 속 도 를 확보 할 수 있 습 니 다.Handlebars 는 Mustache 를 호 환 합 니 다.Handlebars 에서 Mustache 템 플 릿 을 가 져 올 수 있 습 니 다.
템 플 릿 엔진 사용
app.js 에서 다음 두 줄 코드 를 통 해 템 플 릿 파일 의 저장 위치 와 사용 하 는 템 플 릿 엔진 을 설정 합 니 다.


// view engine setup 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'ejs');

주의:우 리 는 통과 express-e blog 는 ejb 템 플 릿 엔진 을 사용 하 는 프로젝트 를 초기 화 했 을 뿐 입 니 다.예 를 들 어 nodemodules 에 ejs 모듈 을 추 가 했 습 니 다.views 폴 더 에 index.ejs 가 있 습 니 다.이 프로젝트 에 ejb 만 사용 하도록 강요 하 는 것 이 아니 라 다른 템 플 릿 엔진 을 사용 할 수 없습니다.예 를 들 어 jade,어떤 템 플 릿 엔진 을 사용 할 지 진정 으로 지정 한 것 은? app.set('view engine', 'ejs'); 。
routes/index.js 에서 res.render()렌 더 링 모델 을 호출 하여 생 성 된 페이지 를 클 라 이언 트 에 게 직접 되 돌려 줍 니 다.두 개의 인 자 를 받 아들 입 니 다.첫 번 째 는 템 플 릿 의 이름 입 니 다.views 디 렉 터 리 에 있 는 템 플 릿 파일 이름 입 니 다.확장자.ejb 를 선택 할 수 있 습 니 다.두 번 째 매개 변 수 는 템 플 릿 에 전 달 된 데이터 대상 으로 템 플 릿 번역 에 사 용 됩 니 다.
views/index.ejs 를 엽 니 다.내용 은 다음 과 같 습 니 다.
index.ejs


<!DOCTYPE html> 
<html> 
 <head> 
  <title><%= title %></title> 
  <link rel='stylesheet' href='/stylesheets/style.css' /> 
 </head> 
 <body> 
  <h1><%= title %></h1> 
  <p>Welcome to <%= title %></p> 
 </body> 
</html>

res.render('index',{title:'Express'});템 플 릿 엔진 은<%=title%>를 Express 로 바 꾼 다음 바 뀐 페이지 를 사용자 에 게 표시 합 니 다.
렌 더 링 후 생 성 된 페이지 코드 는:


<!DOCTYPE html> 
<html> 
 <head> 
  <title>Express</title> 
  <link rel='stylesheet' href='/stylesheets/style.css' /> 
 </head> 
 <body> 
  <h1>Express</h1> 
  <p>Welcome to Express</p> 
 </body> 
</html>

주의:우 리 는 통과 app.use(express.static(path.join(__dirname,'public')))))정적 파일 디 렉 터 리 를 Public 폴 더 로 설정 하여 위 코드 에 있 는 href='/stylesheets/style.css'는 href='public/stylesheets/style.css'에 해당 한다.
ejb 의 태그 시스템 은 매우 간단 합 니 다.다음 세 가지 태그 만 있 습 니 다.

<% code %>： JavaScript 코드..

<%=code%>:HTML 특수 문 자 를 바 꾼 내용 을 표시 합 니 다

<%-code%>:원본 HTML 내용 을 표시 합 니 다.

주의:
<%=code%>와 <%- 코드%>의 차 이 는 변수 코드 가 일반 문자열 일 때 차이 가 없습니다.code

hello

이 문자열 은<%=code%>그대로 출력 됩 니 다.

hello

,그리고 <%- code%>는 H1 대 hello 문자열 을 표시 합 니 다.
간단 한 예
명령 을 통 해 ejb 프로젝트 를 새로 만 듭 니 다:express-e demo

index.js 에 다음 코드 를 추가 합 니 다:


var express = require('express'); 
var router = express.Router(); 
 
 
var items=[{title:'  1'},{title:'  2'}]; 
 
/* GET home page. */ 
router.get('/', function(req, res, next) { 
 res.render('index',{title:'    ',items:items}); 
}); 
 
router.get('/form', function(req, res, next) { 
  res.render('form',{title:'    ',message:'fendo8888'}); 
}); 
 
router.post('/form', function(req, res, next) { 
 res.redirect('/'); 
}); 
 
 
module.exports = router;

views 에서 새 form.ejs 에 다음 코드 를 추가 합 니 다.


<!DOCTYPE html> 
<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title><%= title %></title> 
  <link rel='stylesheet' href='/stylesheets/style.css' /> 
 </head> 
 <body> 
  <form method="post" action="/form"> 
    <label>new article</label><br> 
    <textarea name="text" cols="100" row="5"></textarea> 
    <input type="submit" value="pus"></input> 
  </form> 
  <div><%=message%></div> 
 </body> 
</html>

index.ejs 에 다음 코드 를 추가 합 니 다:


<!DOCTYPE html> 
<html> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>     </title> 
  <link rel='stylesheet' href='/stylesheets/style.css' /> 
 </head> 
 <body> 
  <h1><%= title %></h1> 
  <p><a href="/form" rel="external nofollow" >     </a></p> 
  <ul> 
    <%items.forEach(function(item){%> 
     <li><%=item.title%></li> 
     <%})%> 
  </ul> 
 </body> 
</html>

실행 항목:npm start