Express全系列教程之(十)：渲染jade模板引擎

一、前言

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

什么是模板引擎？

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

jade模板引擎

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

二、jade的基本使用

安装jade：

cnpm install jade --save

在程序中引入jade：

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

特定路由渲染：

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

完整实例：

const express=require("express");
const jade=require("jade");
const fs=require('fs');
var app=express();

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

//获取jade文件
var str=jade.renderFile("./public/index.jade",{pretty:true});
console.log(str);

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

app.listen(8080);

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

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

三、jade基础语法

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

html
	head
		style
	body
		div(class&