nodejs 返回html頁面--使用 ejs 模板

標籤：express   使用   home   test   --   擷取   設定   全域變數   bsp   

nodejs 可以直接在返回中使用html標籤，例如下面的格式，返回 hello world 將會使用 h1 字型。

app.get(‘/html‘,function(req,res){
　　res.status(200).send(‘<h1>hello world</h1>‘);
});

 

"E" is for "effective." EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. 

安裝ejs： npm install ejs 

例子一：

test_163:/home/exenode/jike # more ejslearn.js 
var express = require(‘express‘);

var app = express();

app.set(‘view engine‘,‘ejs‘);
app.set(‘views‘, __dirname + ‘/views‘);       //設定模板檔案檔案夾,__dirname為全域變數,表示網站根目錄。把view目錄下的檔案設定成模板檔案。

app.get(‘/‘,function(req,res){
　　res.render(‘home.ejs‘,{name:‘zzz‘});    //向頁面模板傳遞參數，可以傳遞字串和對象。 並且把頁面模板返回給用戶端。以json的格式傳給 模板頁面。

});

app.listen(3002);
test_163:/home/exenode/jike # more views/home.ejs 
<html>
　　<head>
　　　　<title> new template </title>
　　</head>
　　<body>
　　　　<p>Hello jikexueyuan</p>
　　　　<p>Hi <%= name %></p>
　　</body>
</html>

輸出的html頁面顯示：

Hello jikexueyuan

Hi zzz

 

例子二：

test_163:/home/exenode/jike # more ejslearn.js 
var express = require(‘express‘);
var app = express();

app.set(‘view engine‘,‘ejs‘);
app.set(‘views‘, __dirname + ‘/views‘);

app.get(‘/‘,function(req,res){
　　res.render(‘home.ejs‘,{name:‘zzz‘});
});

app.get(‘/request/:name‘,function(req,res){                                         //佈建要求url中 request 後的字串，儲存到 name 這個變數中。
　　// var locals = {name:‘westbrook‘,‘name‘:req.params[‘name‘]};       
　　var locals = {name:req.params[‘name‘]}                                       // 把 req.params[‘name‘] 的值作為 字典locals 的 key name 的值。 
　　res.render(‘home.ejs‘,locals);
});

app.listen(3002);
test_163:/home/exenode/jike # 
test_163:/home/exenode/jike # more views/home.ejs 
<html>
　　<head>
　　　　<title> new template </title>
　　</head>
　　<body>
　　　　<p>Hello jikexueyuan</p>
　　　　<p>Hi <%= name %></p>                             //擷取name的值。
　　　　<p>name:<%= name %></p>                        //擷取name的值。

　　　</body>
</html>

結果：

在前台瀏覽器中訪問： http://192.168.1.163:3002/request/test123  ，頁面顯示：

Hello jikexueyuan

Hi test123

my name is:test123

 分類: 前端

nodejs 返回html頁面--使用 ejs 模板