Express全系列教程之(十一):渲染ejs模板引擎
一、简介
相比于jade模板引擎,ejs对原HTML语言就未作出结构上的改变,只不过在其交互数据方面做出了些许修改,相比于jade更加简单易用。因此其学习成本是很低的。您也可参考ejs官网:https://ejs.bootcss.com/
二、ejs基本使用
这里我们使用如下配置文件:

我们啊可以通过下面的方式实现基本的ejs操作:
app.js文件:
const express=require("express");
const ejs=require("ejs");
const fs=require("fs");
var app=express();
//引用ejs
app.set('views',"public"); //设置视图的对应目录
app.set("view engine","ejs"); //设置默认的模板引擎
app.engine('ejs', ejs.__express); //定义模板引擎
app.get("/",function(req,res){
res.render("index.ejs",{title: "<h4>express</h4>"});
});
app.listen(8080);
ejs文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<% for(var i=0;i<10;i++){ %>
<%= i %>
<% } %>
<!-- 获取变量 -->
<div class="datas">
<p>获取变量:</p>
<%- title %>
<%= title %>
</div>
</body>
</html>
这时我们会得到如下图的结果:

由此可以知道:
<% xxx %>:里面写入的是js语法,
<%= xxx %>:里面是服务端发送给ejs模板转义后的变量,输出为原html
<%- xxx %>:里面也是服务端发送给ejs模板后的变量,不过他会把html输出来
同理res.render()函数也是支持回调的:
res.render('user', { name: 'Tobi' }, function(err, html) {
console.log(html);
});
这样我们即可将看到heml的内容。另外值得说明的是ejs模块也有ejs.render()和ejs.renderFile()方法,他在这里与res.render()作用类似,如下:
ejs.render(str, data, options);
ejs.renderFile(filename, data, options, function(err, str){
// str => 输出绘制后的 HTML
});
三、ejs标签各种含义
<% '脚本' 标签,用于流程控制,无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板(输出是转义 HTML 标签)
<%- 输出非转义的数据到模板
<%# 注释标签,不执行、不输出内容
<%% 输出字符串 '<%'
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除
四、option的配置:
cache 缓存编译后的函数,需要提供 filename
filename 被 cache 参数用做键值,同时也用于 include 语句
context 函数执行时的上下文环境
compileDebug 当为 false 时不编译调试语句
client 返回独立的编译后的函数
delimiter 放在角括号中的字符,用于标记标签的开与闭
debug 将生成的函数体输出
_with 是否使用 with() {} 结构。如果为 false,所有局部数据将存储在 locals 对象上。
localsName 如果不使用 with ,localsName 将作为存储局部变量的对象的名称。默认名称是 locals
rmWhitespace 删除所有可安全删除的空白字符,包括开始与结尾处的空格。对于所有标签来说,它提供了一个更安全版本的 -%> (在一行的中间并不会剔除标签后面的换行符)。
escape 为 <%= 结构设置对应的转义(escape)函数。它被用于输出结果以及在生成的客户端函数中通过 .toString() 输出。(默认转义 XML)。
以上就为ejs基本用法,往后对数据库操作就直接把json数据从服务器返送给模板引擎就行;
Express全系列教程之(十一):渲染ejs模板引擎的更多相关文章
- Express全系列教程之(十):jade模板引擎
一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...
- Express全系列教程之(一):Express的安装 和第一个程序
前言 ndoe.js,一个基于javsscript运行环境的服务器语言,它的出现使得javascript有能力去实现服务器操作.在gitHub上ndoe.js的star数已接近6万,可见其受欢迎程度: ...
- Express全系列教程之(九):将session上传至mysql数据库
一.简介 实际引用中,有些公司在不同地区会设置不同服务器,因此就需要用到nginx以实现负载均衡,这时,将session数据保存至数据库就成为了需要面对的问题,我们以MySQL数据库为例,看看他是如何 ...
- Express全系列教程之(八):session的基本使用
一.关于session session是另一种记录客户状态的机制,与cookie保存在客户端浏览器不同,session保存在服务器当中:当客户端访问服务器时,服务器会生成一个session对象,对象中 ...
- Express全系列教程之(七):cookie的加密
一.关于cookie加密 cookie加密是让客户端用户无法的值cookie明文信息,是数据安全的重要部分:一般的我们可以在保存cookie时对cookie信息进行加密,或者在res.cookie中对 ...
- Express全系列教程之(六):cookie的使用
一.关于Cookie 在我们关闭一个登录过的网址并重新打开它后,我们的登录信息依然没有丢失:当我们浏览了商品后历史记录里出现了我们点击过的商品:当我们推回到首页后,推荐商品也为我们选出了相似物品:事实 ...
- Express全系列教程之(五):Express的中间件
一.中间件 从字面意思,我们可以了解到它大概就是做中间代理操作,事实也是如此:大多数情况下,中间件就是在做接收到请求和发送响应中间的一系列操作.事实上,express是一个路由和中间件的web框架,E ...
- Express全系列教程之(四):获取Post参数的两种方式
一.关于POST请求 post方法作为http请求很重要的一部分,几乎所有的网站都有用到它,与get不同,post请求更像是在服务器上做修改操作,它一般用于数据资源的更新.相比于get请求,post所 ...
- Express全系列教程之(三):get传参
一.关于get请求 一般在网站开发中,get都用作数据获取和查询,类似于数据库中的查询操作,当服务器解析前台资源后即传输相应内容:而查询字符串是在URL上进行的,形如: http://localhos ...
随机推荐
- [转帖]微軟将从 .NET 4 以后的版本弃用 System.Data.OracleClient
转帖--微軟将从 .NET 4 以后的版本弃用 System.Data.OracleClient Posted on -- : eaglet 阅读() 评论() 编辑 收藏 原贴 http://www ...
- UVA - 10829 L-Gap Substrings (后缀自动机+线段树启发式合并)
题意:统计一段字符串中形如UVU的子串个数(其中V的长度固定为g). 问题等价于求满足$g+1\leqslant |j-i|\leqslant g+LCP(i,j)$的后缀(i,j)的对数,即$\su ...
- UVA - 1649 Binomial coefficients (组合数+二分)
题意:求使得C(n,k)=m的所有的n,k 根据杨辉三角可以看出,当k固定时,C(n,k)是相对于n递增的:当n固定且k<=n/2时,C(n,k)是相对于k递增的,因此可以枚举其中的一个,然后二 ...
- CSS三角的写法(兼容IE6)
目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框. 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样 ...
- 一例基于thinkphp,jquery和bootstrap渲染的查询数据分页器
对于某些查询记录很多的结果,web页面不得不采用分页器,现在奉上一例代码,其主要逻辑是:由页面的dom 节点发起ajax请求,返回的查询结果根据页面布局需要进行切片:并根据总记录数和页面展现的条数算出 ...
- git常用命令及常见问题解析
1.查看状态 1.git status 2.git status -a 2.初始化一个git仓库 git init git clone 'git仓库地址' 3.添加到暂存区 //目录 git add ...
- [傻瓜式一步到位] 阿里云服务器Centos上部署一个Flask项目
网络上关于flask部署Centos的教程有挺多,不过也很杂乱. 在我第一次将flask上传到centos服务器中遇到了不少问题,也费了挺大的劲. 在参考了一些教程,并综合了几个教程之后才将flask ...
- 27. ClustrixDB 分布式架构/一致性、容错和可用性
一致性 许多分布式数据库都采用最终一致性而不是强一致性来实现可伸缩性.但是,最终的一致性会增加应用程序开发人员的复杂性,他们必须针对可能出现的数据不一致的异常进行开发. ClustrixDB提供了一个 ...
- Anaconda 安装+使用+换源+更新
anaconda官网下载安装:https://www.continuum.io/downloads/ anaconda用法:查看已经安装的包:pip list 或者 conda list 安装和更新: ...
- 如何下载Direct3D9Ex
其实就是DirectX june_10月版本,下载链接如下 DirectX Software Development Kit 错误:安装报错“S1023" 若要解决此问题,必须在安装2010 ...