页面的渲染

1、模板页的应用

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

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

2、中间件的数据调用

对于需要在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}}

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>

{{@index}}
{{name}} -
{{city.cname}} -
{{#each hobby}}
{{.}}
{{/each}}
</li>
{{else}}
没有任何数据
{{/each}}
</ul>

猜你喜欢