本次记录下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的更多相关文章

  1. mac下配置Node.js开发环境、express安装、创建项目

    mac下配置Node.js开发环境.express安装.创建项目 一.node.js的安装 去官网下载对应的平台版本就可以了,https://nodejs.org 二.express安装 sudo n ...

  2. Node.js学习笔记——Node.js开发Web后台服务

    一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...

  3. 《Node.js开发实战详解》学习笔记

    <Node.js开发实战详解>学习笔记 ——持续更新中 一.NodeJS设计模式 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直 ...

  4. ES6 学习笔记 (2)-- Liunx环境安装Node.js 与 搭建 Node.js 开发环境

    笔记参考来源:廖雪峰老师的javascript全栈教程 一.安装Node.js 目前Node.js的最新版本是6.2.x.首先,从Node.js官网下载对应平台的安装程序. 1.下载 选择对应的Liu ...

  5. Nodejs学习笔记(一)--- 简介及安装Node.js开发环境

    目录 学习资料 简介 安装Node.js npm简介 开发工具 Sublime Node.js开发环境配置 扩展:安装多版本管理器 学习资料 1.深入浅出Node.js http://www.info ...

  6. Nodejs学习笔记(一)—简介及安装Node.js开发环境

    一.简介 Node.js是让Javascript脱离浏览器运行在服务器的一个平台,不是语言: Node.js采用的Javascript引擎是来自Google Chrome的V8:运行在浏览器外不用考虑 ...

  7. 【转】Nodejs学习笔记(一)--- 简介及安装Node.js开发环境

    目录 学习资料 简介 安装Node.js npm简介 开发工具 Sublime Node.js开发环境配置 扩展:安装多版本管理器 学习资料 1.深入浅出Node.js http://www.info ...

  8. 前端开发学习笔记 - 1. Node.JS安装笔记

    Node.JS安装笔记 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an ...

  9. 系列文章--Node.js学习笔记系列

    Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...

随机推荐

  1. 《JavaScript &amp; jQuery交互式Web前端开发》之JavaScript基础指令

           在本节中.你将開始学习阅读和编写JavaScript代码,还将学习怎样编写Web浏览器可以遵照运行的指令.在開始学习后面章节中的更复杂的概念之前.我们先学习语言的一些核心部分,然后看看怎 ...

  2. 建立简单的服务器端程序 分类: B1_JAVA 2013-10-08 21:53 503人阅读 评论(0) 收藏

      参考自core java     package com.lujinhong.corejava; import java.io.IOException; import java.io.InputS ...

  3. Android RadioGroup的RadioButton 选择改变字体颜色和背景颜色

    RadioGroup <RadioGroup android:id="@+id/client_charge_radiogroup" android:layout_width= ...

  4. mysql查询字段所在表

    use information_schema;select * from columns where column_name='字段名' ;

  5. margin隐藏最后的切割线

    <style> *{margin: 0;padding: 0;} #demo li{ border-bottom: 1px solid #ccc; } #demo ul{ margin-b ...

  6. php实现 密码验证合格程序(复杂问题分类,超简单的)(分类+规范编码)

    php实现 密码验证合格程序(复杂问题分类,超简单的)(分类+规范编码) 一.总结 一句话总结:复杂问题分类,超简单的.分类+规范编码. 1.写的时候判断  不能有相同长度超2的子串重复  的时候,子 ...

  7. Django表单上传

    任务描述:实现表单提交(上传文件) 1.项目目录: 2.源代码: regist.html <!DOCTYPE html> <html lang="en"> ...

  8. 小强的HTML5移动开发之路(48)——(小练习)新闻订阅系统【1】

    一.总体设计 二.数据库设计 --新闻类别表 create table news_cate( news_cateid int primary key auto_increment, news_icon ...

  9. thinkphp5开发规范(加强复习之前的)

    thinkphp5开发规范(加强复习之前的) 一.总结 一句话总结:和类相关的采用驼峰命名法:变量,函数,类,方法,属性采用驼峰命名发:数据库及文件及配置参数是小写字母加下划:常量大写加下划线 1.T ...

  10. selenium 爬取空间说说

    package cn.hb.util; import java.io.File; import java.io.FileWriter; import java.io.IOException; impo ...