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

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

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

使用要求

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

以下直接代码部分
html:


<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件夹管理title>
    
    <script src="./art-template.js" type="text/javascript" charset="utf-8">script>
    
    <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环境中)
有更好的方法也可以提出来学习一下
如有问题请指出谢谢

你可能感兴趣的:(html)