node.js开发笔记之EXPRESS与EJS之ejs标签v20140329
2014-03-29 16:11
706 查看
本次记录下ejs的渲染标签
node既然是javascrip的,那么很多在前端执行代码的方式都可以放在后台从而达到无缝连接!
比如
var ygxx = function(){
document.getElementById("xm").innerHTML = '姓名:'+jyh.XM+'('+jyh.DS+')';
document.getElementById("sszd").innerHTML = '所属站点:'+jyh.SSZD;
document.getElementById("zw").innerHTML = '职务:'+jyh.ZW;
document.getElementById("lspgbh").innerHTML = '编号:'+bh.PGBH;
};
这个代码在以往,我的处理方式就是把HTML页面里生成一个 varjyh = {};的对象 载入页面之后自动渲染
有了node就不需要这样了,完全可以在后台做
当然这里主要配合express和ejs
网上收入的ejs标签介绍:
ejs 的标签系统非常简单,它只有以下3种标签。
注意:
EJS 的官方示例:
The Data
The Template
The Result
mop
broom
duster
我们可以用上述三种方式实现页面模板系统能实现的任何内容。
由此可以得出一个信息,ejs允许后台定义一个对象,然后前台模版用标签来实现调用对象
比如:
该文件为express的路由文件
exports.index = function(req,res){
res.render('index',{
code:{"GH":"1101","XM":"带头大哥","DS":"329","SSZD":"中国站","ZW":"管理员"}
});
};
后台定义一个对象,然后
前台模版
var ygxx = function(){
alert('AAA');
document.getElementById("xm").innerHTML = '姓名:<%= code.XM %>(<%= code.GH %>)';
document.getElementById("sszd").innerHTML = '所属站点:<%= code.SSZD %>';
document.getElementById("zw").innerHTML = '职务:<%= code.ZW %>';
};
如此这般就可以实现对象的调用,实际现实效果就是
姓名:带头大哥(1101)
所属站点:中国站
职务:管理员
另外还需要一个方式比如
前台有对象
var json = {}; 为了动态加入标签
var json = <%= code %>;
这里如果后台
exports.index = function(req,res){
res.render('index',{
code:'{"GH":"1101","XM":"带头大哥","DS":"329","SSZD":"中国站","ZW":"管理员"}'
});
};
后台渲染字符串,用<%= >标签会报乱码!!
应该用-号
var json = <%- code %>;
这样就可以了!
node既然是javascrip的,那么很多在前端执行代码的方式都可以放在后台从而达到无缝连接!
比如
var ygxx = function(){
document.getElementById("xm").innerHTML = '姓名:'+jyh.XM+'('+jyh.DS+')';
document.getElementById("sszd").innerHTML = '所属站点:'+jyh.SSZD;
document.getElementById("zw").innerHTML = '职务:'+jyh.ZW;
document.getElementById("lspgbh").innerHTML = '编号:'+bh.PGBH;
};
这个代码在以往,我的处理方式就是把HTML页面里生成一个 varjyh = {};的对象 载入页面之后自动渲染
有了node就不需要这样了,完全可以在后台做
当然这里主要配合express和ejs
网上收入的ejs标签介绍:
ejs 的标签系统非常简单,它只有以下3种标签。
1 | <%code %>:JavaScript 代码。 |
2 | <%= code %>:显示替换过 HTML 特殊字符的内容。 |
3 | <%- code %>:显示原始 HTML 内容。 |
<%= code %>和
<%- code %>的区别,当变量 code 为字符串时,两者没有区别;当 code 为比如
<h1>hello</h1>时,
<%= code %>会原样输出
<h1>hello</h1>,而
<%- code %>则会输出H1大的 hello。
EJS 的官方示例:
The Data
1 | { title: 'Cleaning Supplies' , |
2 | supplies: [ 'mop' , 'broom' , 'duster' ] } |
1 | <ul> |
2 | <% for (var i= 0 ; i<supplies.length; i++) {%> |
3 | <li><%= supplies[i] %></li> |
4 | <%} %> |
5 | </ul> |
mop
broom
duster
我们可以用上述三种方式实现页面模板系统能实现的任何内容。
由此可以得出一个信息,ejs允许后台定义一个对象,然后前台模版用标签来实现调用对象
比如:
该文件为express的路由文件
exports.index = function(req,res){
res.render('index',{
code:{"GH":"1101","XM":"带头大哥","DS":"329","SSZD":"中国站","ZW":"管理员"}
});
};
后台定义一个对象,然后
前台模版
var ygxx = function(){
alert('AAA');
document.getElementById("xm").innerHTML = '姓名:<%= code.XM %>(<%= code.GH %>)';
document.getElementById("sszd").innerHTML = '所属站点:<%= code.SSZD %>';
document.getElementById("zw").innerHTML = '职务:<%= code.ZW %>';
};
如此这般就可以实现对象的调用,实际现实效果就是
姓名:带头大哥(1101)
所属站点:中国站
职务:管理员
另外还需要一个方式比如
前台有对象
var json = {}; 为了动态加入标签
var json = <%= code %>;
这里如果后台
exports.index = function(req,res){
res.render('index',{
code:'{"GH":"1101","XM":"带头大哥","DS":"329","SSZD":"中国站","ZW":"管理员"}'
});
};
后台渲染字符串,用<%= >标签会报乱码!!
应该用-号
var json = <%- code %>;
这样就可以了!
相关文章推荐
- nodejs + express + ejs + mongodb 一个非常简单的前后端开发的实例
- Nodejs 开发指南 Nodejs+Express+ejs 开发microblog开发心得
- 用node.js+express.js+mongodb+jade开发一个完整的项目笔记(1)【页面即页面之间逻辑的制作】
- 【我的笔记BLOG1】配置webstorm + node.js +express + mongodb开发博客的环境
- nodejs + express + ejs + mongodb 一个非常简单的前后端开发的实例2
- nodejs + express + ejs + mongodb 一个非常简单的前后端开发的实例3
- [node.js]express+mongoose+mongodb的开发笔记
- 零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
- 基于nodejs+express+ejs的系统的开发环境搭建
- 零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
- Node.js开发笔记Windows篇(二)安装Express
- NodeJS+Express3.2.2+MongoDB开发教程
- nodejs+express+ejs学习记录
- 《node.js 开发指南》bash: express: command not found
- 基于node.js+Express.js+Jade+MongoDB开发Web即时聊天系统
- Node.js 开发指南笔记
- node.js之express4.x使用命令创建一个ejs项目及常用命令
- 用node.js+express+ejs+bootstrap来建立一个基本网页
- Node.js 笔记(一) nodejs、npm、express安装
- Node.js 笔记(一) nodejs、npm、express安装