Express模板引擎和兼容atr-template模板介绍

[TOC]

## Express模板引擎介绍
### Express模板引擎
#### app.engine（ext，callback）
使用`app.engine()`方法创建自己的模板引擎

#### app.set(name, value)
模板引擎需要两项应用程序设置views和view engine，这两项都是固定写法，`app.set()`函数的详细使用参见官网说明

|参数|说明|类型|
|--|--|--|
|views|应用程序视图的目录或目录数组。如果是数组，则按视图在数组中出现的顺序查找视图。|string/Array|
|view engine|省略时使用的默认引擎扩展。`注意：子应用程序将继承此设置的值`。|string|

#### res.render(view,[locals])
模板渲染函数

|参数|说明|类型|
|--|--|--|
|view|模板文件路径。|string|
|locals|提供给模板的数据|object|

+ 模板引擎静

```js
var fs = require('fs') // 读取文件需要引入fs库
app.engine('ntl', function (filePath, options, callback) { // 定义模板引擎
  fs.readFile(filePath, function (err, content) {
    if (err) return callback(err)
    // 替换渲染的内容
    var rendered = content.toString()
      .replace('#title#', '<title>' + options.title + '</title>')
      .replace('#message#', '<h1>' + options.message + '</h1>')
    return callback(null, rendered)
  })
})
app.set('views', './views') // 指定视图（模板）目录
app.set('view engine', 'ntl') // 注册模板引擎
```

+ 模板文件

```html
#title#
#message#
```

+ 使用模板引擎

```js
app.get('/', function (req, res) {
  res.render('index', { title: 'Hey', message: 'Hello there!' })
})
```

### Express兼容atr-template模板
#### 安装atr-template模板
```Shell
npm install atr-template --save
```

#### 安装express-atr-template
兼容Express模板引擎的atr-template模板包

```Shell
npm install --save express-atr-template
```

### Express兼容atr-template模板示例
按下面文件组织代码结构，启动nodejs服务后，进入访问地址：http://localhost:3000/shopList

+ data.json数据源文件

```json
{
    "info0": {
        "username": "曹操",
        "usersex": "男",
        "userposition": "王",
        "useradrr": "魏"
    },
    "info1": {
        "username": "关羽",
        "usersex": "男",
        "userposition": "将",
        "useradrr": "蜀"
    },
    "info2": {
        "username": "周瑜",
        "usersex": "男",
        "userposition": "帅",
        "useradrr": "吴"
    }
}
```

+ shopList.art模板文件

```html
<!DOCTYPE html>
<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
</hred>
<div id="app">
    {{each list data index}}
    <div style="text-align:center;background-color:blue;color:#fff">{{ index }}</div>
    <ul>
        <li>
            姓名：{{data.username}}
        </li>
        <li>
            性别：{{data.usersex}}
        </li>
        <li>
            职位：{{data.userposition}}
        </li>
        <li>
            地址：{{data.useradrr}}
        </li>
    </ul>
    {{/each}}
</div>
<script type="text/javascript">
</script>
</html>
```

+ app.js文件

```js
const express = require('express')
const app = express();
// const atrTemplate = require("art-template")
const path = require("path")
const expressArt = require("express-art-template")
const data = require("../data/sanguo.json")
//设置模板路径
app.set("views", path.join(__dirname, "art"))
//设置模板引擎（设置模板文件后缀）
app.set("view engine", "art")
//绑定模板引擎，让Express可以兼容art-template模板
app.engine("art", expressArt)

app.get("/shopList", (req, res) => {
    //渲染模板，第一个参数为atr模板名称，第二参数为传给模板的数据
    res.render("shopList", { list: data })
})

let server = app.listen("3000", 'localhost', () => {
    console.log(server.address().address + server.address().port + "：服务已启动")
})
```