[2분 인상 잡기] 템플릿 엔진 EJS(1/2)
7619 단어 Node.jsJavaScript초보자
줄거리
준비물
npm install ejs
결국 EJS가 뭐예요?
<%=값%>
↑.
변수를 HTML 파일에 전달할 수 있습니다!
hello.ejs
<html>
<body>
<header>
<h1 id="h1"><%= 値 %></h1>
</header>
</body>
</html>
EJS
견본
hello.ejs
<html lang="ja">
<body>
<header>
<h1 id="h1"><%=title %></h1>
</header>
<div role="main">
<p><%-content %></p>
</div>
</body>
</html>
var http = require('http');
// ファイルの読み込み(は、fsオブジェクトが担当する)
var fs = require('fs');
// テンプレートデータのレンダリング(は、ejsが担当する)
var ejs = require('ejs');
// ここは同期処理で読み込みます！
var hello = fs.readFileSync('./hello.ejs', 'utf8');
var server = http.createServer();
server.on('request', doRequest);
server.listen(1234);
console.log('Server running!');
// リクエストの処理
function doRequest(req, res) {
// ここでejsオブジェクトが働きます
var hello2 = ejs.render(hello, {
title:"title",
content:"This is made by sample",
});
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(hello2);
res.end();
}
결과(CSS 등으로 장식되어 있음)
포인트!
var hello2 = ejs.render(hello, {
title:"タイトルです",
content:"これはサンプルで作成したテンプレートです。",
});
ejs.render( テンプレートデータ , オプション );
총결산
EJS는 변수를 서버 쪽(js)에서 템플릿 파일(html)로 전달할 수 있습니다!
다음
Reference
이 문제에 관하여([2분 인상 잡기] 템플릿 엔진 EJS(1/2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Azu-MAX/items/7ad857e2ace6e51cd5e5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
