页面的渲染

1、模板页的应用

在我们进行创建工程化文件的时候，默认的会有个layout的界面，默认的是会去当成模板页，基本上可以默认为所有的页面的模板页，而我们再需要更改单个页面的模板页时，可以通过路由配置进行更改

router.get('/',(req,res,next)=>{
    //默认值为layout，可以通过更换layout的值来切换模板页
    res.render("index",{layout:'layout2'});  
})

2、中间件的数据调用

对于需要在express项目中使用的数据如若需要在全局调用的时候，除了需要把取到的数据当做中间件进行注入以为，还需要注意的是：如果需要直接引用的话，记得用的数据名称与在各个界面的数据名称要相同，如果不相同是不能直接调用的，需要在路由端进行数据的重命名，否则就不能直接调用

 

//定义数据的JS文件 middleware文件夹的index.js
module.exports.Initdata=(req,res,next)=>{
    //数据的定义（可以接 字符串，json数组...）
    res.locals.title="测试";
    
    next();//此处是必不可少的
}

//数据注入点的app.js
//定义中间件数据 （因为调用的数据是在middleware文件下的index.js 所以会默认去找index.js） 注：中间件定义的位置一定要在路由注册的前面，不然就没有效果
const {Initdata}=require('./middleware');
//引用中间件
app.use(Initdata)

/* 
对于界面的直接调用，所有的界面数据都依此进行调用，定义的名称需要跟调用的位置相同
*/
{{title}}

/*
如果担心数据的冲突需要重新命名调用的时候，可以直接在界面对应的路由配置项中进行重命名配置
*/
router.get('/', function(req, res, next) {
    //对于数据的获取
    let titles=res.locals.title;
    res.render('index',{
        //重命名的值
        titles:titles
    });
});
//重命名之后的值调用
{{titles}}

 

3、模板引擎 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>