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:18
}
app.get('/',(req,res)=>{
    // res.render('/index',(err,data)=>{
    //     console.log(data);
    //     res.send(data);
    // }); //當使用app.set時 其實就是將原來的jade使用方法進行了省略改變
    res.render('index');
});
app.listen(3000,()=>{
    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=0; i<citys.length; i++)   
            -   a.push(citys[i])  
            -   a[a.length-1] = a[a.length-1] + "_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+10) + " "  
            |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=1)  
            tr  
                th hello  
                th world,citys.count=#{cscores.length + 3}  
                th count  
            for city,index in citys  
                tr  
                    td= index  
                    td welcome to #{city}(#{city.substr(0,4)})  
                    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 = [  
    '60',  
    '62',  
    '80',  
    '70'  
];  
  
/* 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;  

效果頁面