Express之模板渲染

express 内置的模板引擎

内置的模板引擎你不需要去注册一个模板引擎
ejs

<% js 逻辑代码 %>
    <% if(ture){ %>
        // 模板 一般模板就是html 标签
    <% } %>    
// 2模板渲染数据 <%= js渲染的数据%>
       
 <div><%= data.orderid%></div>    
                
              

使用art-template模板引擎

• 下载express-art-template art-template

• app.js中配置

  • 注册一个模板引擎
    • app.engine('.html',express-art-template);

  ​ 只要你的项目中用到模板，就必须要设置默认渲染引擎

  - 设置默认渲染引擎```app.set('view engine','.html');```
  

  • res.render(文件名,数据对象);
  • express这套使用，默认在当前app.js同级的views目录查找

模板语法：

(1).表达式
{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式

(2).输出表达式
2.1对内容编码输出：{{content}}
2.2不编码输出：{{#content}}

(3).变量

{{set temp = data.sub.content}}

(4).条件表达式
{{if admin}}
        <p>admin</p>
{{else if code > 0}}
       <p>master</p>
{{else}}
        <p>error!</p>
{{/if}}

(5).遍历表达式
无论数组或者对象都可以用 each 进行遍历。
{{each list as value index}}
    <li>{{index}} - {{value.user}}</li>
{{/each}}
亦可以被简写：
{{each list}}
     <li>{{$index}} - {{$value.user}}</li>
{{/each}}

(6).子模板（模板包含表达式）
a.用于嵌入子模板:
{{include './header.art'}} 

前端（前后端分离）模板引擎使用步骤

适应情况：前后端分离：服务端响应的内容为数据非模板

• 引入模板文件
• 创建模板
• 将数据跟模板进行绑定
• 在模板里面编写代码解析数据
• 绑定数据和模板之后得到内容
• 将数据内容写到页面上面。

全栈开发 使用arttemplate

• 后端步骤

// 1 ：下载安装  art-template express-art-template
var express = require('express');
var app = express();
// 2 注册一个模板
app.engine('art', require('express-art-template'));
// 3:设置模板的开发环境；区分是线上环境还是线下环境
app.set('view options', {
    debug: process.env.NODE_ENV !== 'production'
});

app.get('/', function (req, res) {
    res.render('index.html', {
        user: {
            name: 'aui',
            tags: ['art', 'template', 'nodejs']
        }
    });
});

• 前端部分：直接渲染数据。因为服务端响应的内容就是一个模板