1.1.3：分析模板引擎

   1.什么是模板引擎

模板引擎是一个将页面模板和要显示的数据结合生成HTML页面的工具

可以这么理解，如果说Express中的路由控制方法是MVC中的控制器的话，那么模板就是MVC的视图。

什么是ejs？

ejs是模板引擎的一种，也是在1.1.2节中用到的模板引擎，因为它使用起来非常简单，而且与express集成良好。

2.使用模板引擎

我在之前讲过通过以下两行代码设置模板文件的存储位置和使用的模板引擎：

  1. app.set('views', path.join(__dirname, 'views'));
  2. app.set('view engine', 'ejs');　

注意：通过express -e blog，我们只是初始化了一个使用ejs模板引擎的工程而已，比如node_modules下添加了ejs模块，在views有index.ejs。这并不是说强制该项目只能使用ejs，而不能使用其它模板引擎如jade，真正指定使用哪个模板引擎的是：

  1. app.use('view engine','ejs');

　　在1.1.2节的routes/index.js中通过调用res.render()渲染模块，并将其产生的页面返回给客户端。它接收两个参数，第一个参数是模板名称，即views目录下的模板文件名，扩展名.ejs可选；第二个参数是传递给模板的数据对象，用于模板翻译。

打开views/index.ejs，内容如下：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title><%= title %></title>
  5.     <link rel='stylesheet' href='/stylesheets/style.css' />
  6.   </head>
  7.   <body>
  8.     <h1><%= title %></h1>
  9.     <p>Welcome to <%= title %></p>
  10.   </body>
  11. </html>

　　当我们res.render("index",{title:"木人子韦"});时,模板引擎会把<%=title%>替换成“木人子韦”，然后把替换后的页面显示给用户。

渲染后生成的页面代码为：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>木人子韦</title>
  5.     <link rel='stylesheet' href='/stylesheets/style.css' />
  6.   </head>
  7.   <body>
  8.     <h1>木人子韦</h1>
  9.     <p>Welcome to 木人子韦</p>
  10.   </body>
  11. </html>

注意：通过app.use(express.static(path.join(__dirname, 'public')));将css等静态文件的根目录设置为了public文件夹，所以在上面代码中的

  1. href='/stylesheets/style.css'

就相当于

  1. href='public/stylesheets/style.css'

ejs的标签系统非常简单，有以下标签：

  • <% '脚本' 标签，用于流程控制，无输出。
  • <%_ 删除其前面的空格符
  • <%= 输出数据到模板（输出是转义 HTML 标签）
  • <%- 输出非转义的数据到模板
  • <%# 注释标签，不执行、不输出内容
  • <%% 输出字符串 '<%'
  • %> 一般结束标签
  • -%> 删除紧随其后的换行符
  • _%> 将结束标签后面的空格符删除

注意：当变量code为普通字符串时，<%=code%>和<%-code%>没有区别。当code为<div>从删库到跑路</div>这样的字符串时，<%=code%>会原样输出<div>从删库到跑路</div>，而<%-code%>则会显示  从删库到跑路  字符串。

感受一下标签<% code %>，其它的标签找官方文档https://ejs.bootcss.com/。下面模仿ejs的官方实例：

实例

数据

  1. user:{name:"木人子韦"}

模板

  1. <% if (user) { %>
  2.   <h2><%= user.name %></h2>
  3. <% } %>

渲染后的代码

  1. <h2>木人子韦</h2>

　　

 3.页面布局

在Express 3.x中不再使用layout.ejs进行页面布局，转而使用include来替代。

include的简单使用方法如下：

index.ejs

  1. <%- include top%>
  2. murenziwei
  3. <%- include bottom%>

　 top.ejs

  1. I am top.ejs

　bottom.ejs

  1. I am bottom.ejs

　最终，index.ejs会显示

  1. I am top.ejs
  2. murenziwei
  3. I am bottom.ejs

　在1.1.3节中，我们学习了模板引擎的相关知识。

理解node的模板引擎的更多相关文章

  1. Node.js模板引擎的深入探讨

    每次当我想用 node.js 来写一个 web 相关项目的时候.我总是会陷入无比的纠结.原因是 JavaScript 生态圈里的模板引擎实在太多了,但那么多却实在找不出一个接近完美的,所谓完美的概念就 ...

  2. node+ejs模板引擎的应用

    前言: 最近在开发一个关于后台管理系统的基础开发平台,解释一下就是不管什么管理系统都有一些相同的功能,但是又有一些细节不一样,这个基础平台就是实现对于基础功能可以进行快速开发,主要有自定义的生成功能代 ...

  3. Node.js模板引擎学习----ejs

    环境:windows+node.js+express 一.安装ejs 打开cmd窗口,输入npm install ejs -g,等待下载安装完成. 二.使用 调用过程中使用路由机制和模板,路由请求地址 ...

  4. [js高手之路]Node.js模板引擎教程-jade速学与实战1

    环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...

  5. [js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法

    环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...

  6. consolidate.js 一个Node.js 模板引擎的集合

    consolidate是一个模板引擎的结合体.包括了常用的jade和ejs.通过配置我们就可以使用多种模板引擎. consolidate.js安装 npm install consolidate co ...

  7. [js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义

    一.转义与非转义 jade模板文件代码: doctype html html head meta(charset='utf-8') title jade学习-by ghostwu body h3 转义 ...

  8. [js高手之路]Node.js模板引擎教程-jade速学与实战4-模板引用,继承,插件使用

    一.block 模块复用 把需要复用的模块用block定义 block后面跟上模块的名字,引用一次block 内容就会被复用一次 编译之后的结果: 二,继承模板(extends) 在实际开发中,网站的 ...

  9. [js高手之路]Node.js模板引擎教程-jade速学与实战3-mixin

    强大的mixin mixin类似于函数的功能,可以达到模块复用的效果 mixin show: 定义一个类似函数的功能,名字叫show,里面的就是他的内容 +show: 调用show,每调用一次执行一次 ...

随机推荐

  1. 关于git 命令的一些事

    克隆代码命令 http://www.yiibai.com/git/git_clone.html 关键:得实现新建本地仓库文件夹 ==> git clone 远程网址 git 上传主要代码:htt ...

  2. django的简单原理

    一.自定义客户端和服务端的请求响应 1.客户端打开url,向服务器发出请求 2.服务端用socket写一个py,用于接收请求和做出响应 3.服务端接收请求 4.服务端模拟HTTP协议做出响应,状态行为 ...

  3. input标签之外是否一定添加form标签

    原文转载自:https://blog.csdn.net/lamanchas/article/details/78753031 input标签外是否添加form标签需要按情形区分:应用场景的区别:1.所 ...

  4. ModelAndView对象

    ModelAndView属性中两个最重要的属性是model和view. view即视图,保存的是视图信息. model即模型,以<K,V>形式保存模型数据,上图可以看到是MdelMap类型 ...

  5. 嵌入式FIFO核的调用

    本次设计源码下载地址:http://download.csdn.net/detail/noticeable/9915523 课程目标:学习调用quartus II 软件的FIFO(先进先出)IP核,并 ...

  6. 如何在html与delphi间交互代码

    [转]如何在html与delphi间交互代码 (2015-11-19 22:16:24) 转载▼ 标签: it 分类: uniGUI uniGUI总群中台中cmj朋友为我们总结了如下内容,对于利用de ...

  7. 背水一战 Windows 10 (72) - 控件（控件基类）: UIElement - UIElement 的位置, UIElement 的布局, UIElement 的其他特性

    [源码下载] 背水一战 Windows 10 (72) - 控件(控件基类): UIElement - UIElement 的位置, UIElement 的布局, UIElement 的其他特性 作者 ...

  8. c++ 异常处理（1）

    异常 (exception) 是 c++ 中新增的一个特性,它提供了一种新的方式来结构化地处理错误,使得程序可以很方便地把异常处理与出错的程序分离,而且在使用上,它语法相当地简洁,以至于会让人错觉觉得 ...

  9. 动态页面技术EL

    1.EL概述: EL表达式可以嵌入再JSP页面内部,减少JSP脚本的编写 EL出现的目的是要替代JSP页面中脚本的编写 EL最重要的作用就是从域中取出数据: 引入: JSP中<%=request ...

  10. 从 moment -> nodejs -> sequelize -> postgres，你都得设置好时区

    背景 最近在做报表统计,因为 sequelize 的时区配置没加导致了统计数字对不上的问题. 问:大家都知道时区,但是你清楚 UTC 和 GMT 的区别吗? 答:UTC 是我们现在用的时间标准,GMT ...