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

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

 

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

 
分类: 前端
posted @ 2016-10-26 12:18  吃饭了吗  阅读(4691)  评论(0编辑  收藏  举报