node之jade和ejs的使用方法 jade篇

let express = require('express');
let consolidate = require('consolidate');
let app = express();
// app.use(express.static('./'));
app.set('views','./go');//设置view层，第二个参数是表示view层的路径
app.set('view engine','html');//添加解析的后缀名
app.engine('html',consolidate.jade);  //要解析的文件，用的那个模板引擎去解析。
app.locals = {
    name:'wp',
    age:
}
app.get('/',(req,res)=>{
    // res.render('/index',(err,data)=>{
    //     console.log(data);
    //     res.send(data);
    // }); //当使用app.set时 其实就是将原来的jade使用方法进行了省略改变
    res.render('index');
});
app.listen(,()=>{
    console.log('go');
});

jade的html页面的注释书写 必须是以双斜杠// 来书写。

html页面

[html] view plain copy
doctype
html
    head
        title= pageTitle
        script(type='text/javascript').
            function showCityEx(city)
            {
                return city + " & " + city;
            }  

    body
        //--@test转义;以下几个字符有特殊意义；如果当做文本，必须使用|转义
        //--@test转义1: - ，jade代码的开头
        //--@test转义2: | ，jade多好文本的开头
        //--@test转义3: / ，jade注释的开头
        //--@test转义4: = ，jade代码表达式的开头
        |- i begin at "-" (use |-prefix in jade)<br/>
        ||- i begin at "|"(use |-prefix in jade)<br/>
        |//--i begin at "//"(use |-prefix in jade)<br/>
        |=i begin at "="(use |-prefix in jade)  

        h1 #{h1}  

        #container.col
            if name=='liuchuanchuan'
                p You are owner!
            else
                p You are #{name},and you are not owner!  

        //--@test_后台js代码，特别注意缩进相当于括号，以 - 开头--
        -var a=new Array()
        -for(var i=; i<citys.length; i++)
            -   a.push(citys[i])
            -   a[a.length-] = a[a.length-] + "_1"
        p   old:#{a.length},#{a}
        -a.push('qingdao')
        p   new:#{a.length},#{a}
        p
            |I had ever goto lots of citys(more than #{a.length}).<br/>
            -a.push('chengdu')  //--这里的缩进影响是否会新添加一个<P>;这种语法有点扯淡
            =(a.length+) + " "
            |is my dream!<br/>
            |I had ever goto lots of citys(#{a}).
            |I like to travel!
            |do you?  

        p.
            i had go to  

        p=  "now length = " + a.length
            |<br/>haha
        ul
            for city in citys
                li= city
            else
                li sorry, no city!  

        //--@test_后台jade代码，特别注意循环的使用--
        p   this is an example of table.
        table(border=)
            tr
                th hello
                th world,citys.count=#{cscores.length + }
                th count
            for city,index in citys
                tr
                    td= index
                    td welcome to #{city}(#{city.substr(,)})
                    td= cscores[index]
        div over!  

js页面书写

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

// Compile a function
var fn = jade.compile('hello world #name', {});  

// Render the function
var html = fn({name:'liu'});
console.log(html);  

// 渲染字符串
var rtn = jade.render('.csser.com hello,#{name}', { name: 'liuchuanchuan' });
console.log(rtn);  

// 渲染文件
var city_names = [
    'wuhan',
    'tianjin',
    'beijing',
    'shanghai'
];  

var city_scores = [
    '',
    '',
    '',
    ''
];  

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { citys: city_names, cscores: city_scores, name:'liuchuanchuan',h1:'who are you'});
});  

module.exports = router;  

效果页面