art-template使用

Posted 七分sunshine!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了art-template使用相关的知识,希望对你有一定的参考价值。

art-template是一个预编译工具,在实际应用上可以简化拼接字符串;

这是中文文档:https://aui.github.io/art-template/zh-cn/docs/syntax.html (目前art-template.js的版本是4.12.2);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="div1"></div>
</body>

</html>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/art-template.js"></script>
<script id="ul1" type="text/html">
    <ul>
        {{each data}}
        <li>{{$index}} {{$value.name}}</li>
        {{/each}}
    </ul>
</script>
<script>

    $.ajax({

        url: "https:www.easy-mock.com/mock/5af2a947086dd715d58ab833/API/getname",

        success: function (res) {

            console.log(res)

            $("#div1").html(template("ul1", res));  //data和res有对应关系;data是res下的一个属性;

        },
        error:function(res){
            console.log(res)
        }
    })
</script>

顺便介绍一下: https:www.easy-mock.com 是一个免费的 前后端数据模拟工具(请求不要太频繁),可以根据自己自定义的API生成返回的数据;

当然:前端的页面在本地是打不开的,有ajax请求限制;

我们可以用python3工具自带的本地服务器: (前提安装python环境) DOS 下cd 到哪个目录自己决定,然后 python -m http.server 80  ; OK 好了浏览器可以预览上述结果了;

 

以上是关于art-template使用的主要内容,如果未能解决你的问题,请参考以下文章

js模板引擎art-template使用方法

fastadmin是如何使用art-template的,以及如何在js模板中,嵌套JS模板

ajax配合art-template模板引擎的使用

Node.js第五篇:模板引擎art-template

Node.js第五篇:模板引擎art-template

ART-TEMPLATE的核心语法