nodejs之模板引擎（渲染模板）

- 日理万妓 2022-12-15 06:10 375阅读 0赞

### 模板引擎 ###

*   *  模板引擎简介
     *  语法模板
     *  核心方法
     *   *  template（filename，data）
         *  template.compile（source，options）
         *  template.render（source，data，options）
     *  案例---渲染查询出来的成绩

## 模板引擎简介 ##

`art-template`是一个简单且超快速的模板引擎，可通过范围内预先声明的技术优化模板渲染速度，从而实现接近JavaScript极限的运行时性能。同时，它同时支持NodeJS和浏览器。  
**特征**

*  性能接近JavaScript渲染限制
 *  调试友好。语法错误或运行时错误将准确定位在模板的哪一行。支持在模板文件中设置断点
 *  支持Express，Koa，Webpack
 *  支持模板继承和子模板
 *  浏览器版本只有6KB

## 语法模板 ##

art-template同时支持两种模板语法。标准语法使模板更易于读写。

{
       {if user}} < h2 > {
       {user.name}} </ h2 > {
       {/ if}}

而原始语法具有强大的逻辑处理能力。

< ％ if（用户）{％> < h2 > < ％= user.name％> </ h2 > < ％ }％>

## 核心方法 ##

根据模板名称渲染模板：  
`template（filename，data）`  
filename值可以是：一个art文件的路径地址  
\_\_dirname+’\*\*\*.art’  
path.join(\_\_dirname,‘文件夹’,’\*\*\*.art’)  
将模板的源代码编译为函数:  
`template.compile（source，options）`

将模板的源代码编译为函数，并立即调用它:  
`template.render（source，data，options）`

不管哪种方法，首先要通过npm联网下载这个模板，安装语句是：`npm install art-template --save--dev`  
下载之后会自动安装一个文件夹，需要用的时候直接引入模板即可：  
![在这里插入图片描述][20201015173650950.png_pic_center]

### template（filename，data） ###

filename：是需要渲染的文件名  
data：是需要渲染的数据  
需要渲染的文件可以是==.tpl文件或.art==文件

const template = require('art-template');
    const http = require('http')
    var html = template(__dirname+'/mytpl.art',{
        user:{
            name:'pikaqiu'
        }
    })
    console.log(html);

.art文件内容：

{
       {if user}}
        <h2>{
       {user.name}}</h2>
    {
       {/if }}

输出结果是：  
![在这里插入图片描述][20201015180953521.png_pic_center]

### template.compile（source，options） ###

source：要加载的模板

此处，返回的render是一个函数。  
each是模板引擎提供的循环，循环一个list数组(集合)。  
![在这里插入图片描述][20201015201516586.png_pic_center]

### template.render（source，data，options） ###

source：要渲染的模板  
data：要显示的数据

//第一种模板
    let tpl = '<ul>{ {each list as value}}<li>{ {value}}</li>{ {/each}}</ul>';
    let ret = template.render(tpl,{ 
            list:['red','black','yellow']
        })
    console.log(ret);
    
    //第二种模板
    let tpl = '<ul>{ {each list}}<li>{ {$index}}-----{ {$value}}</li>{ {/each}}</ul>';
    let ret = template.render(tpl,{ 
        list:['apple','orange','banana']
    });
    console.log(ret);

这里的each是模板引擎提供的循环，循环一个list数组  
as value相当于起了一个别名，叫value，等于 $value

$index是索引

$value是值

![在这里插入图片描述][20201015202217411.png_pic_center]  
![在这里插入图片描述][20201015203119196.png_pic_center]

## 案例—渲染查询出来的成绩 ##

let html = template(__dirname +'/score.art',{ 
        chinese:120,
        math:130,
        english:140
    })
    console.log(html)

score.art文件存放模板

<!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>
        <ul>
            <li>语文：{
       {chinese}}</li>
            <li>数学：{
       {math}}</li>
            <li>英语：{
       {english}}</li>
    
        </ul>
    </body>
    </html>

结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]

[20201015173650950.png_pic_center]: /images/20221123/b92130a34de6452b92396b2e70bf1798.png
[20201015180953521.png_pic_center]: /images/20221123/90d794fa66b042dda1484d2b3c7be70a.png
[20201015201516586.png_pic_center]: /images/20221123/a2740762bddb4be3b25a85e0c81872c9.png
[20201015202217411.png_pic_center]: /images/20221123/b1ae020fe70e46ff9f5ce660192f9dfa.png
[20201015203119196.png_pic_center]: /images/20221123/f758a2d48e0b420597d16cc894994968.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/7d51389fec7f4c9284170b64cbe8cd93.png