网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事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.disc | price 2}} |
### 第六步:使用过滤器
使用过滤器 `{{参数 | 函数名}}`
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行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**