jade模板引擎的使用方法

本是古典何须时尚 2022-06-14 01:06 228阅读 0赞

**1.使用前，需要安装**

//npm包安装工具下载
    
    npm install jade

**2.将view engine内部变量值设定为“jade”**

app.set('view engine','jade');

**3.设置views内部变量的值显示指定视图文件的存放路径**

app.set('views',_dirname+'/views');

**4.在express框架中，使用http.ServerResponse对象的render方法来渲染一个视图。**

res.render(view,[locals],[callback]);
    
    //render有三个参数，第一个view，必选参数，指定需要渲染的视图文件名；
    //locals参数值是一个对象，用于指定该视图所使用的本地变量名和本地变量值，可选参数；
    //callback是一个回调函数，用于指定视图渲染操作结束调用的回调函数，如下：
    
    function(err,html){ 
        //回调函数代码
    }
    
    //回调函数中有两个参数
    //err参数值是视图渲染失败后触发的错误对象
    //html参数值是根据指定的视图模板和视图引擎所产生的html代码

**5.创建一个布局文件：layout.jade**

//layout.jade
    !!!5                                 //解析后为<!doctype html>
    html                                 //解析后为<html>
        head                             //解析后为<head>       
            title=pageTitle   //解析后为<title>内容为'变量pageTitle的值'
        body                             //解析后为<body>
            nav                          //解析后为<nav>
                ul                       //解析后为<ul>
                    each item in arr    //遍历arr中的值赋值给item
                        li 项目 #{item} //解析后为<li>内容为'项目'+item的值
            block content             //指定一个占位符，内容在子视图中指定

**6.创建一个子视图文件：index.jade**

extend layout         //继承于主视图layout.jade
    block content       //与layout.jade中对应，表示内容在此处指定
        h1 hello world     //<h1>hello world</h1>

**7.显示index**

app.get('/',function(req,res){ 
        res.render('index',{pageTitle:"jade",arr:["1","2","3"]});
    },function(err,html){ 
        if(err){
            console.log(err);
        }
    });

**其实，jade文件对于内容的语法和缩进有着严格的要求，不允许有一点错误，否则程序就无法运行，下次总结jade的语法的时候详细说。**

**顺便说一下EJS模板引擎，该视图文件的书写方法与HTML文件方法基本一致，但是可以向php、jsp那样在文件中使用“<% %>”符号中混合书写服务器端node.js脚本语言，在“<%= %>”中混合写服务器端变量。**