nodejs03 middleware -3 ejs consolidate

https://www.npmjs.com/

Rendering page (template engine):

        前端： dom操作               虚拟dom操作 二次渲染，后期多次渲染， 优点：局部渲染
              jq/js/angualrJs       vue/react/.......   渲染页面(数据整合到静态页面)
        后端：
              抓取前端静态页面 + 渲染引擎 + 数据  返回data ->  send(data)
              渲染引擎: jade （所有语言）/ ejs（专门针对node） / ....

        arttemplate  underscore baiduTemplate mustach(前端) .......

        -------------------------------------------------------------
        jade|pug: 库
            侵入式，强依赖
            jade.renderFile('jade模板文件'，{数据}，{pretty:true}); 返回字符
            jade模板语法
                父子要缩进
                属性：  标签(key=value,key2=value)
                内容: 标签 内容
        -------------------------------------------------------------
        ejs：    模板渲染是异步的（所以有回调函数）
            非侵入式，温和，弱依赖

            安装+引入 ejs
            ejs.renderFile('ejs模板',{数据},回调(err,data))   
                data == str  
                ejs模板 : 后缀名为ejs的html文件

            ejs模板语法：
                ejs 结构就是html
                输出: <%= 数据名|属性名|变量名 + 表达式 %>
                语句： <% 语句 %>  需要被<%  %>  包裹
                非转义输出:  <%- 数据名|变量名  + 表达式 %>

                https://www.npmjs.com/package/ejs
-------------------------------------------------------------

example

 先安装 npm i ejs jade --save
 用render可以管理不同的模板引擎，

 let ejs=require('ejs')

 // ejs.renderFile('ejs模板',{数据},回调(err,data))
 ejs.renderFile('./views/index.ejs',{},(err,data)=>{
     console.log('err错误',err)//null
     console.log('data渲染后的数据(str)',data)//null
 })
 小黑板
 err错误 null
 data渲染后的数据(str) <!DOCTYPE html>
 <html lang="en">
 <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
         <title>Document</title>
         <style>
             body{background: red}
         </style>
     </head>
 <body>
     <div >box</div>
 </body>
 </html>
 2、
 let express = require('express');
 let ejs = require('ejs');
 
 let app = express();
 app.use(express.static('./public'))
 app.listen(3000);

 app.get('/',(req,res,next)=>{
   ejs.renderFile('./views/index.ejs',{},(err,data)=>{
     // console.log('err错误',err);//null
     // console.log('data渲染后的数据(str)',data);//null
     res.send(data)
   })    
 })
这时候浏览器就会出现引用的ejs模板

3、
let express = require('express');
let ejs = require('ejs');

let app = express();
app.use(express.static('./public'))
app.listen(3000);

app.get('/',(req,res,next)=>{
let result = {
 title:'标题',
 mess:'段落',
 href:'http://www.baidu.com',
 m:'more',
 goods:['xx1','xx2','xx3']
}
ejs.renderFile('./views/index.ejs',result,(err,data)=>{
 res.send(data)
})    
})
然后在ejs模板页面转义拼接
<body>
<h3><%= title %></h3>
<p><%= mess %></p>
<a href="<%= href %>"><%= m %></a>

<ul>
 <% for(var i=0;i<goods.length;i++){  %>
   <li><%= goods[i] %></li>
 <% }  %>
 
</ul>

</body>
  //最后在页面就会呈现拼接的结果

consolidate consolidate management of multiple template engine
installation: npm i consolidate -S
Note: ejs need to be installed, but without introducing

        app.set('view.engine','html');  模板最终    输出类型设置
        app.set('views','./views');     引擎模板目录设置

        app.engine('html',consolidate.ejs); 输出与引擎匹配
        app.engine('css',consolidate.jade); 输出与引擎匹配

        渲染API：
        res.render('模板文件名',{数据}) 整合页面和数据，完成渲染，发往浏览器

###例子

先安装consolidate
  npm i consolidate  --S
可以直接把上面的改为
let app = express();
app.use(express.static('./public'))
app.listen(3000);


app.engine('html', consolidate.ejs);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');

app.get('/',(req,res,next)=>{
  let result = {
    title:'标题',
    mess:'段落',
    href:'http://www.baidu.com',
    m:'more',
    goods:['xx1','xx2','xx3']
  }

  res.render('index.ejs',result)
  
})

```

nodejs03 middleware -3 ejs consolidate

https://www.npmjs.com/

Rendering page (template engine):

example

Guess you like