Node.js-Jade模板引擎

3. Jade模板引擎

  (1) 使用

       const ejs = require('ejs');

              ejs.renderFile(path, data, (err, html) => {

        })

 (2) 模板语法

Jade.js:

const http = require('http');
const jade = require('jade');
// 创建服务
const server = http.createServer(function (req,res) {
    if(req.url === '/favicon.ico'){
        return false;
    }
    //定义数据
    const data = {
        title:'新闻',
        content:'新闻描述',
        dataList:['娱乐','国际','军事','娱乐','国内']
    };
    jade.renderFile('./jade/index.jade',data,function (err,html) {
        if (err) throw err;
        res.writeHead(200,{
            'Content-type':'text/html;charset=utf8'
        });
        res.end(html);
    });
});
server.listen(8087,function () {
    console.log('http server is running on port 8087');
});

Index.jade

doctype html
html
    head
        meta(charset='utf8')
        title=title
        style.
            .box{width:500px;padding: 20px;border:1px solid #ccc;}
        script.
            console.log('js');
        body
            h1=title
            p.box=content
            ul
                for item in dataList
                    li=item
            if Math.random()*10>5
                p 大于5
            else
                p 不小于5
            //p标签添加class,p.box

(3) 模板继承

共用的layout.jade

doctype html
html
    head
        meta(charset='utf8')
        block scripts
            script(src='jquery.js')
            script(src='bootstrap.js')
        body
            h1 头部
            hr
            block main
                p 主体内推
            hr
            h1 底部

文件main.jade引入：

extends layout
//替换scripts内容
block scripts
    script(src='js.js')
//替换main内容
block main
    div 替换

主体jade.js：

const http = require('http');
const jade = require('jade');
// 创建服务
const server = http.createServer(function (req,res) {
    if(req.url === '/favicon.ico'){
        return false;
    }
    //定义数据
    const data = {
        title:'新闻',
        content:'新闻描述',
        dataList:['娱乐','国际','军事','娱乐','国内']
    };
    jade.renderFile('./jade/main.jade',data,function (err,html) {
        if (err) throw err;
        res.writeHead(200,{
            'Content-type':'text/html;charset=utf8'
        });
        res.end(html);
    });
});
server.listen(8087,function () {
    console.log('http server is running on port 8087');
});