2024年最新nodejs模板引擎使用(详细)(4)，面试鸿蒙汽车诊断仪

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

{name:"红楼梦",price:60,disc:49}

]
};

//res.render，渲染一个页面（必须设置了模板引擎之后才能使用render）
// 第一个参数是要使用的模板(在views中)，会读取 ./views/index.html 文件的内容
// 第二个参数是模板要用的数据(数据不能是数组，只能是对象)。
// 设置了数据之后，可以在index.html中直接使用title 和 books属性，例如：{{title}} 会输出 “今日打折书籍”
// 页面渲染完成之后会得到一个完整的html页面，这个页面会自动返回给客户端。
app.get(‘/’,function(req,res){
res.render(‘index.html’,data);
});

### 第五步：编写模板文件

td {
border: 1px solid black;
text-align: center;
}

del {
color: red;
}

.disc {
color: green;
}

{{title}}

{{include ‘./header.html’}}

{{each books}} {{/each}}

序号	书名	原价	现价
{{$index + 1}}	{{$value.name | bookname}}	￥{{$value.price | price 2}}	￥{{$value.disc | price 2}}

{{include './footer.html'}}

### 第六步：使用过滤器


使用过滤器 `{{参数 |　函数名}}`

var artTemplate = require(‘express-art-template’);
artTemplate.template.defaults.imports.price = function(value,num){
return value.toFixed(num);
}
artTemplate.template.defaults.imports.bookname = function(value){
return ‘《’+ value +‘》’;
}

或者
var template = require(‘art-template’);
template.defaults.imports.price = function(value,num){
return value.toFixed(num);
}
template.defaults.imports.bookname = function(value){
return ‘《’+ value +‘》’;
}

## 客户端渲染


在浏览器中使用 art-template


### 第一步：导入art-template

### 第二步：在body中添加渲染数据的标签

### 第三步：渲染数据

var data = {
title:“今日打折书籍”,
books:[
{name:“三国演义”,price:50,disc:39},
{name:“水浒传”,price:40,disc:28},
{name:“西游记”,price:50,disc:39},
{name:“红楼梦”,price:60,disc:49}
]
};

// template渲染数据和模板，把模板和数据进行结合得到html字符串
// 第一个参数是要使用的模板id
// 第二个参数是模板要用的数据(数据不能是数组，只能是对象)。
// 设置了数据之后，可以在模板中直接使用 title 和 books属性，例如：{{title}} 会输出 “今日打折书籍”
// 数据渲染完成之后会得到一个完整的html字符串，使用innerHTML把html字符串渲染到页面上
var htmlStr = template(‘booksTmp’,data);
books.innerHTML = htmlStr;//把渲染的数据渲染到页面上

### 第四步：编写模板


编写的模板是用来展示模板的数据: script标签的type属性设置为 type=“text/html” 浏览器不会读取script中的html代码

### 第五步：使用过滤器


使用过滤器`{{参数 | 函数名}}`

template.defaults.imports.price = function(value,num){
return value.toFixed(num);
}
template.defaults.imports.bookname = function(value){
return ‘《’+ value +‘》’;
}

## 模板语法


1. 在模板中可以使用以下内容

{{模板逻辑表达式}} artTemplate 语法结构大括号内书写逻辑表达式
{{变量名}} 表示输出表达式，输出变量的内容

2. 数组或者对象的遍历结构，以数组为例：

{{each 数组}}
$index 是数组的索引； $value是数组的元素值
{{/each}}

// 遍历时自定义 $index 和 $value
{{each 数组 元素值 索引值}}

{{/each}}

![img](https://img-blog.csdnimg.cn/img_convert/7aa5c4196643d2ac53c5c77d2eec2c69.png)
![img](https://img-blog.csdnimg.cn/img_convert/44250c9e72bee5ca4858ef386a68e3b1.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

mg-Ek93M0rN-1715708526452)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**