前端模板 art-template 安装及语法说明

[TOC]

## 1. art-template使用介绍

### 1.1. 安装

#### 1.1.1. NPM安装
```Shell
npm install art-template --save
```
#### 1.1.2. 在浏览器中实时编译
引用：[template-web.js](https://unpkg.com/art-template&#64;4.13.2/lib/template-web.js)

### 1.2. 语法介绍
#### 1.2.1. 素材准备
访问地址：http://localhost:3000/perInfo.html
##### 1.2.1.1. 数据源文件 sanguo.json
```json
[
    {
        "username": "曹操",
        "usersex": "男",
        "userposition": "王",
        "useradrr": "魏"
    },
    {
        "username": "关羽",
        "usersex": "男",
        "userposition": "将",
        "useradrr": "蜀"
    },
    {
        "username": "周瑜",
        "usersex": "男",
        "userposition": "帅",
        "useradrr": "吴"
    }
]
```
##### 1.2.1.2. 模板文件 perInfo.art
```html
<html>
<head>
    <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">
</head>
<div id="app">
<div>{{value}}</div>
{{@ htmlcon }}
{{ content }}
{{each list data index}}
<div style="text-align:center;background-color:red">{{ index }}</div>
    <ul>
        <li>
            姓名：{{data.username}}
        </li>
        <li>
            性别：{{data.usersex}}
        </li>
        <li>
            职位：{{data.userposition}}
        </li>
        <li>
            地址：{{data.useradrr}}
        </li>
    </ul>
{{/each}}
{{each per}}
<div style="text-align:center;background-color:green">{{ $index }}</div>
    <ol>
        <li>
            姓名：{{$value.name}}
        </li>
        <li>
            性别：{{$value.country}}
        </li>
    </ol>
{{/each}}
</div>
{{if flag == 1}}
<div style="background-color:blue">{{flag}}</div>
{{else if flag == 2}}
<div style="background-color:red">{{flag}}</div>
{{else}}
<div style="background-color:green">{{flag}}</div>
{{/if}}
{{set temp = list[flag]}}
<div>
<span>{{temp.username}}</span> |
<span>{{temp.usersex}}</span> |
<span>{{temp.userposition}}</span> |
<span>{{temp.useradrr}}</span>
</div>
<script type="text/javascript">
</script>
</html>
```
##### 1.2.1.3. nodejs脚本文件 application.js
```js
const paths = require("path")
const fs = require("fs")
const http = require("http")
const template = require("art-template")
//数据源
const sanguo = require("../00-data/sanguo.json")

http.createServer((req, res) => {
    let url = paths.join(__dirname, "../00-tpl", req.url.replace("html", "art"))
    let dtype = "text/plain;charset=utf8"
    let stateCode = 200
    //查询页面
    if (req.url.startsWith("/perInfo") && req.method == "GET") {
        dtype = "text/html;charset=utf8"
        //加载渲染模板信息
        let content = template(url, {
            list: sanguo,
            value: "art-template练习",
            htmlcon: "<div><h3>原文输出</h3></div>",
            content: "<div><h3>内容输出</h3></div>",
            flag: 1,
            per: [{ name: "李白", country: "唐" },
            { name: "李煜", country: "南唐" }]
        })
        res.writeHead(stateCode, { "content-type": dtype })
        res.end(content);
    } else {
        res.writeHead(500, { "content-type": dtype })
        res.end("server error");
    }
}).listen(3000, () => {
    console.log("服务已启动")
})
```
#### 1.2.2. 输出
直接输出信息，不会将HTML进行转义
```html
<div>{{value}}</div>
```
#### 1.2.3. html转义输出
可以将HTML内容进行转义后渲染到浏览器
```html
<div>{{@ htmlcon }}</div>
```
#### 1.2.4. 循环
+ 方式一
data是循环list后得到的每项数据信息，index是循环的索引

```html
{{each list data index}}
<div style="text-align:center;background-color:red">{{ index }}</div>
    <ul>
        <li>
            姓名：{{data.username}}
        </li>
        <li>
            性别：{{data.usersex}}
        </li>
        <li>
            职位：{{data.userposition}}
        </li>
        <li>
            地址：{{data.useradrr}}
        </li>
    </ul>
{{/each}}
```

+ 方式二
采用这种方式循环不需要指定循环输出参数，默认$value是每次循环得到的数据信息，$index是循环索引

```html
{{each per}}
<div style="text-align:center;background-color:green">{{ $index }}</div>
    <ol>
        <li>
            姓名：{{$value.name}}
        </li>
        <li>
            性别：{{$value.country}}
        </li>
    </ol>
{{/each}}
```

#### 1.2.5. 条件
else if和else 没有结束语法，包裹在if中

```html
{{if flag == 1}}
<div style="background-color:blue">{{flag}}</div>
{{else if flag == 2}}
<div style="background-color:red">{{flag}}</div>
{{else}}
<div style="background-color:green">{{flag}}</div>
{{/if}}
```

#### 1.2.6. 变量声明
变量可以是对象、字符串、数组等常用类型，声明关键字`set`

```html
{{set temp = list[flag]}}
<div>
<span>{{temp.username}}</span> |
<span>{{temp.usersex}}</span> |
<span>{{temp.userposition}}</span> |
<span>{{temp.useradrr}}</span>
</div>
```