@[toc]

1.为什么要使用模板引擎

在nodejs中为什么要使用模板引擎。首先我们先想象一个场景，当前端请求到后端的一组数据后，我们要渲染dom，以前的常规操作就是使用js进行字符串的拼接，这样做虽然可以解决问题，但是这无疑增加了降低了代码的可读性和可维护性。一旦需求发生改变我们将束手无策。

在express框架中有很多模板引擎供我们选择。ejs、pug\jade等。

2. pug的介绍

实际上pug就是jade，jade改名后就成了pug。下面我们介绍一下pug的基本语法以及在express框架的使用。

2.1关于pug的一特点：

1.超强的可读性

2.客户端支持

3.灵活易用的缩进

4.安全，默认代码是转义的

5.命令行下编译jade模板

6.模板继承

7.块扩展

8.编译及运行时的上下文错误报告

9.HTML5模式

10.可选的内存缓存

11.联合动态的静态标记类

12.利用过滤器解析树的处理

13.没有前缀的标签

14.原生支持 express 模块

2.2 pug的安装

首先要想使用pug先要进行全局安装。

    npm i pug -g//全局安装
    npm i pug-cli -g//全局安装脚手架

在项目中使用 pug时，还需要进行局部安装。

    npm init //安装package.json
    npm i pug --save-dev //局部安装

编译

	pug pug文件名 -o 目标路径 -P -w

vscode可以安装插件进行编译（不适合在项目中使用）：

3.pug语法

基本骨架：

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
    body

3.1 标签语法

每层级标签之间都采用多一个缩进表示嵌套关系，无需闭合标签，无需尖括号。

 h1 这是一个pug模板案例
       div
       ul
      	 li
       span
       p
       input

上述代码的 li 元素比 ul元素多一个缩进，则表示 ul嵌套了 li 标签。

3.2 属性

标签属性看起来与html相似，但是它们的值只是一般的JavaScript。

div(class="box") this is a div elelement

可直接运行javascript变量

- var bool = true
div(class=bool?"true":"false") // 三元运算

当属性很多时，可以换行显示。

- var bool = true
div(class=bool?"true":"false") // 三元运算

布尔属性（默认为true）。

input(type='checkbox', checked)

样式属性（可以是字符串，也可以是对象）。

p(style="color:#999999;font-size:18px")
h2(style={color:"#666666","font-size":"20px"})

类属性（可以是字符串，像普通属性，也可以是数组）。

div.foo
div.foo.bar
div(class="foo bar")
-var classes = ['box1','box2','box3']
div(class=classes)
div.bing(class=classes)

id属性。

div#box1 
div(id="box2") 
// 由于div是标签常见的选择，所以可以省略，也是标签的默认值
.oh 
#no 
#foo.oh.no

3.3 文本

若要输出文本非常简单，只需在元素后面添加即可。

h1 这是一个h1标签
.box hello pug

动态输出内容：

- var obj = {name:'tom'} 
p #{obj.name} is a man

输出属性值：

- var url = 'http://www.baidu.com' 
a(href=url) 百度一下

3.4 pug条件语句

pug支持纯原生的javascript，所以也可以支持条件语句。

- var flag = true 
if flag 
 p= flag 
else 
 p= flag

3.5 pug循环语句

pug提供了两种迭代的主要方法，each和while，当然，for循环还是可以使用的。

for：

- var arr = [1,2,3,4,5] 
ul 
 - for(var i=0;i<arr.length;i++) 
 li= arr[i]

each：

- var arr = {name:'binge',six:'man'} 
ul 
 each val in arr 
 li= val

while：

ul 
 while num<5 
 li= num++

3.6 mixin混合

相当于函数，可传参

骨架：

//- 定义函数
mixin study 
 //- 代码块
 p good good study 
 //- 函数的调用
+ study

实例：

mixin show(time)
 h3= time
 //- 判断是否存在block
 if block  
 block
 else 
 p no show
+show('2017-11-11')
p Singing and dancing //block

3.7 模板继承

3.7.1 在pug中支持block和extends来继承模板

在项目中经常出现代码块复用的情况。比如html文档的head部分。所以我们可以将其抽离出来作为公共模块。

例子：

common.pug

doctype html 
html 
 head 
 title pug模板
 body 
 h1 pug模板
 //- 哪个文件继承，就调用哪个文件的block为content的模块
 block content

index.pug使用：

// extends继承语法，common，继承的文件的路径
extends common 
block content 
 mixin show(name,...shows) 
 p=name 
 ul 
 each show in shows 
 li= show 
 +show('binge','唱歌','跳舞','睡觉')

生成的hmtl文件：

<!DOCTYPE html> 
<html> 
 <head> 
 <title>pug模板</title> 
 </head> 
 <body> 
 <h1>pug模板</h1> 
 <p>binge</p> 
 <ul> 
 <li>唱歌</li> 
 <li>跳舞</li> 
 <li>睡觉</li> 
 </ul> 
 </body> 
</html>

3.7.2 包含

pug允许在文件中插入另一个文件内容。

common.js

doctype html 
html 
 head 
 //- 引入header.pug 
 include header 
 body 
 h1 pug模板
 block content

header.pug

title pug模板
meta(charset="utf-8")

生成html：

<!DOCTYPE html>
<html>
  <head>
    <title>pug模板</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>pug模板</h1>
  </body>
</html>

4. express渲染

express中使用pug/jade实际上非常容易。

我这里使用生成器生成express mvc架构。

使用方法（新建路由文件）：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
router.get('/index',(req,res,next)=>{
  res.render('test');
})

module.exports = router;

至于具体实现可以看一下express架构的实现。

这是普通使用：

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.set('views','./views');  //设置应用程序视图的目录（可以是数组，若是数组，则视图按照它们在数组中出现
的顺序进行查找）
app.set('view engine','jade');  //设置当省略后缀名时，使用默认的引擎扩展
app.use(bodyParser.urlencoded({ extended: true }));  //解析application/x-www-formurlencoded
app.get('/',function(req,res){
    res.render('jade',{
        title:'index page',
        user:{
            username:'tom',
            password:123456
       }
   })
})
app.listen(8888,function(){
    console.log('project running at http://127.0.0.1:8888')
})

Pug/jade快速上手教程

1.为什么要使用模板引擎

2. pug的介绍

2.1关于pug的一特点：

2.2 pug的安装

3.pug语法

3.1 标签语法

3.2 属性

3.3 文本

3.4 pug条件语句

3.5 pug循环语句

3.6 mixin混合

3.7 模板继承

3.7.1 在pug中支持block和extends来继承模板

3.7.2 包含

4. express渲染

常见问题FAQ

掘金(奥奥奥) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

1.为什么要使用模板引擎

2. pug的介绍

2.1关于pug的一特点：

2.2 pug的安装

3.pug语法

3.1 标签语法

3.2 属性

3.3 文本

3.4 pug条件语句

3.5 pug循环语句

3.6 mixin混合

3.7 模板继承

3.7.1 在pug中支持block和extends来继承模板

3.7.2 包含

4. express渲染

常见问题FAQ

掘金(奥奥奥) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式