Art-Template 在普通 HTMl 文件中的运用

最新推荐文章于 2021-06-16 10:26:58 发布

丨Daisy丨

最新推荐文章于 2021-06-16 10:26:58 发布

阅读量1.2k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Daisy_Journal/article/details/106136494

版权

起因:在前后端分离的情况下,一般后端API返回的数据都是json格式,这时渲染数据就需要使用到前端的模版引擎来提高开发效率.但是查询全网,直接使用art-template来渲染数据的文章并不多.对于我个小白又不想用Node来开发的人来说真是头痛.
折腾了一天,终于研究出来一个比较靠谱的使用方法,在此记录一下.
需要的文件

jq.js(官网下载的3.x.x版本)
art-template.js(官网web版复制的)

使用要求

在html中引入以上两个文件
对于要渲染的元素需要id命名(名字随意)
渲染的模版(script标签)也需要id命名
渲染的数据(script标签)推荐使用$ajax获取后台API返回的数据,$get没有弄清楚赋值原理,不能绑定数据

以下直接代码部分
html:

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件夹管理</title>
    <!--引入art-template文件-->
    <script src="./art-template.js" type="text/javascript" charset="utf-8"></script>
    <!--引入JQ文件-->
    <script src="./JQ.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
      <h1 class="TC ">文件夹管理系统</h1>
       
      <!-- 渲染的位置 -->
      <table class="Mcenter TC" id="main"> </table> 
          
      <!-- 渲染模版 -->
      <script type="text/html" id='box1' >
        <tr>
          <th>\</th><th>文件夹名称</th><th>文件夹图片</th><th>操作</th>
        </tr>
       // 循环渲染数据 如有报错请将这句话删除 
        {{ each aa }}
        <tr>
            <td>{{ $index }}</td>
            <td>{{ $value.Name }}</td>
            <td><img src="{{ $value.ImgUrl }}" alt=""/>   </td>
            <td>
                <a href="">编辑</a>
                <a href="">删除</a>
            </td>
         </tr>
        {{ /each }}
      </script>
       
    </div>
    
</body>
<!-- 渲染数据 -->
<script type="text/javascript">
    var datas = {
        "aa": [],
    }
	// 请求后台数据
      $.ajax({
          type:'get',
          url:'./Files.php',
          async:false,
          success:function(data){
              datas.aa = JSON.parse( data )
          }
      })
      //console.log(datas)
    var html = template('box1', datas); //box1对应上面的渲染模版id
    document.getElementById('main').innerHTML = html; //main对应上面的 元素(table)的id
</script>

</html>

用到的js和art文件代码:
art-template:
链接：https://pan.baidu.com/s/1SKfwD5gW61zzLDbN65t0Iw
提取码：brx2
JQ:
链接：https://pan.baidu.com/s/1o2w-z3OI1AUsKqtDNbA9FA
提取码：i0hz

这样就能渲染出后台获取到的json数据了(不在Nodejs环境中)
有更好的方法也可以提出来学习一下
如有问题请指出谢谢

丨Daisy丨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Art-Template 在普通 HTMl 文件中的运用

起因:在前后端分离的情况下,一般后端API返回的数据都是json格式,这时渲染数据就需要使用到前端的模版引擎来提高开发效率.但是查询全网,直接使用art-template来渲染数据的文章并不多.对于我个小白又不想用Node来开发的人来说真是头痛.折腾了一天,终于研究出来一个比较靠谱的使用方法,在此记录一下.需要的文件jq.js(官网下载的3.x.x版本)art-template.js(官网web版复制的)使用要求在html中引入以上两个文件对于要渲染的元素需要id命名(名字随意)渲染的
复制链接

扫一扫