nodejs jade mysql_学习篇：NodeJS中的模板引擎：jade

NodeJS 模板引擎作用：生成页面

在node常用的模板引擎一般是

1、jade ——破坏式的、侵入式、强依赖(对原有的html体系不友好，走自己的一套体系)

2、ejs ——温和的、非侵入式的、弱依赖

本次就汇总一下jade的一些特性和使用方法。

一、Jade

在node中，jade的编写特性有：

1、根据缩进，来划分规定层级

例如：在原始目录下建立一个views目录，来存放该 test.jade

html

head

script

style

body

在node.js中来调用该jade(记得先用npm install jade)

const jade = require('jade') ;

var str = jade.renderFile('./views/test.jade' ,{pretty : true }) //pretty : ture 相当于beauty格式化一下输出的代码

console.log(str)

运行一下，log输出的语句便成了

可以看到在nodejs中的jade模板引擎，是根据缩进输入的情况，来划分规定层级的。

当然，如果你想把该代码输出成一个html文件,我们可以在源目录下新建一个build目录来存放生成的文件

那就将刚才的node.js改成

const jade = require('jade');//加载jade引擎

const fs = require('fs')

var str = jade.renderFile('./views/test.jade' ,{pretty : true }); //pretty : ture 相当于beauty格式化一下输出的代码

fs.writeFile('./buuld/index.html' ,str , function(err){

if (err)

console.log("编译失败");

else

console.log("编译成功");

})

执行完毕会在build目录下生成index.html

以上就是jade初级的使用方法。

但是我们使用模板引擎的目的并不是再此，还是能够添加css/js/data等数据。

2、关于class/style的写法——属性放在()里面，用逗号分隔

如：

html

head

script

style

body

div(class=['aaa','bbb','ccc'])

//class也可以写成div(style="aaa bbb ccc")

div(style={width:'200px' ,height:'300px' ,background:'red'})

//style也可以写成div(style="width:200px;xxxx")

运行一下node.js，则输出结果为

关于上方输出格式，可以发现，style是可以用json传输的，class是可以采用数组传输进去的。

因此可以在node.js中直接插入相关属性数据，然后在jade文件调用，这样就可以很方便的生成不同框架的模板文件

如果你想插入相关属性数据，并调用的话，应当在node.js中的 jade.renderFile中如此添加数据

/

var str = jade.renderFile('./views/test.jade' ,{pretty : true ,

arr:['aaa' ,'bbb' ,'ccc'], cls:{width :'200px' , height:'200px' , background :'red'}

});

并在test.jade文件中修改如下：

html

head

script

style

body

div(class=arr)

div(style=cls})

运行一下，结果是跟刚才的相同

3、在jade标签中输入数据时，记得在相应标签后，加一个空格

我们通常前端编程的时候，一般都会写到

名称：DobTink

//在标签内添加“名称：”之类的数据

年龄：15

window.onload = function(){

console.log('测试输出');

}

首页 //编写a标签、img标签给其src赋予属性

///等等

而在jade中，我们需要这样来写

div 名称：DobTink

div 年龄：15

script(src='a.js' ,xx = '')

script. //注意在script后面加个点"."

window.onload = function(){

console.log('测试输出');

}

a(href="http://www.dobtink.com") 首页

执行一下，便如上所示。

4、在jade中使用if else switch while 等语句

有些情况下，我们需要从后天拿取数据，并对数据在jade中进行数据处理操作，而在jade中的 这些语句还是很方便地

代码如下：

4.1 、jade中的 if 使用

html

head

body

-var a = 15;

-if(a%2==0)

div(style={background:'red'}) 偶数

-else

div(style={background:'green'}) 奇数

4.2 、jade中的 switch 使用

html

head

body

-var a = 3;

case a

when 0

div aaa

when 1

div bbb

when 2

div ccc

when 3

div ddd

default

|默认

在jade中，switch是不存在的，被转义成了case,使用方法跟switch一致。

在该段代码中 “|”符号，是直接输出后面数据， "-"号之后的语句，jade会默认为是逻辑执行代码语句，之后的语句它并不会要求每行都需要添加"-"符号。