Express之Jade模板引擎

之前在建站：Node+MongoDb+Express简单实例一文中使用过express，本文就来介绍下express的jade模板引擎，为什么不介绍另一个express默认的模板引擎ejs了，因为我觉得jade更简洁，更符合我个人的喜好
注:jade因为版权问题已改名为pug了，具体可看这Renaming jade -> pug

安装执行

全局安装:

sudo npm install -g jade

接下来我们先看下jade命令的常用参数，，注意区分大小写

我们接着新建一个index.jade文件，代码如下所示很简单:

doctype
html
    head
        title hello
    body
        h1 hello world

接着在命令行执行jade index.jade,编译后的文件index.html内容如下:

<!DOCTYPE html><html><head><title>hello</title></head><body><h1>hello world</h1></body></html>

可以发现默认编译后的源码是被压缩过的，没有缩进不利于阅读，我们可以加上-P参数后就发现源码是经过被美化过的了

jade -P index.jade

<!DOCTYPE html>
<html>
  <head>
    <title>hello</title>
  </head>
  <body>
    <h1>hello world</h1>
  </body>
</html>

不过每次修改后都需要到终端重新编译，有点过于麻烦，我们可以加上-w参数实时监听文件变化保存后自动重新编译

jade -w -P index.jade

属性和文本

属性写在标签名后的括号内，多个属性用逗号分隔，css类名以及id名还可以直接通过与写css代码相同的形式紧贴在标签名后面，如果标签名未写，默认为div标签
标签名后第一个空格后面的内容会被编译成标签内的文本内容

doctype
html
    head
        title hello world
    body
        a(id="aId" class="aClass" href="https://www.luckyw.cn",target="_blank") luckyw
        #divId.divClass hello world

//编译执行后结果:
<!DOCTYPE html>
<html>
  <head>
    <title>hello world</title>
  </head>
  <body>
    <a id="aId" href="https://www.luckyw.cn" target="_blank" class="aClass">luckyw</a>
    <div id="divId" class="divClass">hello world</div>
  </body>
</html>>
</html>

多行文本

多行文本的实现有两种方式，第一种是在标签名后紧接写一个.，这样后面的内容会被jade模板视作文本域而保留换行符，例如:

p.
    1a
    2b
    3c
    4d

//编译执行后结果:
<p>
  1a
  2b
  3c
  4d
</p>

注:由于是文本域，因此使用这种写法里面要嵌套标签时，只能写原生的html标签了

p.
    1a<span>abcd</span>
    2b
    3c
    4d

//编译执行后结果:
<p>
  1a<span>abcd</span>
  2b
  3c
  4d
</p>

多行文本的第二种写法是在每行前加上|，同时使用jade语法嵌套标签，比如:

p
    | 1a
    span abcd
    | 2b
    | 3c
    | 4d

//编译执行后结果:
<p>1a<span>abcd</span>2b
  3c
  4d
</p>

多行文本的写法不仅可用于p标签等，也常见于style和script标签，例如：

script.
  console.log("hello");
  console.log("world");
  console.log("luckyw.cn");

注释

单行注释:
通过"//"实现，用双斜杠的注释会被输出到html源码里
通过"//-"实现，不会被输出到html源码里

//我是一行注释，html源码可看到
//- 我是一行注释，不会输出到html源码里

//编译执行后结果:
<!--我是一行注释，html源码可看到-->

变量

变量声明很简单，前面加上-，之后使用js语法定义变量，使用时变量通过#{变量名}或者=变量名就行了，比如:

- var str = "hello world"
p #{str}
p=str

//编译执行后结果:
<p>hello world</p>
<p>hello world</p>

注意:以#{变量名}或者=变量名方式输出的变量数据会进行html转义，比如:

- var js = "<script>alert(1)</script>"
p #{js}
p=js

//编译执行后结果:
<p>&lt;script&gt;alert(1)&lt;/script&gt;</p>
<p>&lt;script&gt;alert(1)&lt;/script&gt;</p>

如果不想html转义，可以将#改成!即可

- var js = "<script>alert(1)</script>"
p !{js}
p!=js

//编译执行后结果:
<p><script>alert(1)</script></p>
<p><script>alert(1)</script></p>

那如果就想输出#{}和!{}该怎么办呢？可以前面加\来让Jade引擎不编译变量

- var js = "<script>alert(1)</script>"
p \!{js}
p \#{js}

//编译执行后结果:
<p>!{js}</p>
<p>#{js}</p>

这两种写法#{变量名}和=变量名输出的区别如下:

input(value="#{val}")
input(value=val)

//编译执行后结果:
<input value="undefined">
<input>

可以看出用#{}如果变量未定义，将会编译成undefined作为值，但用=来编译变量的话，如果变量未定义就忽略
有了变量就能轻松实现前后端分离，数据保存在JSON文件里，前端用Jade模板制作页面，在需要显示数据处用变量来实现，例如data.json文件里:

{
    "title":"hello world",
    "link":"https://luckyw.cn"
}

index.jade文件里:

doctype
html
    head
        title=title
    body
        a(href=link,target="_blank") luckyw

执行命令jade -P -w index.jade -O data.json后Jade文件里的变量被自动替换，编译出来的index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>hello world</title>
  </head>
  <body><a href="https://luckyw.cn" target="_blank">luckyw</a></body>
</html>

流程控制

if else:

- var author="luckyw"
if author
    p 作者:#{author}
else
    p 无作者
if arr.length>0
    p #{arr.join(", ")}

//编译执行后结果:
<p>作者:luckyw</p>
<p>node, express, jade</p>

for in：

- for(var k in obj)
    p #{obj[k]}

//编译执行后结果:
<p>luckyw</p>
<p>https://luckyw.cn</p>

each in:

- var obj = {"str":"luckyw","link":"https://luckyw.cn"}
each v,k in obj
    p #{k}:#{v}

//编译执行后结果:
<p>str:luckyw</p>
<p>link:https://luckyw.cn</p>

while:

- var a = 0
ul
    while a<4
        li=a++

//编译执行后结果:
<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

case when:

- var flag = 0
case flag
    when 1
        p 对的
    when 0: p 错误
    default
        p 错误

//编译执行后结果:
<p>错误</p>

mixin

之前在sass入门初体验中介绍过sass中的mixin，既能重用代码，而且维护简单，jade也支持mixin，可以理解为function
最简单的无参mixin，下面声明了一个mixin无参函数hello，调用时函数名前加上+:

mixin hello
    p hello
+hello

//编译执行后结果:
<p>hello</p>

带参数的mixin:

mixin info(name,skills)
    p=name
    ul.skills
        each item in skills
            li=item
+info("luckyw",["node","express","jade"])

//编译执行后结果:
<p>luckyw</p>
<ul class="skills">
  <li>node</li>
  <li>express</li>
  <li>jade</li>
</ul>

继承

jade中使用block和extend实现模板的继承，block块就是定义一段html代码，hello就是我们定义的block块，定义好之后我们可以直接通过block hello调用从而实现代码的复用

block hello
    p luckyw.cn
block hello

//编译执行后结果:
<p>luckyw</p>
<p>luckyw</p>

但block真正的作用在于占位，供子文件继承，例如每个文件的页头都一样，就body里内容不一样，可以写一个header.jade文件:

doctype
html
head
    title header
body
    block content

然后改写index.jade，首先用extends继承自header.jade的，然后重写header.jade里的block content:

extends header

block content
    p this is content

编译执行后结果:

<!DOCTYPE html>
<html>
  <head>
    <title>header</title>
  </head>
  <body>
    <p>this is content</p>
  </body>
</html>

Express之Jade模板引擎

安装执行

标签

属性和文本

多行文本

注释

变量

流程控制

mixin

继承

luckyw

引用和评论

本地存储——Cookie与Web Storage

淘宝API关键词搜索商品列表API接口对接详细步骤

NodeJS项目架构设计，看这一篇就足够了！

Node.js的Web服务在Nacos中的实践