jade模板引擎的使用方法

来源：互联网发布：叽里呱啦儿童英语软件编辑：程序博客网时间：2024/06/05 18:29

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.jadeblock 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脚本语言，在“<%= %>”中混合写服务器端变量。

阅读全文

2 0