EJS模板引擎

目录

1.认识模板引擎

1.1 什么是模板引擎

1.2 模板引擎的原理

2.认识EJS

2.1 什么是EJS

2.2 ejs的特点

3.ejs的基本使用

3.1 安装ejs

3.2 新建 ejs 文件

3.3 node 原生开发使用 ejs 模板

2.4 express使用ejs模板

2.5 配置ejs目录

3. ejs基础语法

3.1 常用标签

3.2 执行JavaScript的代码

3.3 将代码嵌入html页面

3.4 layouts布局

3.5 包含 include

3.6 app locals

---

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的特点

1. 纯 JavaScript:我们热爱 JavaScript，他是一门友好的编程语言。所有模板语言都要成长为图灵完备的语言，也就是说要增加一个中间层。何必呢，直接用 JS 吧！
2. 快速开发:无需浪费时间钻研那些所谓“优雅”的神秘语法，也不用研究数据究竟如何能够被正确处理。
3. 语法简单:EJS 支持直接在标签内书写简单、直白的 JavaScript 代码。只需让 JavaScript 输出你所需要的 HTML ，完成工作很轻松！
4. 执行迅速:我们都知道 V8 以及类似 JavaScript 引擎的速度有多快。EJS 能够缓存 JS 函数的中间代码，从而提升执行速度。
5. 易于调试:调试 EJS 错误（error）很容易：所有错误都是普通的 JavaScript 异常，并且还能输出异常发生的位置。
6. 社区活跃: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 常用标签

1. <% '脚本' 标签，用于流程控制，无输出。

2. <%_ 删除其前面的空格符

3. <%= 输出数据到模板（输出是转义 HTML 标签）

4. <%- 输出非转义的数据到模板

5. <%# 注释标签，不执行、不输出内容

6. <%% 输出字符串 '<%'

7. %> 一般结束标签

8. -%> 删除紧随其后的换行符

9. _%> 将结束标签后面的空格符删除

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官网看看哦!!!!!