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. 设置模板存放目录

   • 第一个参数是设置存放模板目录的文件夹

   • 第二个参数是存放模板的绝对路径

2. 设置默认的模板后缀，设置模板时，如果没有写模板后缀就使用当前设置的模板后缀

   • 第一个参数是 默认模板的配置项
   • 第二个参数是后缀的名字

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~