頁面的渲染

一、模板頁的應用

在咱們進行建立工程化文件的時候，默認的會有個layout的界面，默認的是會去當成模板頁，基本上能夠默認爲全部的頁面的模板頁，而咱們再須要更改單個頁面的模板頁時，能夠經過路由配置進行更改

1 router.get('/',(req,res,next)=>{
2     //默認值爲layout，能夠經過更換layout的值來切換模板頁
3     res.render("index",{layout:'layout2'});  
4 })

二、中間件的數據調用

對於須要在express項目中使用的數據如若須要在全局調用的時候，除了須要把取到的數據當作中間件進行注入覺得，還須要注意的是：若是須要直接引用的話，記得用的數據名稱與在各個界面的數據名稱要相同，若是不相同是不能直接調用的，須要在路由端進行數據的重命名，不然就不能直接調用

 

 1 //定義數據的JS文件 middleware文件夾的index.js
 2 module.exports.Initdata=(req,res,next)=>{
 3     //數據的定義（能夠接 字符串，json數組...）
 4     res.locals.title="測試";
 5     
 6     next();//此處是必不可少的
 7 }
 8 
 9 //數據注入點的app.js
10 //定義中間件數據 （由於調用的數據是在middleware文件下的index.js 因此會默認去找index.js） 注：中間件定義的位置必定要在路由註冊的前面，否則就沒有效果
11 const {Initdata}=require('./middleware');
12 //引用中間件
13 app.use(Initdata)
14 
15 /* 
16 對於界面的直接調用，全部的界面數據都依此進行調用，定義的名稱須要跟調用的位置相同
17 */
18 {{title}}
19 
20 /*
21 若是擔憂數據的衝突須要從新命名調用的時候，能夠直接在界面對應的路由配置項中進行重命名配置
22 */
23 router.get('/', function(req, res, next) {
24     //對於數據的獲取
25     let titles=res.locals.title;
26     res.render('index',{
27         //重命名的值
28         titles:titles
29     });
30 });
31 //重命名以後的值調用
32 {{titles}}

 

三、模板引擎 handlebars

從路由傳入到界面的參數須要進行展現時，須要用到一系列的模板引擎來進行處理，主要有

插值綁定：{{prop}}

註釋：{{! content}}

html內容：{{{htmlstr}}}

條件語句：{{#if condition}}....{{/if}}

**condition只能是布爾值或者能夠轉換爲布爾值的值，他不能是表達式

**能夠結合{{else if condition}}、{{else}}使用

{{#if bool}}
   我是正確的
{{else}}
    我是錯誤的
{{/if}}

循環語句：{{#each arr}}....{{#each}} }

** each可嵌套 ** 使用this或者.表示上下文，經常使用語數據是值的狀況

** 使用@index，@key ** 遍歷對象 @key

** 結合{{else}}，當數組爲空時顯示特別信息

let arr=[
     {
    name:"張三",
    city:{cname:"武漢"},
    hobby:["籃球"，"編程"]
    }， {
    name:"李四",
    city:{cname:"北京"},
    hobby:["棒球"，"編程"]
    }
]

<ul> <!--開始遍歷數組--> {{#each arr}} <li> <!--循環的標量(0,1,2)--> {{@index}} {{name}} - {{city.cname}} - {{#each hobby}} {{.}} {{/each}} </li> {{else}} 沒有任何數據 {{/each}}</ul>