4.express-art-template模板引擎

1.Expree框架简介 | 2.中间件 | 3.Express请求处理 | 4.express-art-template模板引擎

模板引擎

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

使用npm install art-template express-art-template命令进行安装

//当渲染后缀为art的模板时,使用express-art-template
app.engine('art',require('express-art-template'));
//设置模板存放目录
app.set('views',path.join(__dirname, 'views'));
//渲染模板时不写后缀, 默认拼接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框架使用什么模板引擎渲染什么后缀的模板文件
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) => {
    // 1.拼接模板路径
    // 2.拼接模板后缀
    // 3.哪一个模板和哪一个数据进行拼接
    // 4.将拼接结构返回给客户端
    res.render('index', {
        msg: 'message'
    })
});

app.get('/list', (req, res) => {
    res.render('list', {
        msg: 'page-list'
    })
})

app.listen(8000);
console.log('服务器启动');

app.locals对象

将变量设置到app.locals对象下面,这个数据在素有的模板中都可以获取到

//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.js

const express = require('express');

const path = require('path');

const app = express();

// 模板配置
app.engine('art', require('express-art-template'))
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'art');

app.locals.users = [{
    name: 'zhangsan',
    age: 20
}, {
    name: '李四',
    age: 33
}]

app.get('/index', (req, res) => {
    res.render('index', {
        msg: '首页'
    })
});

app.get('/list', (req, res) => {
    res.render('list', {
        msg: '列表页'
    })
})

app.listen(8000);
console.log('服务器启动');

1.Expree框架简介 | 2.中间件 | 3.Express请求处理 | 4.express-art-template模板引擎

Express框架
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。