一、基本路由配置
App.js：
var http=require("http");
var url=require("url");
http.createServer(function(req,res){
//根據路由加載頁面
var path=url.parse(req.url).pathname;
if(path=="/"){
res.end("index.html");
}
else if(path=="/login"){
res.end("login.html");
}
else{
res.end("regest.html");
}
}).listen(8100);
二、ejs模板
EJS 是一套簡單的模板語言，可以利用普通的 JavaScript 代碼生成 HTML 頁面。
-
安裝：
cnpm install ejs --save -
使用：
var ejs = require('ejs'),
people = ['Sam', 'Alice', 'Mary'],
html = ejs.render('<%= people.join(", "); %>', {people: people});
- 實例
<% if (res) { %>
<h2><%= res.name %></h2>
<% } %>
var template = ejs.compile(str, options);
template(data); // 輸出繪製後的 HTML 字符串
ejs.render(str, data, options); // 輸出繪製後的 HTML 字符串
ejs.renderFile(filename, data, options, function(err, str){
// str => 輸出繪製後的 HTML 字符串
});
- 參數
- 標籤
- 包含（include）
include 指令可以將相對於模板路徑中的模板片段包含進來（需要提供 ‘filename’ 參數）
例：如果存在 “./views/users.ejs” 和 “./views/user/show.ejs” 兩個模板文件，通過 <%- include(‘user/show’); %> 代碼包含後者。
需要能夠輸出原始內容的標籤 (<%-) 用於 include 指令，避免對輸出的 HTML 代碼做轉義處理。
<ul>
<% users.forEach(function(user){ %>
<%- include('user/show', {user: user}); %>
<% }); %>
</ul>
三、傳遞渲染值
-
基本路由配置完成之後，根據路由導出頁面渲染，安裝ejs模板，自動生成package.json文件以及依賴包，使用的時候需要去導入
-
常用標籤：
<%= %> 綁定標籤數據
<% 腳本 %>
<%- include("./index.ejs")%>
<%_ %> 綁定數據去除前面多餘的空格
- 示例
App.js：
var http=require("http");
var url=require("url");
var ejs=require("ejs");
http.createServer(function(req,res){
//根據路由加載頁面
var path=url.parse(req.url).pathname;
if(path=="/"){
//ejs模板 渲染單個變量
var name="yian"
ejs.renderFile("assets/index.ejs",{
name:name
},function(err,str){
res.end(str);
});
}
else if(path=="/login"){
//ejs模板 渲染多個變量
var arr=[1,2,3,4,5,6];
ejs.renderFile("assets/login.ejs",{
array:arr
},function(err,str){
res.end(str);
});
}
else{
//ejs模板 綁定json數據
var stu=[
{name:"kun",age:20},
{name:"ikun",age:21}
]
ejs.renderFile("assets/regest.ejs",{
student:stu
},function(err,str){
res.end(str);
});
}
}).listen(8100);
index.ejs：
<body>
<p>我是首頁</p>
<p>ejs模板綁定數據</p>
<p><%=name%></p>
<%- include('./moban.ejs')%>
</body>
login.ejs：
<body>
<p>我是註冊界面</p>
<p>ejs模板綁定數據</p>
<ul>
<%for(var i=0;i<array.length;i++){%>
<li><%=array[i]%></li>
<%}%>
<%array.forEach(function(val,index){%>
<li><%=val%></li>
<%})%>
</ul>
</body>
regest.ejs：
<body>
<p>我是登錄界面</p>
<p>ejs模板綁定數據</p>
<div>
<%for(var i=0;i<student.length;i++){%>
<div><%=student[i].name%>------<%=student[i].age%></div>
<%}%>
</div>
</body>
moban.ejs：
<div>
<p>我是模板頁面</p>
<p><%=name%></p>
</div>
目錄：
