node 第十六天 模板引擎handlebars

  1. handlebars handlebars文档

    Handlebars 是一种简单的 模板语言。
    它使用模板和输入对象来生成 HTML 或其他文本格式。Handlebars 模板看起来像常规的文本,但是它带有嵌入式的 Handlebars 表达式 。

  2. 这里我们要注意模板引擎的定义

    模板引擎是对一串字符串 结合数据 编译后生成 另外一串字符串 本质上和html没什么关系,只不过可以用来渲染html模板, 其编译语言也是多样的, javascript ruby

    所以我们会说vue并不是单纯的模板引擎, vue的模板编译语言只有javascript 读过源码的都是知道render函数
    因为vue是专注于某一种形式的模板的(例如dom对象), vue这样做的好处是能够对模板做更多的处理, 比如绑定事件, 专注于 javascript 表达式

  3. 前后端分离的模式下在浏览器中使用handlerbars, 本质是基于正则替换的, 因为浏览器端没有直接读写模板文件的能力, 这种用法知道就可以, 正常没人会这么做, 没有任何优势便捷性可言

  4. handlebars 等模板引擎一般用于传统的服务端开发
    web服务端通过收到用户请求–>查询数据库–>填充模板–>发送渲染好的模板(html)

  5. 下面是基于express node框架的一个例子

    根路由转发

    const express = require('express');
    var router = express.Router();
    
    const data = {
      data: [
        {
          name: 'zhang',
          age: 18,
          sex: 1,
          withme: {
            name: '0k'
          }
        },
        {
          name: 'li',
          age: 15,
          sex: 0,
          withme: {
            name: '0k'
          }
        },
        {
          name: 'wang',
          age: 8,
          sex: 1,
          withme: {
            name: '0k'
          }
        }
      ],
      name: 'yes'
    };
    router.get('/', function (req, res, next) {
      res.render('index', data);
    });
    
    module.exports = router;
    

    index.hbs

    <ul>
      {{#each data}}
        {{#each this}}
          <li>
            {{@key}}
            ---
            {{../../name}}
          </li>
        {{/each}}
        <li style='color: red'>
          {{#with withme}}
            {{name}}
          {{/with}}
          -----
          {{name}}</li>
        <li>
          name:
          {{this.name}}
        </li>
        <li>
          age:
          {{this.age}}</li>
        {{#if this.sex}}
          <li></li>
        {{/if}}
        {{#unless this.sex}}
          <li></li>
        {{/unless}}
          <li><br /></li>
      {{/each}}
    </ul>
    

    渲染结果:
    node 第十六天 模板引擎handlebars_第1张图片

  6. 本文最重要的是模板引擎的概念

你可能感兴趣的:(node.js,前端)