nodejs學習（二） ---- express中使用模板引擎jade
阿新 • • 發佈：2018-07-12
ges 填充 spa 檢測 參數 include express round ida
系列教程，上一節教程 express+nodejs快速創建一個項目
在創建一個項目後，views目錄下的文件後綴為 .jade 。
打開 index.jade，具體內容如下圖（忽略 header.jade 和 footer.jade，下面教程會一步步創建）
頁面解析出的樣子如下圖。完全是html標簽
一、jade 模板引擎 介紹
模板引擎是一個庫，或者一個使用一定的規則或者語言來解釋數據並渲染視圖的框架。模板引擎處理過的最終結果是一個視圖頁面，也就是html頁面或者用戶圖形界面GUI。在MVC框架中，模板屬於view層。
jade是nodejs的模板引擎，采用空格縮進的規則。
jade省略了html中尖括號。采用了嚴格的縮進格式，劃分了層次結構，提高了可閱讀性。
註：如果環境已經正確安裝，那麽大多數情況下的錯誤都是縮進惹的禍，一定一定要保持一致的縮進格式，建議統一將 tab 鍵輸出為空格，並采用 4 個空格作為標準縮進。
二、在express中使用jade
在app.js中可以設置使用的模板，可以設置為 jsx/html
三、元素及屬性
1）標簽
在jade中創建列表，標簽無需閉合。
自閉和標簽jade會自動檢測，也可以手動添加閉合標簽。例：img(src="images/1.jpg") 等同於 img(src="images/1.jpg")/
元素包含的文本內容：跟在屬性的後面、或者等號後。
//標簽無需閉合
ul
li item1
li item2
li item3
//自閉和標簽img
div
img(src="images/1.jpg")/
div
img(src="images/1.jpg")
//元素包含的文本
div
a(href="https://www.baidu.com") baiduwenku
div=‘you are beautifull,i like‘
生成的 HTML：
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<div>
<img src="images/1.jpg">
</div>
<div>
<img src="images/1.jpg">
</div>
<div>
<a href="https://www.baidu.com">baiduwenku</a>
</div>
<div>you are beautifull,i like</div>
2)屬性
jade屬性統一放在括號內，用逗號或者空格隔開。
布爾屬性，若將值設為false，則不會加入該屬性。
屬性值可以用“{}”包裹，不僅可以寫
//普通屬性
input(type=‘checkbox‘, checked)
input(type=‘checkbox‘ name=‘agreement‘ checked )
//布爾屬性
button(disabled=true) click me
button(disabled=false) click me
解析為
<input type="checkbox" checked=""> <input type="checkbox" name="agreement" checked="">
<button disabled="">click me</button>
<button>click me</button>
3)文本
“|”作用域只有一行。“|” 告訴jade模板解析器，將後面的內容原樣輸出。所以，“|”後面可以包含元素。
div a(href="http://google.com") Google | If you think you can, you can.
p 文本如果太長，或者需要換行，需要在下一行加上 “|”,
|我是新的一行
解析為
<div> <a href="http://google.com">Google</a> If you think you can, you can. </div> <p>文本如果太長，或者需要換行，需要在下一行加上 “|”,我是新的一行</p>
“.”原樣輸出多行文本。一般填充<script>或<style>元素包含的內容
script(type="text/javascript").
window.onload = function(){
console.log(‘hello jade‘);
};
解析為
<script type="text/javascript"> window.onload = function(){ console.log(‘hello jade‘); }; </script>
“#[ ]”在一段純文本中插入jade語句
p My name is #[b doudou]
解析為
<p>My name is <b>doudou</b></p>
四、jade中使用Javascript代碼
嵌入的javascript代碼必須以“-”開頭。
-for(var i=0;i<3;i++) .divclass this is div element
解析為
<div>This is div element</div> <div>This is div element</div> <div>This is div element</div>
五、jade語法
jade自帶語法，語句前不需要“-”。
each...in --遍歷
while --遍歷
if --條件判斷
//each...in
-var ary= [‘one‘,‘Two‘,‘Three‘];
each item,index in ary
div= index + ": "+item
//while
-var n = 0;
while n<3
div= n++
//if
-var b0 = false,b1=true;
if b0
div b0 is true
else if b1
div b1 is true
else
div all are false
//case
-var gender=0;
case gender
when 0
div you are a girl
default
div you are a boy
解析為
<!--each...in--> <div>0: one</div> <div>1: Two</div> <div>2: Three</div>
<!--while--> <div>0</div> <div>1</div> <div>2</div>
<!--if--> <div>b1 is true</div>
<!--case--> <div>you are a girl</div>
六、復用塊
jade復用塊用關鍵字 “mixin” 定義，“+” 調用。
復用塊 隱含參數 "block" 的使用
"block" 隱含參數 “attributes”。這裏用的是 “!=”，而不是 “=”。如果用“=”，表示後面的內容會被轉碼；“!=”表示不會被轉碼
//復用塊 可接收參數
mixin showName(name)
div= name
+showName(‘test‘)
+showName(‘huang dou dou‘)
//隱含參數 block(通用塊) 參數
mixin showNameBlock(name)
div= name
if block
block
+showNameBlock(‘HCH‘)
div Welcome to here
//隱含參數 attributes
mixin showNameAttr(name)
div(title!=attributes.title)= name
+showNameAttr(‘HCH‘)(title=‘this is your name‘)
解析為
<!--復用塊 可接收參數--> <div>test</div> <div>huang dou dou</div> <!--隱含參數 block(通用塊) 參數--> <div>HCH</div> <div>Welcome to here</div> <!--隱含參數 attributes--> <div title="this is your name">HCH</div>
七、填充數據
“=” 、“!=” 、“#{}”、“!{}” 。
“=”、“#{}” 會對數據進行轉碼。 “!=” 、“!{}” 不會轉碼
//數據填充 - var str = ‘my name is <b>CYF</b>‘; div= str div #{str} //數據填充 - var str = ‘my name is <b>CYF</b>‘; div!= str div !{str}
解析為
<!--數據填充--> <div>my name is <b>CYF</b></div> <div>my name is <b>CYF</b></div> <!--數據填充--> <div>my name is <b>CYF</b></div> <div>my name is <b>CYF</b></div>
八、模板包含、模板引用
使用 include 在模板中包含其他模板的內容。就像PHP
使用extends 引用外部的jade模塊
head.jade
head
title 我的網站
layout.jade
doctype html
html
include head
meta(charset="UTF-8")
meta(name="viewport",content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
link(rel=‘stylesheet‘, href=‘/stylesheets/style.css‘)
body
block content
index.jade
extends layout
block content
p welcome to my express
解析為
<html><head><title>我的網站</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="stylesheet" href="/stylesheets/style.css"></head><body><p>welcome to my express</p><!--form(id=‘formId‘)--><!-- .line-wrap--><!-- label 公積金賬戶余額:--><!-- .opt-ele--><!-- input(type=‘number‘,name=‘account‘,id=‘account‘)--><!-- .line-wrap--><!-- label 月繳費金額:--><!-- .opt-ele--><!-- input(type=‘number‘,name=‘month‘,id=‘month‘)--><!-- .line-wrap--><!-- label 當前年齡:--><!-- .opt-ele--><!-- input(type=‘number‘,name=‘age‘,id=‘age‘)--><!-- .line-wrap--><!-- label 貸款期限:--><!-- .opt-ele--><!-- select(name="termLimit",id="termLimit",required="true")--><!-- option(value=‘‘) -- 請選擇 ----><!-- option(value=‘0‘) 10--><!-- option(value=‘1‘) 15--><!-- option(value=‘2‘) 20--><!-- option(value=‘3‘) 25--><!-- option(value=‘4‘) 30--><!-- .line-wrap--><!-- label 還款方式:--><!-- .opt-ele--><!-- select(name="type",id="type",required="true")--><!-- option(value=‘‘) -- 請選擇 ----><!-- option(value=‘0‘) 每月等額還款--><!-- option(value=‘1‘) 逐月遞減還款--><!----><!----><!--button.submit(id=‘submit‘) 提交--><!--.dialog-wrap--><!-- .dialog--><!-- .max-money 最高可貸--><!-- span 30000--><!-- font 元--><!-- .month-money 每月應還--><!-- span 1000--><!-- font 元--><!--.loader--><!-- .loader-inner--><!-- .loader-line-wrap--><!-- .loader-line--><!-- .loader-line-wrap--><!-- .loader-line--><!-- .loader-line-wrap--><!-- .loader-line--><!-- .loader-line-wrap--><!-- .loader-line--><!-- .loader-line-wrap--><!-- .loader-line--><!-- .loading-txt loading--><!----><!----><!----><!--script(src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js",type="text/javascript")--><!--script(src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js",type="text/javascript")--><!--script(src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js",type="text/javascript")--><!--script(type=‘text/javascript‘).--><!-- $("#formId").validate({--><!-- rules: {--><!-- account: {--><!-- required: true--><!-- },--><!-- month: {--><!-- required: true--><!-- },--><!-- age: {--><!-- required: true--><!-- },--><!-- termLimit: {--><!-- required: true--><!-- },--><!-- type: {--><!-- required: true--><!-- }--><!-- },--><!-- messages: {--><!-- account: {--><!-- required: ‘請填寫公積金賬戶余額‘,--><!-- },--><!-- month: {--><!-- required: ‘請填寫月繳費金額‘,--><!-- },--><!-- age: {--><!-- required: ‘請填寫貸款期限‘,--><!-- },--><!-- termLimit: {--><!-- required: ‘請選擇貸款期限‘,--><!-- },--><!-- type: {--><!-- required: ‘請選擇還款方式‘--><!-- }--><!-- }--><!-- })--><!-- $(‘#submit‘).click(function () {--><!-- //loading...顯示--><!-- $(‘.loader‘).css(‘display‘,‘block‘)--><!-- var accountTemp = $(‘#account‘).val();--><!-- console.log("accountTemp==" + accountTemp);--><!-- var monthTemp = $(‘#month‘).val();--><!-- var ageTemp = $(‘#age‘).val();--><!-- var termLimitTemp = $(‘#termLimit‘).val();--><!-- var typeTemp = $(‘#type‘).val();--><!-- var dataStr = {account: accountTemp, month: monthTemp, age: ageTemp, termLimit: termLimitTemp, type: typeTemp}--><!-- console.log("dataStr==",dataStr)--><!-- $.ajax({--><!-- url:‘foot‘,--><!-- type:‘post‘,--><!-- data:dataStr,--><!-- success:function (res) {--><!-- console.log(res)--><!-- if(res.code==0){--><!-- //計算公式--><!-- }--><!-- $(‘.loader‘).css(‘display‘,‘none‘)--><!-- },--><!-- fail:function (err) {--><!----><!-- }--><!----><!-- })--><!-- })--></body></html
nodejs學習（二） ---- express中使用模板引擎jade