模板引擎
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.1 标签
-
<%'脚本' 标签，用于流程控制，无输出。 -
<%_删除其前面的空格符 -
<%=输出数据到模板（输出是转义 HTML 标签） -
<%-输出非转义的数据到模板 -
<%#注释标签，不执行、不输出内容 -
<%%输出字符串 '<%' -
%>一般结束标签 -
-%>删除紧随其后的换行符 -
_%>将结束标签后面的空格符删除
2.4.2 执行javascript的代码
<% code %>用于执行javascript的代码
<% if(isTrue){ %>
<div>是的,我吃过了</div>
<% }else{ %>
<div>不,我还没吃</div>
<% } %>
2.4.3 将代码内容嵌入html
<%= code %>会对code进行html转义；
<title><%=title%></title>
2.4.4 Layouts 布局
EJS 不会特别地支持区块，但是可以采用包含头部和尾部的方法来实现局部，像这样：
<%- include('header') -%>
<h1>
Title
</h1>
<p>
My page
</p>
<%- 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
