express-art-template模板引擎(详细)
express-art-template模板引擎可以让art-template模板引擎更好的和Express框架配合,下⾯是对express-art-template模板引擎的整理,希望可以帮助到有需要的⼩伙伴~
⽂章⽬录
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()⽅法:
1. 设置模板存放⽬录
1. 第⼀个参数是设置存放模板⽬录的⽂件夹
2. 第⼆个参数是存放模板的绝对路径
2. 设置默认的模板后缀,设置模板时,如果没有写模板后缀就使⽤当前设置的模板后缀dede的模板引擎主要分为
1. 第⼀个参数是 默认模板的配置项
2. 第⼆个参数是后缀的名字
express的render()⽅法:渲染模板(在该⽅法的内部会⾃动拼接后缀、模板与数据的拼接、把结果相应给客户端)参数是模板名称。
对象,即 向模板中传递的数据
实例:
模板引擎:
// 创建服务器⽹站
const app =express();
// 1. 告诉express框架使⽤什么模板引擎渲染什么后缀的模板⽂件
// 2. 告诉express框架模板存放的位置是什么
// 第⼀个views是固定的,是express的配置项名字,告诉express框架模板存放的位置
// 第⼆个views是⽂件夹的名字
app.set('views',path.join(__dirname,'views'))
// 3. 告诉express框架模板的默认后缀是什么 ( ⽅便在渲染模板的时候,省去后缀 )
app.set('view engine','art');
// 创建⼀个路由
<('/index',(req,res)=>{
// 渲染模板(可以省掉art) -- der()
// 1.拼接模板路径
// 2.拼接模板后缀
// 3.哪⼀个模板和哪⼀个数据进⾏拼接
// 4.将拼接结果响应给客户端
// 模板要展⽰的数据
msg:'message'
})
})
<('/list',(req,res)=>{
msg:'list page'
})
})
// 监听端⼝
app.listen(3000);
views⽂件夹下的index.art⽂件
{{msg}}
views⽂件夹下的list.art⽂件:
{{msg}}
app.locals对象
locals()⽅法可以⼀次获取所有模板的公共数据,这些公共数据可以被⽤在所有模板中实例:
// 创建服务器⽹站
const app =express();
// 1. 告诉express框架使⽤什么模板引擎渲染什么后缀的模板⽂件
// 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
}]
// 创建⼀个路由
<('/index',(req,res)=>{
// 渲染模板(可以省掉art) -- der()
// 1.拼接模板路径
// 2.拼接模板后缀
// 3.哪⼀个模板和哪⼀个数据进⾏拼接
// 4.将拼接结果响应给客户端
// 模板要展⽰的数据
msg:'message'
})
})
<('/list',(req,res)=>{
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~
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论