Node中的art-template模板引擎

art-template是模板引擎，是一个专门用来帮助渲染页面的第三方。
=> 前端可以使用
=> 后端可以单独使用
=> 后端可以 express 框架结合使用

前端使用模板引擎

1. 下载
   装好node以后，在终端输入就可以直接下载使用。

 npm i art-template

2. 引入 template-web.js 文件
   文件引入以后会向外暴露一个 template 方法

<script src="../node_modules/art-template/lib/template-web.js"></script>

3. 准备一个 script 标签, 书写模板
   因为 script 标签里面书写的内容不会显示在页面上，script 因为有一个属性叫做 type=“text/javascript”，所有只要我们把 type 属性随便换成别的内容, 就不会当作 js 代码执行， 推荐写成 text/html 或者 text/template, 因为会有代码高亮，给这个模板 script 标签书写一个 id 属性 ，通过id 为了捕获元素

<script type="text/html" id="tmp">

</script>

4. template 方法 ----使用模板渲染页面
   语法: template(模板id, {})
   模板 id , 就是你模板标签的 id 属性(必须式 id)
   {}: 在模板里面使用的数据, 没有传递一个空对象

模板语法

1. 输出内容
   原生 js 输出
   <%= 变量 %> 不认识 html 格式
   <%- 变量 %> 认识 html 格式
   模板语法输出
   {{ 变量 }} 不认识 html 格式
   {{@ 变量 }} 认识 html 格式

    const div = document.querySelector('div')
    // 相当于在 模板标签里面拥有了一个叫做 title 的变量, 值式 '你好 世界'
    div.innerHTML = template('tmp', {
      title: '你好 世界',
      str: '<span>我是一段超文本</span>',
      boo1: true,
      boo2: false,
      hobby: ['吃饭', '睡觉', '打游戏']
    })
  
<script type="text/html" id="tmp">
    <h1><%= title %></h1>
    <%= str %>
    <br>
    <%- str %>
    <br>
    {{ str }}
    <br>
    {{@ str }}
</script>

2. 条件判断
   原生 js 输出
   <% if () { %>
   根据 if 条件决定 这个位置的内容是不是渲染
   <% } else { %>
   根据 if 条件决定 这个位置的内容是不是渲染
   <% } %>
   模板语法输出
   {{ if 条件 }}
   {{ /if }}

<script type="text/html" id="tmp">
    <% if (boo1) { %>
    <div>我是不是显示呢 ? </div>
    <% } %>

    <% if (boo2) { %>
    <div>我为什么不显示呢 ? </div>
    <% } %>

    {{ if boo1 }}
    <div>我是模板语法显示 </div>
    {{ /if }}

    {{ if boo2 }}
    <div>我是模板语法不显示</div>
    {{ /if }}

  </script>

3. 循环渲染
   => 原生 js 输出
   <% for () { %>
   这个位置的结构会根据 for 循环渲染多少次
   <% } %>
   => 模板语法输出
   {{ each 数组 }}
   {{ /each }}

<!-- 循环渲染 -->
  <script type="text/html" id="tmp">
	    <% for (let i = 0; i < hobby.length; i++) { %>
		    <li><%= hobby[i] %></li>
	    <% } %>
    	<br>
    {{ each hobby }}
    <li class="{{ $index === 0 ? 'active' : '' }}">{{ $value }} ----- {{ $index }}</li>
    {{ /each }}
  </script>

node后端使用 art-template

art-template是一个专门用来帮助渲染页面的第三方

 render()
      => 语法: template.render(字符串, {})
        -> 字符串: 只要有模板语法就可以
        -> {}: 在模板语法里面使用的内容
      => 返回值: 一段组装好的字符串 

const template = require('art-template')
const html = template.render('<h1>{{ title }}</h1>', { title: 'hello world' })
console.log(html)