13.node中的模板引擎

最新推荐文章于 2024-07-12 11:30:00 发布

-kric-

最新推荐文章于 2024-07-12 11:30:00 发布

阅读量117

点赞数

分类专栏： node.js

本文链接：https://blog.csdn.net/ly_jewel/article/details/100898023

版权

node.js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

模板引擎最早诞生于服务器领域，后来才发展到了前端。

在node中使用art-template

1.安装 npm install art-template

2.在需要使用的文件模块中加载 art-template

使用require加载，参数中的 art-template 就是下载的包的名字。即 install 的名字是什么，则 require 中就是什么

3.查文档，使用模板引擎API ---下载模板的那个地址

 var template = require('art-template')
 template('script 标签 id',{对象})  //对象 对 标签中读到的字符串作解析替换
 template.render('hello {{ name }}', {
          name: 'Jack'
 })  // 对象中的 name 被替换到 标签中的 name
 console.log(ret)

（01）

  var template = require('art-template')
  var tpl = `
<html>
<body>
           大家好，我叫： {{ name}}
        我今年 {{ age }} 岁了
        我来自 {{ province }}
        我喜欢：{{ each hobbies }} {{ $value }} {{/each}}
       </body>
</html>
`
 var ret = template.render( tpl , {
   name : 'jack' ,
              age : 18 ,
              province : '北京市' ,
              hobbies:[
                  '写代码' ,
                  '打游戏' ,
                  '唱歌跳舞' 
              ]
})
 console.log(ret)

（02）
新建一个HTML文件，将（01）中反引号内的内容粘贴过去
js 文件中：

 var template = require('art-template')
 fs.readFile('./tpl.html' , function(err,data){
     if(err){
        return console.log('读取文件失败')
      }
  // 默认读取到的 data 数据是二进制数据。而模板引擎的render方法需要接收的是字符串。
 var ret = template.render( data.toString(), {
             name : 'jack' ,
              age : 18 ,
              province : '北京市' ,
              hobbies:[
                  '写代码' ,
                  '打游戏' ,
                  '唱歌跳舞' 
              ]
})
 console.log(ret)
})

（02.1）HTML 文件内容修改<!DOCTYPE html>

<html>
<head>
   <meta charset="UTF-8">
   <title>{{ title }} </title>
 <body>
           大家好，我叫： {{ name}}
        我今年 {{ age }} 岁了
        我来自 {{ province }}
        我喜欢：{{ each hobbies }} {{ $value }} {{/each}}
        <script>
           var foo = ' {{ title }} '  // 模板引擎不关心内容，只看自己认识的标记符符号。所以此处 title 也会被替换。
        </script>
   </body>
</html>

与浏览器中的模板引擎不同的是：

浏览器中的模板引擎：浏览器把模板字符串存储到<script>标签中

node中的模板引擎：node把模板字符串存储到文件中。因为node中没有<script>标签