目录
1.认识模板引擎
1.1 什么是模板引擎
模板引擎(Tempalte Engine)是一个将页面模板和要显示的数据结合起来生成HTML页面的工具。
模板引擎的功能是将页面模板和要显示的数据结合起来生成HTML页面,它既可以运行在服务器端,又可以运行在客户端。大多时候,它都是在服务器端直接被解析为HTML的,解析完成后,再传输到客户端,因此客户端甚至无法判断页面是不是由模板引擎生成的。当然,模板引擎也可以运行在客户端,这里所说的客户端是指浏览器。考虑到浏览器的兼容性问题,还是由服务器端运行模板引擎为好。
1.2 模板引擎的原理
在刚开始学习html和css的时候,我们展示给用户看的就是单纯的html和css渲染的页面,在学习了JavaScript之后,我们就会使用JavaScript动态选人页面,页面就由HTML和js动态渲染的内容最后合并形成一个页面显示给用户.
也学习过简单的模板,但是这样的模板也很麻烦,会有很多的静态页面,用户请求那个页面服务器就会返回给客户端相应的静态页面,写很多的页面大大的增加了开发的工作量.
简单说来,HTML = Template + Data。值得一提的是,这里的Data是JS对象,不能使用JSON数据单纯的JSON字符串是渲染不出来的。 在MVC设计模式中,模板引擎放在了服务器端。当控制器得到用户的请求后,从模型(Model)获取到数据,再调用模板引擎。模板引擎以数据和页面模板为输入,生成HTML页面,然后返回控制器,由控制器交回给客户端。
以下面这张图为例解释,当我们请求首页时,会先从模型中请求数据库中的首页数据,然后模板引擎以数据和html模板页面为输入,合并出一个完整的html页面(首页),然后返回控制器,由控制器交给客户端.
当我们请求登录页面时,会先从模型中请求数据库中的登录页面数据,然后模板引擎以数据和html模板页面为输入,合并出一个完整的html页面(登录页),然后返回控制器,由控制器交给客户端.
这样一来,我们写的静态页面是一个模板,当我们请求某个页面时,就会从数据库中拿到对应页面的信息,将之与html模板合成一个全新的html页面,不再需要些很多的静态页面,不仅提升了开发效率,而且提高了可维护性.
2.认识EJS
2.1 什么是EJS
“E” 代表什么?可以表示 “可嵌入(Embedded)”,也可以是“高效(Effective)”、“优雅(Elegant)”或者是“简单(Easy)”。EJS是Embedded JavaScript的缩写 翻译为: 嵌入式Javascript。 EJS 是一套简单的模板语言,帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条;也没有再造一套迭代和控制流语法;有的只是普通的 JavaScript 代码而已。
EJS比较通俗易懂,从代码展示效果来看,它仍然是HTML结构,但同时又具有额外的功能,可以有效地复用已有的代码块。如果有一个现有的HTML项目,所需要做的全部工作就是用.ejs扩展名重新命名文件,然后,就可以使用EJS的特殊功能了。
2.2 ejs的特点
- 纯 JavaScript:我们热爱 JavaScript,他是一门友好的编程语言。所有模板语言都要成长为图灵完备的语言,也就是说要增加一个中间层。何必呢,直接用 JS 吧!
- 快速开发:无需浪费时间钻研那些所谓“优雅”的神秘语法,也不用研究数据究竟如何能够被正确处理。
- 语法简单:EJS 支持直接在标签内书写简单、直白的 JavaScript 代码。只需让 JavaScript 输出你所需要的 HTML ,完成工作很轻松!
- 执行迅速:我们都知道 V8 以及类似 JavaScript 引擎的速度有多快。EJS 能够缓存 JS 函数的中间代码,从而提升执行速度。
- 易于调试:调试 EJS 错误(error)很容易:所有错误都是普通的 JavaScript 异常,并且还能输出异常发生的位置。
- 社区活跃:EJS 背后是一个活跃用户组成的大规模社区,能够为 EJS 的演进提供大力支持。我们同时很高兴回答你的问题或提供帮助。
3.ejs的基本使用
3.1 安装ejs
npm install ejs --save
3.2 新建 ejs 文件
新建一个index.ejs
其实就是index.html的模板,里面使用ejs的语法
3.3 node 原生开发使用 ejs 模板
const http = require('http');
const ejs = require("ejs");
const app = http.createServer((req,res) => {
if(req.url == "/"){
res.writeHead(200, {
'Content-Type': 'text/html',
});
// ejs模板编译
ejs.renderFile("./views/index.ejs",{
title:"why"
},(err,data) =>{
if(err){
console.log(err)
return;
}
console.log(data)
res.end(data)
})
}
})
app.listen(3000,() => {
console.log('server start at 3000 port');
})
2.4 express使用ejs模板
const express = require('express');
const app =express();
// 设置默认的模板,此时express将会帮你引入ejs,
// 所以你的提前安装ejs
app.set("view engine", "ejs");
app.get("/",(req,res) =>{
// 渲染index.ejs模板, 第二个参数是向模板中添加的数据
res.render("index",{
title:'test'
})
})
app.listen(3000,()=> {
console.log('server start at 3000 port');
})
此时当用户访问/的时候,会自动使用views文件夹中的wuwei.ejs文件当做模板,向模板中传入的参数就是后面传入的对象.
2.5 配置ejs目录
// 配置ejs目录,默认就是views目录
app.set("views",path.join(__dirname,"views"))
// 配置视图模板引擎为ejs
app.set("view engine","ejs")
3. ejs基础语法
3.1 常用标签
<%
'脚本' 标签,用于流程控制,无输出。
<%_
删除其前面的空格符
<%=
输出数据到模板(输出是转义 HTML 标签)
<%-
输出非转义的数据到模板
<%#
注释标签,不执行、不输出内容
<%%
输出字符串 '<%'
%>
一般结束标签
-%>
删除紧随其后的换行符
_%>
将结束标签后面的空格符删除
3.2 执行JavaScript的代码
<% if(isTrue){ %>
<div>彭昱畅</div>
<% }else{ %>
<div>李钟硕</div>
<% } %>
主程序应用接口部分代码如下:
app.get('/',(req,res) => {
res.render('index',{
isTrue : false
})
})
3.3 将代码嵌入html页面
<%= code %>会对code进行html转义;
<title><%=title%></title>
例:
app.js部分主要代码:
app.get('/',(req,res) => {
res.render('index',{
title:'我是小可爱!!!',
})
})
index.ejs
<title><%= title%></title>
需要注意的是:第一个百分号和等号之间不能有空格,否则会报错
3.4 layouts布局
EJS 并未对块(blocks)提供专门的支持,但是可以通过 包含页眉和页脚来实现布局
<%- include('header'); -%>
<h1>
Title
</h1>
<p>
My page
</p>
<%- include('footer'); -%>
例.head.ejs
<style>
.head{
width: 100%;
height: 50px;
background-color: #999;
}
</style>
<div class="head"></div>
在index.ejs中引入:
<%-include('head')-%>
3.5 包含 include
通过 include
指令将相对于模板路径中的模板片段包含进来。(需要提供 'filename' 参数。) 例如,如果存在 "./views/users.ejs" 和 "./views/user/show.ejs" 两个模板文件,你可以通过 <%- include('user/show'); %>
代码包含后者。
你可能需要能够输出原始内容的标签 (<%-
) 用于 include 指令,避免对输出的 HTML 代码做转义处理。
<% for(var i= 0; i< dogs.length; i++){ %>
<%- include("./aa.ejs",{
name:dogs[i]
})%>
<% } %>
3.6 app locals
任何属性设置app.locals将混合的数据对象传递到渲染的视图引擎,和那些名称匹配选择属性将被传递给EJS称为选择:
app.locals.name = 'why'
更多精彩内容,可以ejs官网看看哦!!!!!