一、前言

随着前端业务的不断发展，页面交互逻辑的不断提高，让数据和界面实现分离渐渐被提了出来。JavaScript的MVC思想也流行了起来，在这种背景下，基于node.js的模板引擎也随之出现。

什么是模板引擎？

它用于解析动态数据和静态页面所生成的视图文件，将原本静态的数据变为动态，快速地实现页面交互；
目前使用较广的模板引擎有以下几种：Jade / Pug、EJS、Handlebars。

jade模板引擎

jade模板引擎相较于原来的html会显得更加简洁，它将标签原本的"<>"符号去掉，用括号代替，层级使用tab缩进来分，并且也支持js语法；

二、jade的基本使用

安装jade：

  1. cnpm install jade --save

　　在程序中引入jade：

  1. app.set('views',"public");	//设置视图的对应目录
  2. app.set("view engine","jade");		//设置默认的模板引擎
  3. app.engine('jade', require('jade').__express);		//定义模板引擎

　　特定路由渲染：

  1. app.use("/",function(req,res){
  2. 	res.render("index.jade");
  3. });

　　完整实例：

  1. const express=require("express");
  2. const jade=require("jade");
  3. const fs=require('fs');
  4. var app=express();
  5.  
  6. //引用jade
  7. app.set('views',"public");	//设置视图的对应目录
  8. app.set("view engine","jade");		//设置默认的模板引擎
  9. app.engine('jade', jade.__express);		//定义模板引擎
  10.  
  11. //获取jade文件
  12. var str=jade.renderFile("./public/index.jade",{pretty:true});
  13. console.log(str);
  14.  
  15. app.use("/",function(req,res){
  16. 	res.render("index.jade");
  17. });
  18.  
  19. app.listen(8080);

　　由上面的app.set('views',"public");可知，这里将jade文件放在了public文件夹下：

在执行res.render时，会自动渲染public中的index.jade文件，之后转换为HTML5进行dom渲染显示。

三、jade基础语法

1、jade对很多html操作进行了简化，如下：

  1. html
  2. 	head
  3. 		style
  4. 	body
  5. 		div(class="content")
  6. 			h1 正文

　　了解过html语句的，从结构上一定会发现，它将原本的双标签省略了，尖括号也不见了，而层级的划分则由缩进实现，默认的，jade会把几乎所有缩进后的字母变为标签(行内元素)。以下代码会变为：

  1. <html>
  2.   <head>
  3.     <style></style>
  4.   </head>
  5.   <body>
  6.     <div class="content">
  7.       <h1>正文</h1>
  8.     </div>
  9.   </body>
  10. </html>

　　<div class="content"></div>也将用div(class="content")代表，简化了代码的书写；

2、“|”符号的作用

　　有时我们想让我们的标签成为文字，那么“|”成为了绝好的工具：

  1. div(class="content",id="content")
  2. 　　| center

　　我们可以看到，他将center作为文字原封不动的写入了html中，而不是作为一个标签渲染。
　　当然我们用它来转换js语句：

  1. script
  2. 	| var cli = document.getElementById("content");
  3. 	| cli.onclick=function(){
  4. 	|	alert("aaa");
  5. 	| }

　　他将会变为：

  1. <script>
  2.     var cli = document.getElementById("content");
  3.     cli.onclick=function(){
  4.         alert("aaa");
  5.     }
  6. </script>

3、识别js语句：

　　可以通过 script. 来识别js语法：

  1. script.
  2. 	var cli = document.getElementById("content");
  3. 	cli.onclick=function(){
  4. 		alert("aaa");
  5. 	}

　　他也会变为：

  1. <script>
  2.     var cli = document.getElementById("content");
  3.     cli.onclick=function(){
  4.         alert("aaa");
  5.     }
  6. </script>

　　我们可以看到，相比于用 | 使用script. 更加方便快捷。

4、引入其他js文件：

想在jade的js标签中引入其他js文件？没错，它也支持。前提请确保他们在同一文件夹下：

  1. script
  2. 　　include click.js

　　得到：

  1. <script>var cli = document.getElementById("content");
  2. 	cli.onclick=function(){
  3.        		alert("aaa");
  4. 	}
  5. </script>

5、表达式

“-”允许我们直接写js语法，在变量调用时，通过 #{a+b} 或 div=a+b 进行：

  1. html
  2. 	head
  3.  
  4. 	body
  5. 		-var a=10
  6. 		-var b=20
  7. 		div a+b为:#{a+b}
  8. 		div=a+b

　　会得到：

  1. <html>
  2.   <head></head>
  3.   <body>
  4.     <div>a+b为:30</div>
  5.     <div>30</div>
  6.   </body>
  7. </html>

6、for循环：

"-"也可以用于循环语句的使用

  1. html
  2. 	head
  3.  
  4. 	body
  5. 		-var arr=0;
  6. 		-for(var i=5;i>arr;i--)
  7. 			div=i
  8. 		div the number = #{i}

　　得到：

  1. <html>
  2.   <head></head>
  3.   <body>
  4.     <div>5</div>
  5.     <div>4</div>
  6.     <div>3</div>
  7.     <div>2</div>
  8.     <div>1</div>
  9.     <div>the number = 0</div>
  10.   </body>
  11. </html>

7、case ，when

类似于switch case语句：

  1. html
  2. 	head
  3.  
  4. 	body
  5. 		- var test = "汉子"
  6. 		-var none = "无"
  7. 		div The word is #{test}
  8. 		case test
  9. 			when "a": div the when is a
  10. 			when "b": div the second is b
  11. 			when "汉子": div the Third is 汉子
  12. 			default: The words is #{none}

　　得到：

  1. <html>
  2.   <head></head>
  3.   <body>
  4.     <div>The word is 汉子。</div>
  5.     <div>the Third is 汉子</div>
  6.   </body>
  7. </html>

　　类似于switch case，只执行when中与case对应的代码块，在匹配后面用 : 来作为要执行的代码，后面跟上标签和对应语句

8、if else条件判断

  1. html
  2. 	head
  3.  
  4. 	body
  5. 		-for(var i=12;i>0;i--)
  6. 			-if(i%2==0)
  7. 				div(style={background:'#eee',width:'100%',height:'20px',color: '#333'})	偶数
  8. 			-else
  9. 				div(style={background:'#333',width:'100%',height:'20px',color: '#eee'})	奇数

　　得到：

  1. <html>
  2.   <head></head>
  3.   <body>
  4.     <div style="background:#eee;width:100%;height:20px;color:#333">     偶数</div>
  5.     <div style="background:#333;width:100%;height:20px;color:#eee">     奇数</div>
  6.     <div style="background:#eee;width:100%;height:20px;color:#333">     偶数</div>
  7.     <div style="background:#333;width:100%;height:20px;color:#eee">     奇数</div>
  8.     <div style="background:#eee;width:100%;height:20px;color:#333">     偶数</div>
  9.     <div style="background:#333;width:100%;height:20px;color:#eee">     奇数</div>
  10.     <div style="background:#eee;width:100%;height:20px;color:#333">     偶数</div>
  11.     <div style="background:#333;width:100%;height:20px;color:#eee">     奇数</div>
  12.     <div style="background:#eee;width:100%;height:20px;color:#333">     偶数</div>
  13.     <div style="background:#333;width:100%;height:20px;color:#eee">     奇数</div>
  14.     <div style="background:#eee;width:100%;height:20px;color:#333">     偶数</div>
  15.     <div style="background:#333;width:100%;height:20px;color:#eee">     奇数</div>
  16.   </body>
  17. </html>

9、style的写法：

在对style样式进行修改时，与script相同，也可使用 . 对其进行编辑，之后对不同的标签在其后面加{}，大括号里写css语句1，并使用 ; 隔开

  1. html
  2. 	head
  3. 		meta(charset="utf-8")
  4. 		title jade测试页面
  5. 		style.
  6. 			body{margin:0;padding:0}
  7. 			div
  8. 			{width: 100px;height: 100px;background: #ccc;text-align: center;line-height: 100px;margin: 10px auto}
  9. 			div.last{clear:left}
  10. 	body
  11. 		-var a=0;
  12. 		while a<12
  13. 			if a%2==0 && a!=0
  14. 				div.last=a++
  15. 			else
  16. 				div=a++

　　得到：

  1. <html>
  2.   <head>
  3.     <meta charset="utf-8"/>
  4.     <title>jade测试页面</title>
  5.     <style>
  6.       body{margin:0;padding:0}
  7.       div
  8.       {width: 100px;height: 100px;background: #ccc;text-align: center;line-height: 100px;margin: 10px auto}
  9.       div.last{clear:left}
  10.     </style>
  11.   </head>
  12.   <body>
  13.     <div>0</div>
  14.     <div>1</div>
  15.     <div class="last">2</div>
  16.     <div>3</div>
  17.     <div class="last">4</div>
  18.     <div>5</div>
  19.     <div class="last">6</div>
  20.     <div>7</div>
  21.     <div class="last">8</div>
  22.     <div>9</div>
  23.     <div class="last">10</div>
  24.     <div>11</div>
  25.   </body>
  26. </html>

10、Mixin

Mixin的作用是对模块的复用，当重复代码有不同内容时，起作用就来了：

  1. - var num = 0;
  2. mixin node
  3.     div The number in mixin node is #{num++}
  4. +node()
  5. +node()
  6. +node()
  7. div At last, the number in mixin node is #{num++}

　　得到：

  1. <div>The number in mixin node is 0</div>
  2. <div>The number in mixin node is 1</div>
  3. <div>The number in mixin node is 2</div>
  4. <div>At last, the number in mixin node is 3</div>

以上则是jade的一些常用语法，如果平常使用jade作为开发，那么这些是非常基础的，也希望大家有所体会

Express全系列教程之(十)：jade模板引擎的更多相关文章

  1. Express全系列教程之(十一)：渲染ejs模板引擎

    一.简介 相比于jade模板引擎,ejs对原HTML语言就未作出结构上的改变,只不过在其交互数据方面做出了些许修改,相比于jade更加简单易用.因此其学习成本是很低的.您也可参考ejs官网:https ...

  2. Express全系列教程之(一)：Express的安装 和第一个程序

    前言 ndoe.js,一个基于javsscript运行环境的服务器语言,它的出现使得javascript有能力去实现服务器操作.在gitHub上ndoe.js的star数已接近6万,可见其受欢迎程度: ...

  3. Express全系列教程之(九)：将session上传至mysql数据库

    一.简介 实际引用中,有些公司在不同地区会设置不同服务器,因此就需要用到nginx以实现负载均衡,这时,将session数据保存至数据库就成为了需要面对的问题,我们以MySQL数据库为例,看看他是如何 ...

  4. Express全系列教程之(八)：session的基本使用

    一.关于session session是另一种记录客户状态的机制,与cookie保存在客户端浏览器不同,session保存在服务器当中:当客户端访问服务器时,服务器会生成一个session对象,对象中 ...

  5. Express全系列教程之(七)：cookie的加密

    一.关于cookie加密 cookie加密是让客户端用户无法的值cookie明文信息,是数据安全的重要部分:一般的我们可以在保存cookie时对cookie信息进行加密,或者在res.cookie中对 ...

  6. Express全系列教程之(六)：cookie的使用

    一.关于Cookie 在我们关闭一个登录过的网址并重新打开它后,我们的登录信息依然没有丢失:当我们浏览了商品后历史记录里出现了我们点击过的商品:当我们推回到首页后,推荐商品也为我们选出了相似物品:事实 ...

  7. Express全系列教程之(五)：Express的中间件

    一.中间件 从字面意思,我们可以了解到它大概就是做中间代理操作,事实也是如此:大多数情况下,中间件就是在做接收到请求和发送响应中间的一系列操作.事实上,express是一个路由和中间件的web框架,E ...

  8. Express全系列教程之(四)：获取Post参数的两种方式

    一.关于POST请求 post方法作为http请求很重要的一部分,几乎所有的网站都有用到它,与get不同,post请求更像是在服务器上做修改操作,它一般用于数据资源的更新.相比于get请求,post所 ...

  9. Express全系列教程之(三)：get传参

    一.关于get请求 一般在网站开发中,get都用作数据获取和查询,类似于数据库中的查询操作,当服务器解析前台资源后即传输相应内容:而查询字符串是在URL上进行的,形如: http://localhos ...

随机推荐

  1. vue-cli脚手架build目录中的dev-server.js配置文件

    本文系统讲解vue-cli脚手架build目录中的dev-server.js配置文件 这个配置文件是命令npm run dev 和 npm run start 的入口配置文件,主要用于开发环境 由于这 ...

  2. oracle——pl/sql 查询中文乱码

    1.查看服务器端编码select userenv('language') from dual;我实际查到的结果为:AMERICAN_AMERICA.AL32UTF82.执行语句 select * fr ...

  3. java.lang.Class.getDeclaredMethod()方法详解

    Java.lang.Class.getDeclaredMethod()方法用法 注:方法返回一个Method对象,它反映此Class对象所表示的类或接口的指定已声明方法. 描述 java.lang.C ...

  4. oracle create user &tablespace & imp

    一.表空间 1.创建表空间 CREATE TABLESPACE 空间名称 DATAFILE '文件名1' SIZE 数字M [,'文件名2' SIZE 数字….] EXTENT MANAGEMENT ...

  5. centos系统查看本机IP地址

    centos系统查看本机IP地址,输入 ifconfig -a查看 centos查询上网公网IP输入 curl ifconfig.me 命令即可查看 centos查询上网网关IP,tracepath  ...

  6. JAVA语法规则总结

    单继承多实现 抽象类  抽象方法 使用关键字:abstract修饰的方法就是抽象方法; 抽象方法的形式:只有方法的声明,没有方法体; 抽象方法一般存在于父类中,相当于强制要求子类必须重写该方法,相当于 ...

  7. gearman安装问题总结

    解决configure: WARNING: You will need re2c 0.13.4 or later if you want to regenerate PHP parsers. yum ...

  8. 面试题:hibernate第三天 一对多和多对多配置

    1.1 一对多XML关系映射 1.1.1 客户配置文件: <?xml version="1.0" encoding="UTF-8"?> <!D ...

  9. NSClassFromString 实例话静态库中的类

    Class myClass = NSClassFromString("StaticLibyClassName"); StaticLibyClassName是从静态库中实例化一个Cl ...

  10. Luogu 1445 樱花

    BZOJ 2721 唔,太菜了弄不来. 先通分:得到 $\frac{x + y}{xy} = \frac{1}{n!}$ 两边乘一下 $(x + y)n! - xy = 0$ 两边加上$(n!)^2$ ...