zoukankan      html  css  js  c++  java
  • 5 art-template

    npm 在终端命令下执行装包,就会在该目录下产生一个node_modules包

    art-template地址:https://aui.github.io/art-template/zh-cn/docs/

    安装  npm install art-template --save

     1.单纯的在node环境某个js文件中引入'art-template文件

    调用 template.render(source, data, options)方法 source string类型

    const template = require('art-template')
    
    // template.render(source, data, options);
    let 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>
      <p>{{msg}}</p>
      <div>{{each list}} {{$index}}---{{$value}} {{/each}}</div>
      <div>{{each user}} {{$index}}---{{$value}} {{/each}}</div>
        <ul>
            {{each list}} <li>{{$value}}</li> {{/each}}
        </ul>
    </body>
    </html>
    `
    const data = {
      msg: 'aaa',
      list: [10, 20, 30],
      user: {
        name: 'zs',
        age: 10,
        gender: 'male'
      }
    
    }
    let res = template.render(htmlStr, data)
    console.log(res);

    以下是输出内容

    <!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>
      <p>aaa</p>
      <div> 0---10  1---20  2---30 </div>
      <div> name---zs  age---10  gender---male </div>
        <ul>
             <li>10</li>  <li>20</li>  <li>30</li>
        </ul>
    </body>
    </html>

    可以看出输出的渲染数据后的html字符串,如果后台将这个html字符串作为响应内容response发给前端,前端浏览器拿到后会自动解析出里面的html标签,就是常见的惠网页内容。这个就是后端渲染的最简单的原理。

     2.把网页内容放在html文件中,在总模块中引入fs模块,读取html文件。抽离出HTML文件

     3.结合网络传输,给浏览器发送真实的网页内容

  • 相关阅读:
    正则表达式
    CSS常用格式
    数据库原理第十章考试形式
    汇编语言(王爽第三版) 实验5编写、调试具体多个段的程序
    7-10 多项式A除以B (25分)(多项式除法)
    C. Air Conditioner(区间交集)
    X的因子链(分解质因数,)
    AtCoder Beginner Contest 155 E.Payment
    cf584DDima and Lisa(素数性质,三素数,哥德巴赫猜想)
    CF1207C Gas Pipeline(DP)
  • 原文地址:https://www.cnblogs.com/xiaoliziaaa/p/13304160.html
Copyright © 2011-2022 走看看