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;
效果页面