express-art-template模板引擎（详细）

express-art-template模板引擎可以让art-template模板引擎更好的和Express框架配合，下面是对express-art-template模板引擎的整理，希望可以帮助到有需要的小伙伴~

文章目录

express-art-template模板引擎
- 模板引擎
- app.locals对象

express-art-template模板引擎

模板引擎

为了使art-template模板引擎能够更好的和Express框架配合，模板引擎官方在原art-template模板引擎的基础上封装了express-art-template.
使用npm install art-template express-art-template命令进行安装。
在一个项目中可以使用多个模板引擎

express的engine()方法：当渲染后缀为art的模板时使用express-art-template

第一个参数是模板的后缀
第二个参数是使用的什么模板

express的set()方法：

设置模板存放目录
- 第一个参数是设置存放模板目录的文件夹
- 第二个参数是存放模板的绝对路径
设置默认的模板后缀，设置模板时，如果没有写模板后缀就使用当前设置的模板后缀
- 第一个参数是默认模板的配置项
- 第二个参数是后缀的名字

express的render()方法：渲染模板（在该方法的内部会自动拼接后缀、模板与数据的拼接、把结果相应给客户端）

参数是模板名称。
对象，即向模板中传递的数据

实例：

模板引擎：

// 引入express框架
const express = require('express');
// 引入路径模块
const path = require('path');
// 创建服务器网站
const app = express();// 1. 告诉express框架使用什么模板引擎渲染什么后缀的模板文件
app.engine('art',require('express-art-template'))
// 2. 告诉express框架模板存放的位置是什么
// 第一个views是固定的,是express的配置项名字，告诉express框架模板存放的位置
// 第二个views是文件夹的名字
app.set('views',path.join(__dirname,'views'))
// 3. 告诉express框架模板的默认后缀是什么 ( 方便在渲染模板的时候，省去后缀 )
app.set('view engine','art');
// 创建一个路由
app.get('/index',(req,res) => {// 渲染模板 （可以省掉art） -- res.render()// 1.拼接模板路径// 2.拼接模板后缀// 3.哪一个模板和哪一个数据进行拼接// 4.将拼接结果响应给客户端res.render('index',{//    模板要展示的数据msg: 'message'})
})app.get('/list',(req,res) => {res.render('list',{msg: 'list page'})
})// 监听端口
app.listen(3000);

views文件夹下的index.art文件

{{msg}}

views文件夹下的list.art文件：

{{msg}}

app.locals对象

locals()方法可以一次获取所有模板的公共数据，这些公共数据可以被用在所有模板中

实例：

// 引入express框架
const express = require('express');
// 引入路径模块
const path = require('path');
// 创建服务器网站
const app = express();// 1. 告诉express框架使用什么模板引擎渲染什么后缀的模板文件
app.engine('art',require('express-art-template'))
// 2. 告诉express框架模板存放的位置是什么
// 第一个views是固定的,是express的配置项名字，告诉express框架模板存放的位置
// 第二个views是文件夹的名字
app.set('views',path.join(__dirname,'views'))
// 3. 告诉express框架模板的默认后缀是什么 ( 方便在渲染模板的时候，省去后缀 )
app.set('view engine','art');// 相同的数据
app.locals.users = [{name:'zhansan',age:18
},{name:'lisi',age:20
}]// 创建一个路由
app.get('/index',(req,res) => {// 渲染模板 （可以省掉art） -- res.render()// 1.拼接模板路径// 2.拼接模板后缀// 3.哪一个模板和哪一个数据进行拼接// 4.将拼接结果响应给客户端res.render('index',{//    模板要展示的数据msg: 'message'})
})app.get('/list',(req,res) => {res.render('list',{msg: 'list page'})
})// 监听端口
app.listen(3000);

index.art文件：

{{msg}}<ul>{{each users}}<li>{{$value.name}}{{$value.age}}</li>{{/each}}
</ul>

list.art文件：

{{msg}}<ul>{{each users}}<li>{{$value.name}}{{$value.age}}</li>{{/each}}
</ul>

end~

express-art-template模板引擎（详细）相关推荐

Spring Boot 使用 Kotlin Script Template 模板引擎kts 开发web应用
Spring Boot 使用 Kotlin Script Template 模板引擎kts 开发web应用在 Spring Framework 5.0 M4 中引入了一个专门的Kotlin支持. K ...
template模板引擎的使用例子
背景:使用模板引擎可以避免复杂的数据操作,例如数据很多时,把数据渲染到表单中是特别麻烦的事情.如果使用模板引擎可以很方便的帮助我们完成这些繁琐的操作. 模板引擎有很多种,但是每种模板引擎的使用方式都是 ...
JavaScript中template模板引擎
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引擎, ...
art template 模板渲染数据
客户端 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
express中ejs模板引擎的使用，consolidate模块的使用
在express动态页面的渲染,用的比较多的模板引擎就是 ejs 还有一种是jade 个人觉得吧 jade是靠缩进来实现代码结构的话像我这种比较喜欢看 htm标签的人来说太难受了如果是使用ex ...
Node 简介、模块、模板引擎、NPM、文件操作、缓冲区、文件流、网络操作、Express框架
一.Node简介 1.1 客户端的JavaScript是怎样的问题答什么是 JavaScript 脚本语言运行在浏览器中一般用来做客户端页面的交互(Interactive) JavaScri ...
Express入门模板引擎hbs 服务端渲染
Express支持多种模板引擎,这里将采用Handlebars模板引擎的服务器端版本hbs模板引擎 . 安装hbs npm install hbs --save-dev 安装hbs模板引擎后改写app ...
express html页面,Express使用html模板
express默认使用jade模板,可以配置让其支持使用ejs或html模板. 1. 安装ejs 在项目根目录安装ejs. npm install ejs 2.引入ejs var ejs = requ ...
if laytpl 非_laytpl : 一款非常轻量的JavaScript模板引擎
//假设你得到了这么一段数据 var data = { title: '前端圈', intro: '一群码js的骚年,幻想改变世界,却被世界改变.', list: [{name: '贤心', city ...
html中模板引擎—前端与后端
模板引擎模板引擎起到数据和视图分离的作用, 模板对应视图, 关注如何展示数据, 在模板外头准备的数据, 关注那些数据可以被展示. 后端模板引擎 freemarker 如下介绍, java后台的 ...