第十二节: ejs与pug模板引擎

模板引擎

node框架express, koa可以像php一样使用后台语言模板,常用的模板引擎有ejs和pug

1. 认识模本引擎

1.1 什么是模板引擎

模板引擎（Tempalte Engine）是一个将页面模板和要显示的数据结合起来生成HTML页面的工具。

模板引擎的功能是将页面模板和要显示的数据结合起来生成HTML页面，它既可以运行在服务器端，又可以运行在客户端。大多时候，它都是在服务器端直接被解析为HTML的，解析完成后，再传输到客户端，因此客户端甚至无法判断页面是不是由模板引擎生成的。当然，模板引擎也可以运行在客户端，这里所说的客户端是指浏览器。考虑到浏览器的兼容性问题，还是由服务器端运行模板引擎为好。

1.2 模板引擎的原理

简单说来，HTML = Template + Data。值得一提的是，这里的Data是JS对象，不能使用JSON数据单纯的JSON字符串是渲染不出来的。
在MVC设计模式中，模板引擎放在了服务器端。当控制器得到用户的请求后，从模型（Model）获取到数据，再调用模板引擎。模板引擎以数据和页面模板为输入，生成HTML页面，然后返回控制器，由控制器交回给客户端。

模板引擎的种类有很多，我们先说 EJS

2. 认识ejs

2.1 什么是ejs

EJS是Embedded JavaScript的缩写翻译为: 嵌入式Javascript。

EJS 是一套简单的模板语言，通过嵌入具有JavaScript特色的功能来进行HTML模板的渲染。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。

EJS比较通俗易懂，从代码展示效果来看，它仍然是HTML结构，但同时又具有额外的功能，可以有效地复用已有的代码块。如果有一个现有的HTML项目，所需要做的全部工作就是用.ejs扩展名重新命名文件，然后，就可以使用EJS的特殊功能了。

2.2 ejs的特点

快速编译与绘制输出
简洁的模板标签：<% %>
自定义分割符（例如：用替换 <% %>）
引入模板片段
同时支持服务器端和浏览器 JS 环境
JavaScript 中间结果静态缓存
模板静态缓存
兼容 Express视图系统

2.3. ejs的使用

2.3.1 安装ejs

npm install ejs --save

2.3.2 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:"wuwei"
        },(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.3.3. 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:'标题'
    })
})

// 监听端口
app.listen(3000);
console.log("Server start at 3000 port")

此时当用户访问/的时候,会自动使用views文件夹中的wuwei.ejs文件当做模板,

向模板中传入的参数就是后面传入的对象.

2.3.4 配置ejs目录

// 配置ejs目录,默认就是views目录
app.set("views",path.join(__dirname,"views"))
// 配置视图模板引擎为ejs
app.set("view engine","ejs")

2.4. ejs模板的语法

2.4.2 执行javascript的代码

<% code %>用于执行javascript的代码

<% if(isTrue){ %>
    是的,我吃过了
<% }else{ %>
    不,我还没吃
<% } %>

2.4.3 将代码内容嵌入html

<%= code %>会对code进行html转义；

<%=title%>

2.4.4 Layouts 布局

EJS 不会特别地支持区块，但是可以采用包含头部和尾部的方法来实现局部，像这样：

<%- include('header') -%>

  Title


  My page

<%- include('footer') -%>

2.4.5 包含

通过 include 指令将相对于模板路径中的模板片段包含进来。

<% for(var i= 0; i< dogs.length; i++){ %>
    <%- include("./aa.ejs",{
        name:dogs[i]
    })%>
<% } %>

2.4.6 App locals

任何属性设置app.locals将混合的数据对象传递到渲染的视图引擎,和那些名称匹配选择属性将被传递给EJS称为选择:

app.locals.name = 'wuwei'

2.5 express使用ejs

express设置模板引擎

//把./views目录设置为模板文件的根，html文件模板放在view目录中
app.set('views','./views');
 
//设置模板引擎为ejs
app.set('view engine','ejs');
 
//为html扩展名注册ejs
app.engine('html',ejs.renderFile);

3. Pug模板引擎

pug模板就是原来的jade模板,语法最简单的模块引擎,性能高于ejs

3.1.pug中文网

网址: https://pug.bootcss.com/api/getting-started.html

3.2. pug的安装

$ npm i -S pug

3.3. 配置模板引擎

将pug模板引擎注册到koa模板上,需要借助视图工具koa-views

koa-views专门来管理koa跟视图有关的,这是为模板引擎而生,就是将我们模板引擎和我们使用的服务框架结合起来

模板引擎不需要导入到项目中,因为安装了koa-views后,views会自动识别模板引擎

const Koa = require('koa')
const views = require('koa-views')
const { join } = require('path')

const app = new Koa;

// 配置模板引擎
// 官网配置模板路径
/*
app.use(views(__dirname + '/views'),{
    map: {
        html: 'underscore'
    }
})
*/
app.use(views(join(__dirname,'/views')),{
    extension: 'pug'
})

app.use(async (ctx)=>{
    await ctx.render('index')
})
app.listen(3003)

3.4. pug模板语法

pug模板语法建议看官网
官网地址: https://www.pugjs.cn/api/getting-started.html