程序地带

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对象下面的属性,在所有模版中都是可以得到的


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/binbinhxx/article/details/112689445

随机推荐

刷题第2天(LeetCode #9.回文数)

思路分析:此题可将整数转化为字符串,通过循环依次将对称位置的两个数字进行比较,若所有对称位置的数字均相同,则可判断其为回文数。但考虑到进阶&#x...

longstreet_ 阅读(603)

double转BigDecimal精度丢失

很多人在double或float转BigDecimal时习惯使用BigDecimal的构造方法newBigDecimal(33.33),此种写法会存在精度丢失问题,下面就具...

诗语待马 阅读(129)

毕业设计-医院分诊

毕业设计-医院分诊

毕业设计-医院分诊分诊管理主要实现患者信息录入,分诊,排队等功能。该Java毕业设计使用了当前较为流行的springMVC、hibernate、spring技术开发。本系统...

zn961018 阅读(422)

浅谈Vue种的$nextTick机制

浅谈Vue种的$nextTick机制nextTick出现的前提因为在Vue种,其数据的变化和页面的渲染是异步的,即是我们在事件种修改了数据时,视图并不会立即更新,而是等在同一个事件循环(这里就涉及到了...

学学学无止境 阅读(333)

python辅导班_Python辅导机构的水平怎样才算合格?

现在提到了辅导服务,肯定很多人都不会觉得陌生,就算是国内也是有着专业辅导作业的服务行业的,能够为有需求的学生提供很多的帮助,不过其实辅导机构在国...

weixin_39773447 阅读(950)

模型视图(20):【类】QItemSelectionModel[官翻]

文章目录详述公共类型enumSelectionFlag属性公共函数构造析构交互模型和索引选定公共槽信号受保护的函数参见QItemSelectionModel类QItemSelectionModel类跟...

hitzsf 阅读(916)