nodejs express template (模版)的使用 (ejs + express)
2017-08-23 21:02
666 查看
转自:http://www.cnblogs.com/rubylouvre/p/3421805.html
1、上面是express使用模版的一个基本例子
app.set("view engine","ejs"); 这句将模版引擎设置为 ejs (http://github.com/visionmedia/ejs)
ejs可通过 npm install ejs 来进行安装
2、在app.get中。
res.render('users', { users: users, title: "EJS example", header: "Some users" }); 会执行2个步骤。
会读取 ./views/index.ejs文件的内容,然后将其中的title变量替换为EJS example,例如<%=title%>会变为EJS example。假设返回的内容为content1
接着,会读取./views/layout.ejs,并将其中的body变量替换为content1,例如<%=body%>会变为content1的内容。
3、在2中,如果不愿意使用默认的layout.ejs,可自行指定。例如:
或
4、如果不愿意使用layout,则可以设置layout为false,例如:
5、如果不想每个请求都单独设置一次。可以使用全局设置:
6、ejs 里,默认的闭合标记是 <% .. %>,我们也可以定义自己的标签。例如:
7、 每个模版引擎的用法都有所异同,总体的使用方法都是上面这样的。
以下是目前常用的模版引擎:
Below are a few template engines commonly used with Express:
Haml haml implementation
Jade haml.js successor
EJS Embedded JavaScript
CoffeeKup CoffeeScript based templating
jQuery Templates for node
8、在web应用中,经常会需要重复显示某个内容,例如:用户评论功能,需要重复显示出每一条用户的评论,这个时候,我们可以通过循环来实现。但是也可以使用【局部模版】(partial)来实现。例如:
首先我们建一个局部的模版 ./views/comment.ejs:
注意:这里是comment.xxxx
然后在./views/index.ejs中,通过partial调用comment
注意:这里是 partial("comment.ejs", comments); <-- 单词要用复数。
最后是在router中,调用index.ejs。
注意:代码里的 comments 和 index.ejs的 comments变量名称一致,而partial所调用的comment.ejs中,则采用 comment 的单数形式。
查看源代码:效果图如下:
在列表显示时,我们通常会遇到的场景是,对第一个元素或者最后一个元素加以特殊显示。在partial中,我们可以通过express内置的变量来判断当前对象是否是第一个元素或者最后一个元素,例如:
这样第一条评论的 class 里就会多一个firstitem。
类似的内置变量还有:
firstInCollection 如果是数组的第一个元素,则为true
indexInCollection 当前元素在数组里的索引
lastInCollection 如果是数组的最后一个元素,则为true
collectionLength 数组的长度
最后是partial调用模版时的路径查找问题:
partial("edit") 会查找同目录下的edit.ejs文件。
partial("../message") 会查找上一级目录的message.ejs文件。
partial("users") 会查找 users.ejs文件,如果不存在users.ejs, 则会查找 /users/index.ejs文件。
<%= users %>会对内容进行转义,想不转义,可以用<%- users %>。
var express = require("express") var app = express(); //注册ejs模板为html页。简单的讲,就是原来以.ejs为后缀的模板页,现在的后缀名可以//是.html了 app.engine('.html', require('ejs').__express); //设置视图模板的默认后缀名为.html,避免了每次res.Render("xx.html")的尴尬 app.set('view engine', 'html'); //设置模板文件文件夹,__dirname为全局变量,表示网站根目录 app.set('views', __dirname + '/views'); app.use(express.static(__dirname + '/public')); var users = [ {name: 'tobi', email: 'tobi@learnboost.com'}, {name: 'loki', email: 'loki@learnboost.com'}, {name: 'jane', email: 'jane@learnboost.com'} ]; app.get('/', function(req, res) { //向页面模板传递参数,可以传递字符串和对象,注意格式 res.render('users', { users: users, title: "EJS example", header: "Some users" }); }); if (!module.parent) { app.listen(3000); console.log('Express app started on port 3000'); }
app.set("view engine","ejs"); 这句将模版引擎设置为 ejs (http://github.com/visionmedia/ejs)
ejs可通过 npm install ejs 来进行安装
2、在app.get中。
res.render('users', { users: users, title: "EJS example", header: "Some users" }); 会执行2个步骤。
会读取 ./views/index.ejs文件的内容,然后将其中的title变量替换为EJS example,例如<%=title%>会变为EJS example。假设返回的内容为content1
接着,会读取./views/layout.ejs,并将其中的body变量替换为content1,例如<%=body%>会变为content1的内容。
3、在2中,如果不愿意使用默认的layout.ejs,可自行指定。例如:
res.render("index",{"title":"test","layout":"main"});
或
res.render("index",{"title":"test","layout":"main.ejs"});
4、如果不愿意使用layout,则可以设置layout为false,例如:
res.render("index",{"layout":false});
5、如果不想每个请求都单独设置一次。可以使用全局设置:
app.set("view options",{ "layout":false });
6、ejs 里,默认的闭合标记是 <% .. %>,我们也可以定义自己的标签。例如:
app.set("view options",{ "open":"{{", "close":"}}" });
7、 每个模版引擎的用法都有所异同,总体的使用方法都是上面这样的。
以下是目前常用的模版引擎:
Template Engines
Below are a few template engines commonly used with Express:Haml haml implementation
Jade haml.js successor
EJS Embedded JavaScript
CoffeeKup CoffeeScript based templating
jQuery Templates for node
8、在web应用中,经常会需要重复显示某个内容,例如:用户评论功能,需要重复显示出每一条用户的评论,这个时候,我们可以通过循环来实现。但是也可以使用【局部模版】(partial)来实现。例如:
首先我们建一个局部的模版 ./views/comment.ejs:
<div class="comment_item"> <div class="comment_user"><%=comment.user%></div> : <div class="comment_content"><%=comment.content%></div> </div>
注意:这里是comment.xxxx
然后在./views/index.ejs中,通过partial调用comment
this is <%=title%>! <br/> <%- partial("comment",comments)%>
注意:这里是 partial("comment.ejs", comments); <-- 单词要用复数。
最后是在router中,调用index.ejs。
var app=require("express").createServer(); app.set("view engine","ejs"); app.get("/",function(req,res){ res.render("index",{"title":"test","layout":false,"comments":[ {"user":"gainover","content":"test1"}, {"user":"zongzi","content":"test2"}, {"user":"maomao","content":"test3"} ]}); }); app.listen(3000);
注意:代码里的 comments 和 index.ejs的 comments变量名称一致,而partial所调用的comment.ejs中,则采用 comment 的单数形式。
查看源代码:效果图如下:
在列表显示时,我们通常会遇到的场景是,对第一个元素或者最后一个元素加以特殊显示。在partial中,我们可以通过express内置的变量来判断当前对象是否是第一个元素或者最后一个元素,例如:
<div class="comment_item<%if(firstInCollection){%> firtitem <%}%>"> <div class="comment_user"><%=comment.user%></div> : <div class="comment_content"><%=comment.content%></div> </div>
这样第一条评论的 class 里就会多一个firstitem。
类似的内置变量还有:
firstInCollection 如果是数组的第一个元素,则为true
indexInCollection 当前元素在数组里的索引
lastInCollection 如果是数组的最后一个元素,则为true
collectionLength 数组的长度
最后是partial调用模版时的路径查找问题:
partial("edit") 会查找同目录下的edit.ejs文件。
partial("../message") 会查找上一级目录的message.ejs文件。
partial("users") 会查找 users.ejs文件,如果不存在users.ejs, 则会查找 /users/index.ejs文件。
<%= users %>会对内容进行转义,想不转义,可以用<%- users %>。
相关文章推荐
- nodejs express template (模版)的使用 (ejs + express)
- nodejs express template (模版)的使用 (ejs + express)
- nodejs express template (模版)的使用 (ejs + express)
- Nodejs express框架一个工程中同时使用ejs模版和jade模版
- Nodejs express使用ejs模版
- Nodejs express框架一个工程中同时使用ejs模版和jade模版
- nodejs express框架一个工程中同时使用ejs模版和jade模版
- node+express+ejs使用模版引擎做的一个示例demo
- Nodejs express使用jade模版
- 一个nodejs+mongodb搭建的博客,使用module: ejs, express, mongodb, underscore等,不错的入门文章
- 关于NodeJS + Express 3 使用 ejs 模板的问题
- Node.js 有关模版引擎ejs和jade的结合(非express)
- 使用artTemplate模板开发网站(node.js + express环境)
- NodeJS搭建博客系统(四)使用模版引擎(node+express+ejs做的一个demo)
- node.js 使用express生成网站基本结构,默认是jade?如何切换成ejs
- node.js之express4.x使用命令创建一个ejs项目及常用命令
- Nodejs+express+ejs简单使用实例代码
- node.js express传递object给ejs(二)
- node.js+express+jade系列一:session的使用
- nodejs+express+ejs+mongoose实例