Node.js EJS模板引擎
阿新 • • 發佈:2019-02-06
初識 EJS 模組引擎
我們學的 EJS 是後臺模板,可以把我們資料庫和檔案讀取的資料顯示到 Html 頁面上面。它 是一個第三方模組,需要通過 npm 安裝 https://www.npmjs.com/package/ejs
安裝:
npm install ejs –save / cnpm install ejs --save
Nodejs 中使用:
ejs.renderFile(filename, data, options, function(err, str){
// str => Rendered HTML string
});
EJS 常用標籤
<% %>
流程控制標籤<%= %>
輸出標籤(原文輸出 HTML 標籤)<%- %>
輸出標籤(HTML 會被瀏覽器解析)
//引入http模組
var http=require('http');
var url=require('url');
var ejs=require('ejs');
//路由:指的就是針對不同請求的 URL,處理不同的業務邏輯。
http.createServer(function(req,res){
res.writeHead(200,{"Content-Type" :"text/html;charset='utf-8'"});
var pathname=url.parse(req.url).pathname;
if(pathname=='/login'){
var data='你好我是後臺資料';
var list=[
'1111',
'2222',
'3333',
];
//把資料庫的資料渲染到模板上面
ejs.renderFile('views/login.ejs',{
msg:data,
list :list
},function(err,data){
res.end(data);
})
}else{
var msg='這是註冊頁面,也是註冊的路由';
var h="<h2>這是一個h2</h2>"
ejs.renderFile('views/register.ejs',{
msg:msg,
h:h
},function(err,data){
res.end(data);
})
}
}).listen(8001);
login.ejs
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<h2>這是一個ejs的後臺模板引擎-登入</h2>
<h2><%=msg%></h2>
<br/>
<hr/>
<ul>
<% for(var i=0;i<list.length;i++){%>
<li><%=list[i]%></li>
<% } %>
</ul>
</body>
</html>
register.ejs
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<h2>註冊</h2>
<%=msg%>
<br/>
<%-h%>
</body>
</html>