一、简介

相比于jade模板引擎,ejs对原HTML语言就未作出结构上的改变,只不过在其交互数据方面做出了些许修改,相比于jade更加简单易用。因此其学习成本是很低的。您也可参考ejs官网:https://ejs.bootcss.com/

二、ejs基本使用

这里我们使用如下配置文件:

我们啊可以通过下面的方式实现基本的ejs操作:

app.js文件:

  1. const express=require("express");
  2. const ejs=require("ejs");
  3. const fs=require("fs");
  4.  
  5. var app=express();
  6.  
  7. //引用ejs
  8. app.set('views',"public"); //设置视图的对应目录
  9. app.set("view engine","ejs"); //设置默认的模板引擎
  10. app.engine('ejs', ejs.__express); //定义模板引擎
  11.  
  12. app.get("/",function(req,res){
  13. res.render("index.ejs",{title: "<h4>express</h4>"});
  14. });
  15.  
  16. app.listen(8080);

  ejs文件:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <% for(var i=0;i<10;i++){ %>
  9. <%= i %>
  10. <% } %>
  11. <!-- 获取变量 -->
  12. <div class="datas">
  13. <p>获取变量:</p>
  14. <%- title %>
  15. <%= title %>
  16. </div>
  17. </body>
  18. </html>

  这时我们会得到如下图的结果:

由此可以知道:
<% xxx %>:里面写入的是js语法,
<%= xxx %>:里面是服务端发送给ejs模板转义后的变量,输出为原html
<%- xxx %>:里面也是服务端发送给ejs模板后的变量,不过他会把html输出来

同理res.render()函数也是支持回调的:

  1. res.render('user', { name: 'Tobi' }, function(err, html) {
  2. console.log(html);
  3. });

  这样我们即可将看到heml的内容。另外值得说明的是ejs模块也有ejs.render()和ejs.renderFile()方法,他在这里与res.render()作用类似,如下:

  1. ejs.render(str, data, options);
  2.  
  3. ejs.renderFile(filename, data, options, function(err, str){
  4. // str => 输出绘制后的 HTML
  5. });

  三、ejs标签各种含义

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

四、option的配置:

  1. cache 缓存编译后的函数,需要提供 filename
  2. filename cache 参数用做键值,同时也用于 include 语句
  3. context 函数执行时的上下文环境
  4. compileDebug 当为 false 时不编译调试语句
  5. client 返回独立的编译后的函数
  6. delimiter 放在角括号中的字符,用于标记标签的开与闭
  7. debug 将生成的函数体输出
  8. _with 是否使用 with() {} 结构。如果为 false,所有局部数据将存储在 locals 对象上。
  9. localsName 如果不使用 with localsName 将作为存储局部变量的对象的名称。默认名称是 locals
  10. rmWhitespace 删除所有可安全删除的空白字符,包括开始与结尾处的空格。对于所有标签来说,它提供了一个更安全版本的 -%> (在一行的中间并不会剔除标签后面的换行符)。
  11. escape <%= 结构设置对应的转义(escape)函数。它被用于输出结果以及在生成的客户端函数中通过 .toString() 输出。(默认转义 XML)。

  以上就为ejs基本用法,往后对数据库操作就直接把json数据从服务器返送给模板引擎就行;

Express全系列教程之(十一):渲染ejs模板引擎的更多相关文章

  1. Express全系列教程之(十):jade模板引擎

    一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...

  2. Express全系列教程之(一):Express的安装 和第一个程序

    前言 ndoe.js,一个基于javsscript运行环境的服务器语言,它的出现使得javascript有能力去实现服务器操作.在gitHub上ndoe.js的star数已接近6万,可见其受欢迎程度: ...

  3. Express全系列教程之(九):将session上传至mysql数据库

    一.简介 实际引用中,有些公司在不同地区会设置不同服务器,因此就需要用到nginx以实现负载均衡,这时,将session数据保存至数据库就成为了需要面对的问题,我们以MySQL数据库为例,看看他是如何 ...

  4. Express全系列教程之(八):session的基本使用

    一.关于session session是另一种记录客户状态的机制,与cookie保存在客户端浏览器不同,session保存在服务器当中:当客户端访问服务器时,服务器会生成一个session对象,对象中 ...

  5. Express全系列教程之(七):cookie的加密

    一.关于cookie加密 cookie加密是让客户端用户无法的值cookie明文信息,是数据安全的重要部分:一般的我们可以在保存cookie时对cookie信息进行加密,或者在res.cookie中对 ...

  6. Express全系列教程之(六):cookie的使用

    一.关于Cookie 在我们关闭一个登录过的网址并重新打开它后,我们的登录信息依然没有丢失:当我们浏览了商品后历史记录里出现了我们点击过的商品:当我们推回到首页后,推荐商品也为我们选出了相似物品:事实 ...

  7. Express全系列教程之(五):Express的中间件

    一.中间件 从字面意思,我们可以了解到它大概就是做中间代理操作,事实也是如此:大多数情况下,中间件就是在做接收到请求和发送响应中间的一系列操作.事实上,express是一个路由和中间件的web框架,E ...

  8. Express全系列教程之(四):获取Post参数的两种方式

    一.关于POST请求 post方法作为http请求很重要的一部分,几乎所有的网站都有用到它,与get不同,post请求更像是在服务器上做修改操作,它一般用于数据资源的更新.相比于get请求,post所 ...

  9. Express全系列教程之(三):get传参

    一.关于get请求 一般在网站开发中,get都用作数据获取和查询,类似于数据库中的查询操作,当服务器解析前台资源后即传输相应内容:而查询字符串是在URL上进行的,形如: http://localhos ...

随机推荐

  1. mysql dump出source进去时报1046

    我这边主要是备注里有  ; 号标记,所以在执行时应该会有问题,改成中文:的 出现这个问题可以打开sql文件,看看错误的点, 大胆尝试

  2. java读取word文档,提取标题和内容

    使用的工具为poi,需要导入的依赖如下 <dependency> <groupId>org.apache.poi</groupId> <artifactId& ...

  3. qt5-信号和槽

    信号函数: connect(btn,&QPushButton::clicked,this,&QWidget::close); //参数1 信号发送者://参数2 信号:---& ...

  4. python查询mysql数据(3)

    python查询mysql数据(3) """数据查询""" import pymysql import datetime from pymy ...

  5. itertools模块、排列、组合、算法

    关于列表重组的python小题 题目一:给定一组不含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集).             说明:解集不能包含重复的子集. 示例:输入: nums = ...

  6. 顺序查找(Sequential Search)

    1.定义 顺序查找又叫线性查找,是最基本的查找技术. 2.基本思想 从表的一端开始(第一个或最后一个记录),顺序扫描线性表,依次将扫描到的结点关键宇和给定值K相比较.若当前扫描到的结点关键字与K相等, ...

  7. 01Two Sum题解

    Tow Sum 原题概述: Given an array of integers, return indices of the two numbers such that they add up to ...

  8. RMQ的ST算法

    ·RMQ的ST算法    状态设计:        F[i, j]表示从第i个数起连续2^j个数中的最大值    状态转移方程(二进制思想):        F[i, j]=max(F[i,j-1], ...

  9. PTA 道长你想怎么死

    道长你想怎么死 (25 分) 故事:[ 他身着白衣,撑着伞朝我走来.说要送我回家.而我早已陷入他那对深邃的眼眸中,心内一阵悸动.他一把拉我入伞下.我得知他是山上的道士,也刚好下山采药.他把伞赠予我,一 ...

  10. PX4学习之-uORB msg 自动生成模板解读

    最后更新日期 2019-06-22 一.前言 在 PX4学习之-uORB简单体验 中指出, 使用 uORB 进行通信的第一步是新建 msg.在实际编译过程中,新建的 msg 会转换成对应的 .h..c ...