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;  

效果页面