页面的渲染

一、模板页的应用

在咱们进行建立工程化文件的时候，默认的会有个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>