上一节-node.js学习（11）—cookie和session的使用
1.模板引擎
什么是模板引擎，我们可以分开理解。
模板：一个模子（结构）。供你套数据，并且依据不同数据去走不同的逻辑
引擎：一个处理器（编译、运行），最后渲染出HTML代码
所以，合起来理解模板引擎使用模板文件来动态生成HTML文件，在生成时又可以按照一定的规则将应用程序里的数据整合进HTML文件。类似后台的jsp语言。
nodejs中比较流行的模板引擎有2个——jade和ejs。
本章节我们先了解下jade。
2.jade( pug )
背景： 以前叫jade，因为和注册商标重名，从2.0.0开始，已经改名成（pug），所有新版本都将在pug下发布。但是以前旧版本jade仍可以安装使用，只不过无法使用新版本的功能了。
特点： jade属于破坏式（侵入式）引擎。它将原本的双标签省略,尖括号也不见了，使用缩进来表示层级，然后再会把缩进后的字母变为标签。这样易读、简洁，但是如果想移植 html 文件到 jade 就得重写，很影响效率，现在看来大多人普遍会采用 ejs 来开发项目。具体为什么重写、破坏式，学习了下面的语法就可以明白了。
3.渲染html
目录结构如下：
20190527222752.png
我们在jade.js里面增加如下代码：
const jade=require('jade');
var str=jade.render('div a')
console.log(str) //<div>a</div>
上面我们引入jade（也可以使用pug，用法一样），执行jade自带的jade.render()方法，运行该文件，发现输出结果为我们常见的html结构。<div></div>,但是实际开发中，这种不会使用，我们需要渲染很多层结构。
4.渲染文件
现在我们新建一个文件夹（这我叫views），专门放咱们的jade文件（也可以使用.pug文件，用法一样）。目录结构如下：
20190527223900.png
我们知道jade是以缩进来展示html的，那么我们在1.jade文件增加一段简单的代码
doctype html
html
head
body
div
p
span
然后在1.js文件中增加下面代码
const jade=require('jade');
var str=jade.renderFile('./views/1.jade',{
pretty:true //格式化
})
console.log(str);
//str为
<!DOCTYPE html>
<html>
<head>
<body>
<div></div>
<p></p><span></span>
</body>
</head>
</html>
很简洁吧，所以理解了之前为什么将jade是破坏性、移植需重写，因为语法已经和html完全不一样，即破坏了原有的语法，移植过来的html代码必须要安装jade自己的语法来写才行，否则无法识别。
-
我们使用
jade.renderFile()来渲染jade文件成html结构 -
上面代码增加
{pretty:true}，表示格式化输出的代码，如果不加，默认显示在一行<html><head><body><div></div><p></p><span></span></body></head></html> -
如果是行内元素(默认排成一行)，jade会自动识别，就算格式化，也会显示在一行
-
jade通过缩进来识别，所以只要有缩进（不管相差几格），都会识别。一般我们用2格
学习了jade的简单语法后，下面我们讲解下jade的基本语法规则。
5.id与class
div#test.test1.test2 或者 #foo.bar
//转换为
<div id="test" class="test1 test2"></div>
上面#foo.bar为语法糖写法（只渲染成div标签），目前的版本已经被很好地支持了。
6.标签文本
div 文本
div 文本
div 文本
//转换为
<div>文本</div>
<div> 文本</div>
<div> 文本</div>
使用一个空格+文本来渲染标签中的文本内容，假若有多段文本怎么办？有两种写法：
-
使用
|来渲染多行文本，该符号表示原样输出。div |文本1 |文本2 |文本3 script |document.getElementById('test').onClick=function(){ | alert(1) | console.log(1) |} //转换为 <div> 文本1 文本2 文本3 </div> <script> document.getElementById('test').onClick=function(){ alert(1) console.log(1) } </script> -
使用
.来渲染多行文本。该符号在谁后面（没有空格，有的话相当于单行标签文本），谁下面的所有子节点都原样输出。div. div文本1 文本2 文本3 div . script. doucment.getElementById('test').onClick=function (){ alert(1) console.log(1) } //转换为 <div> div文本1 文本2 文本3 </div> <div>.</div> <script> doucment.getElementById('test').onClick=function(){ alert(1) console.log(1) } </script>
上面例子，. 跟在div和script后面，所以它们下面的子节点都原样输出
7.属性
div(data-href='/login', title='登录' test1=undefined test2=null) 登录
div(style="width:100px;height:100px")
div(style={width:"100px",height:"100px"})
div(class="test1 test2")
div(class=["test1","test2"])
//渲染为
<div data-href="/login" title="登录" test3="null">登录</div>
<div style="width:100px;height:100px"></div>
<div style="width:100px;height:100px"></div>
<div class="test1 test2"></div>
<div class="test1 test2"></div>
- 使用
( )来渲染属性，所以之前讲的id以及class也可以改成这种写法（喜欢这种写法的话） - 当一个属性值是
undefined或者null不会被渲染出来 - 在jade中style属性很特殊（像json），既可以使用
( )来渲染属性，也可以使用json格式来渲染 - 在jade中style属性很特殊（像数组），既可以使用
( )来渲染属性，也可以使用数组格式来渲染
8.include
上面我们讲解了jade属性的用法，所以我们引用外部js可以这样写
doctype html
html
head
meta(charset="UTF-8")
script(src="1.js")
body
//转换后
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="1.js"></script>
</head>
<body></body>
</html>
如果我不想引用外部js（因为多增加一个http请求），想直接写在script标签里面，我们之前也讲解了多行文本（使用|或者'.'）。假如我不想使用多行文本，但是想使用属性写法，但又不想让属性写法生成一个http请求，该怎么办？jade中有个include标签可以让我们把js代码导入script标签中(类似sass中的import)，而不生成http请求。
假设1.js文件中的代码为：
console.log(1)
执行下面代码：
doctype html
html
head
meta(charset="UTF-8")
script
include 1.js
body
//转换后
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>console.log(1)</script>
</head>
<body></body>
</html>
上面只讲解了jade的基本语法，下面一节我们讲解如何根据不同数据渲染不同的模板。
网友评论