express-art-template模版引擎

模版引擎

  • 为了使art-template模版引擎能够更好的和Express框架配合,模版引擎官方在原art-template模版引擎的基础上封装了express-art-template。

安装模块:

//当渲染后缀为art的模版时 使用express-art-template
app.engine('art',require('express-art-template'))
//设置模版存放目录
app.set('views',path.join(__dirname,'view'));
//渲染模版时不写后缀 默认拼接art后缀
app.set('view engine','art');
app.get('/',(req,res)=>{
	//渲染模版
	res.render('index');
})

在这里插入图片描述

const express = require('express');
const path = require('path');
const app = express();
// 1.告诉express框架使用什么模版引擎渲染什么后缀的模版文件
    // 1.模版后缀
    // 2.使用的模版引擎
app.engine('art',require('express-art-template'))
// 2.告诉express框架模版存放的位置是什么
app.set('views', path.join(__dirname,'views'))
// 3.告诉express框架模版的默认后缀是什么
app.set('view engine', 'art');
// app.get('/index', (req, res) =>{
//     res.render('index', {
//         // 拼接了模版路径
//         // 拼接了模版后缀
//         // 哪一个模版和哪一个数据进行拼接
//         // 将拼接结果响应了客户端
//         msg: 'message'
//     })
// })
app.get('/index',(req,res) =>{
    res.render('list',{
        msg:'message'
    })
})
app.get('/list',(req,res) =>{
    res.render('list',{
        msg:'list page'
    })
})
// 端口监听
app.listen(3000);
console.log('网站服务器启动成功');

在这里插入图片描述

app.locals对象

将变量设置到app.locals对象下面,这个数据在所有模版中都可以获取到
示例代码:

app.locals.users = [{
	name:'张三',
	age:20
},{
	name:'李四',
	age:20
}]
const express = require('express');
const path = require('path');
const app = express();
// 1.告诉express框架使用什么模版引擎渲染什么后缀的模版文件
    // 1.模版后缀
    // 2.使用的模版引擎
app.engine('art',require('express-art-template'))
// 2.告诉express框架模版存放的位置是什么
app.set('views', path.join(__dirname,'views'))
// 3.告诉express框架模版的默认后缀是什么
app.set('view engine', 'art');
app.locals.users = [{
    name:'zhangsan',
    age:20
},{
    name:'lisi',
    age:30
}]
app.get('/index',(req,res) =>{
    res.render('index',{
        msg:'首页'
    })
})
app.get('/list',(req,res) =>{
    res.render('list',{
        msg:'列表页'
    })
})
// 端口监听
app.listen(3000);
console.log('网站服务器启动成功');

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>

在这里插入图片描述
在这里插入图片描述
app.locals对象下面的属性,在所有模版中都是可以得到的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值