node.js (四)使用art-template渲染数据

art-template文档官网：https://aui.github.io/art-template/zh-cn/index.html

一：什么是art-template

art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。使用art-template也便于维护代码，以前我们渲染数据是以模板字符串的形式在js文件中写入的html内容，如果html内容需要修改，我们需要在js中修改。而用了模板引擎以后，我们只需要html文件中修改html内容。还有使用了模板引擎以后DOM操作的效率也会更高一点。

二：安装与环境（这个看我前面的博客，这里就不多讲啦~）

三：使用
取值{{ }}
循环取值用 {{each data}} {{/each}}
话不多说直接上代码

上代码：
响应index.html 页面，并响应数据

app.use("/",(req,res)=>{
     res.render('index.html',{   
    "students":[
      {"id":1,"name":"张三","sex":1,"age":12,"hobby":"lol,QQ,Java,python"},
      {"id":2,"name":"张三","sex":1,"age":12,"hobby":"lol,QQ,Java,python"},
      {"id":3,"name":"张三","sex":1,"age":12,"hobby":"lol,QQ,Java,python"},
      {"id":4,"name":"张三","sex":1,"age":12,"hobby":"lol,QQ,Java,python"}
    ],

      "names":["a","b","c"]

	})

   })

页面循环获取用 {{each students}} 用{{/each}}表示循环结束 一定要记住，
循环取值用{{$value.xxx}}
页面代码：

div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#ID</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>年龄</th>
                  <th>爱好</th>
                </tr>
              </thead>
              <tbody>
                {{each students}}
                <tr>
                  <td>{{$value.id}}</td>
                  <td>{{$value.name}}</td>
                  <td>{{$value.sex}}</td>
                  <td>{{$value.age}}</td>
                  <td>{{$value.hobby}}</td>
                </tr>
               {{/each}} 
               
              </tbody>
            </table>
          </div>

渲染结果如下：