在express中要向静态网页渲染动态的数据就需要使用模板引擎，一般的模板引擎没有art-template快速所以选择它
image.png

安装

NPM安装

  • npm install —save art-template
  • npm install —save express-art-template

浏览器安装

  1. <script src="lib/template-web.js"></script>
  2. <script id="tpl-user" type="text/html">
  3. {{if user}}
  4.   <h2>{{user.name}}</h2>
  5. {{/if}}
  6. </script>

配置

  1. const express = require('express');
  2. const app = express();
  4. // view engine setup
  5. app.engine('html', require('express-art-template'));
  6. //app.engine('art', require('express-art-template'));
  7. app.set('view', {
  8.     debug: process.env.NODE_ENV !== 'production'
  9. });
  10. app.set('views', path.join(__dirname, 'views'));
  11. app.set('view engine', 'art');
  13. // routes
  14. app.get('/', function (req, res) {
  15.     res.render('index.art', {
  16.         user: {
  17.             name: 'aui',
  18.             tags: ['art', 'template', 'nodejs']
  19.         }
  20.     });
  21. });

使用

mustache语法用法

  1. <!DOCTYPE html>
  2. <!-- Created By HelloChen 2020.09.08-21:00:45 -->
  3. <html lang="zh-CN">
  5. <head>
  6.   <meta charset="UTF-8">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style></style>
  10. </head>
  12. <body>
  13.   <h1>{{data.name}}</h1>
  14.   <script></script>
  15. </body>
  17. </html>

原生用法（兼容其他模板引擎）

  1. <%= value %>
  2. <%= data.key %>
  3. <%= data['key'] %>
  4. <%= a ? b : c %>
  5. <%= a || b %>
  6. <%= a + b %>

语法

原文输出

  1. {{@ value }}

条件

  1. {{if value}} ... {{/if}}
  2. {{if v1}} ... {{else if v2}} ... {{/if}}

循环

  1. {{each target}}
  2.     {{$index}} {{$value}}
  3. {{/each}}

变量

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

模板继承

  1. {{extend './layout.art'}}
  2. {{block 'head'}} ... {{/block}}

子模板

  1. {{include './header.art'}}
  2. {{include './header.art' data}}

过滤器

  1. template.defaults.imports.dateFormat = function(date, format){/*[code..]*/};
  2. template.defaults.imports.timestamp = function(value){return value * 1000};
  1. {{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}