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.结合网络传输，给浏览器发送真实的网页内容

 

posted on 2020-07-15 10:39  章画  阅读(188)  评论(0)    收藏  举报

导航