4.8-模板引擎-蒲公英云

4.8-模板引擎

模板引擎

作用：字符串拼接

// art-template基本使用 字符串拼接
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '1.art');
// template() 第一个参数是模板的 路径 ， 第二个参数 替换模板的值
const htmlStr = template(views, { 
    sname: 'zhangsan',
    content: '<span>123</span>'
});
console.log(htmlStr);

模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>{
   { sname }}</div>  
    <div>
        <!-- 第二种表示方法 -->
        <%= sname %>
    </div>
    <p>{
   { 2+4}}</p>
    <p>{
   {10>5?10:5}}</p>
    <p>{
   {content}}</p> 
    <p>{
   {@ content}}</p>  <!-- 支持标签 -->
</body>
</html>

模板引擎支持if判断和循环

// 支持if判断 循环
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '2.art');
const htmlStr = template(views, { 
    age: 10,
    students: [{ 
            name: 'lily',
            age: 18,
            sex: '女'
        },
        { 
            name: 'lucy',
            age: 19,
            sex: '女'
        },
        { 
            name: 'jack',
            age: 20,
            sex: '男'
        }
    ]
});
console.log(htmlStr);

模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {
   {if age >= 16}}
    可以考取大学
    {
   {else}}
    回高中读书
    {
   {/if}}
    <ul>
      {
   {each students}}
          <li>
              {
   {$value.name}}
              {
   {$value.age}}
              {
   {$value.sex}}
          </li>  
      {
   {/each}}
    </ul>
    <!-- 第二种方法 -->
    <ul>
      <% for(var i=0; i<students.length; i++) { %>
          <li>
              <%= students[i].name %>
              {
   { students[i].name }}
              <%= students[i].age %>
              <%= students[i].sex %>
          </li>  
      <% } %>
    </ul>
</body>
</html>