node.js开发笔记之EXPRESS与EJS之ejs标签v20140329
本次记录下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页面里生成一个 var jyh = {};的对象 载入页面之后自动渲染
有了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' ] } |
The Template
1 |
<ul> |
2 |
<% for (var i= 0 ; i<supplies.length; i++) {%> |
3 |
<li><%= supplies[i] %></li> |
4 |
<% } %> |
5 |
</ul> |
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.js开发笔记之EXPRESS与EJS之ejs标签v20140329的更多相关文章
- mac下配置Node.js开发环境、express安装、创建项目
mac下配置Node.js开发环境.express安装.创建项目 一.node.js的安装 去官网下载对应的平台版本就可以了,https://nodejs.org 二.express安装 sudo n ...
- Node.js学习笔记——Node.js开发Web后台服务
一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...
- 《Node.js开发实战详解》学习笔记
<Node.js开发实战详解>学习笔记 ——持续更新中 一.NodeJS设计模式 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直 ...
- ES6 学习笔记 (2)-- Liunx环境安装Node.js 与 搭建 Node.js 开发环境
笔记参考来源:廖雪峰老师的javascript全栈教程 一.安装Node.js 目前Node.js的最新版本是6.2.x.首先,从Node.js官网下载对应平台的安装程序. 1.下载 选择对应的Liu ...
- Nodejs学习笔记(一)--- 简介及安装Node.js开发环境
目录 学习资料 简介 安装Node.js npm简介 开发工具 Sublime Node.js开发环境配置 扩展:安装多版本管理器 学习资料 1.深入浅出Node.js http://www.info ...
- Nodejs学习笔记(一)—简介及安装Node.js开发环境
一.简介 Node.js是让Javascript脱离浏览器运行在服务器的一个平台,不是语言: Node.js采用的Javascript引擎是来自Google Chrome的V8:运行在浏览器外不用考虑 ...
- 【转】Nodejs学习笔记(一)--- 简介及安装Node.js开发环境
目录 学习资料 简介 安装Node.js npm简介 开发工具 Sublime Node.js开发环境配置 扩展:安装多版本管理器 学习资料 1.深入浅出Node.js http://www.info ...
- 前端开发学习笔记 - 1. Node.JS安装笔记
Node.JS安装笔记 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an ...
- 系列文章--Node.js学习笔记系列
Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...
随机推荐
- 《JavaScript & jQuery交互式Web前端开发》之JavaScript基础指令
在本节中.你将開始学习阅读和编写JavaScript代码,还将学习怎样编写Web浏览器可以遵照运行的指令.在開始学习后面章节中的更复杂的概念之前.我们先学习语言的一些核心部分,然后看看怎 ...
- 建立简单的服务器端程序 分类: B1_JAVA 2013-10-08 21:53 503人阅读 评论(0) 收藏
参考自core java package com.lujinhong.corejava; import java.io.IOException; import java.io.InputS ...
- Android RadioGroup的RadioButton 选择改变字体颜色和背景颜色
RadioGroup <RadioGroup android:id="@+id/client_charge_radiogroup" android:layout_width= ...
- mysql查询字段所在表
use information_schema;select * from columns where column_name='字段名' ;
- margin隐藏最后的切割线
<style> *{margin: 0;padding: 0;} #demo li{ border-bottom: 1px solid #ccc; } #demo ul{ margin-b ...
- php实现 密码验证合格程序(复杂问题分类,超简单的)(分类+规范编码)
php实现 密码验证合格程序(复杂问题分类,超简单的)(分类+规范编码) 一.总结 一句话总结:复杂问题分类,超简单的.分类+规范编码. 1.写的时候判断 不能有相同长度超2的子串重复 的时候,子 ...
- Django表单上传
任务描述:实现表单提交(上传文件) 1.项目目录: 2.源代码: regist.html <!DOCTYPE html> <html lang="en"> ...
- 小强的HTML5移动开发之路(48)——(小练习)新闻订阅系统【1】
一.总体设计 二.数据库设计 --新闻类别表 create table news_cate( news_cateid int primary key auto_increment, news_icon ...
- thinkphp5开发规范(加强复习之前的)
thinkphp5开发规范(加强复习之前的) 一.总结 一句话总结:和类相关的采用驼峰命名法:变量,函数,类,方法,属性采用驼峰命名发:数据库及文件及配置参数是小写字母加下划:常量大写加下划线 1.T ...
- selenium 爬取空间说说
package cn.hb.util; import java.io.File; import java.io.FileWriter; import java.io.IOException; impo ...