使用Arttemplate模板写动态网页

写个动态的页面

1.直接看效果:

布卡动漫.png

使用到的是我们今天的主角 art-template,一个简约、超快的模板引擎。
2.它有2种语法(原始语法、标准语法):

标准语法:

  {{if user}}
      <h2>{{user.name}}</h2>
  {{/if}}

原始语法:(有点像.ASP 风格)

    <% if (user) { %>
        <h2><%= user.name %></h2>
    <% } %>

注意:上面的 “=” 表是 赋值。原始语法一定要记得添加。

渲染模板

    var template = require('art-template');
    var html = template(__dirname + '/tpl-user.art', {
      user: {
          name: 'aui'
      }
});

核心方法

    // 基于模板名渲染模板
template(filename, data);

// 将模板源代码编译成函数
template.compile(source, options);

// 将模板源代码编译成函数并立刻执行
template.render(source, data, options);

常用的语法

1. 原文输出

就是后台输出的格式是 标签 的形式:
例如:

后台返回标签形式.png

语法

{{@ value }}

原始语法

  <%- value %>

2. 条件

标准语法
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}

原始语法

<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

3. 循环

标准语法

{{each target}}
    {{$index}} {{$value}}
{{/each}}
原始语法
    <% for(var i = 0; i < target.length; i++){ %>
    <%= i %> <%= target[i] %>
    <% } %>

注意:

  • target 支持 array 与 object 的迭代,其默认值为 $data。
  • value 与index 可以自定义:{{each target val key}}。

4.变量

标准语法

  {{set temp = data.sub.content}}

原始语法

  <% var temp = data.sub.content; %>

更多请看官网。。。

现在看我们的真实项目如何使用吧!

这是下面将要动态显示的数据!!!


模板.png

1.导入模板

art-template.png
  • 引入js到代码
  <!-- 1.1 引入 art-template 模板 -->
<script src="./assets/art-template/template-web.js"></script>
<!-- 处理某小块的请求数据 -->
<script src="./script/getIndex.js"></script>
  • 2.使用模板
    新建 getIndex.js (上图引入的 js脚本),里面注释很详细了。
  // 1.入口函数
$(function(){
    // 2.Ajax 请求 (4个参数URL、type、dataType、请求成功和失败的函数)
    $.ajax({
        url:"http://193.112.55.79:9093/php/gameCenter.php",
        type:"get",
        dataType:"json",
        success:function(res){
            
            // console.log(res);

            /*
            注意:
            这里的 template参数:id="gameCenterTmp" , 表示对应的.html要渲染模板的id表记;
            参数2:表示 返回的数据,看情况。是对象就 {data:res}
            */ 
            var htmlStr = template("gameCenterTmp",{
                data: res
            })
            // console.log(htmlStr);
            // 对模板渲染 (tabContent 是元素的id )
            $("#tabContent ul").html(htmlStr);
        }
    })

})

这时看到的效果就是:(这说明有请求到数据)


解析结果.png
  • 回到.html页面,渲染就可以了。
  <!-- 2.使用模板 -->
<!-- 注意:
1.type:处script外都可以命名。因为我们不想让它变成script 解析。通常使用 template
2.id :这个是在解析 后台数据时标记是哪个 模板的请求数据
3.添加一个 新的 js 文件用来Ajax处理请求数据
-->
<script type="text/template" id="gameCenterTmp">

    {{each data value index}}
  
    <li>
      <script type="text/template" id="gameCenterTmp">

    {{each data value index}}
    <li>
        <!-- 
            原本是这样的:

            <a href='chapter.html'>
            <img src="./images/lhsl_199x259.jpg" alt="">
            <p class='bookname'>灵魂撕裂</p>

        </a> -->

        <a href='chapter.html?id={{value.id}}'>
            <img src="{{value.gamePic}}" alt="">
            <p class='bookname'>{{value.gameName}}</p>
        </a>
    </li>
    {{/each}}
</script>
  • 最后:一刷新bring bring 出来了:


    使用模板渲染出来数据.png

总结:

使用的知识点:

  1. art-template 模板引擎的使用。其性能无论在前端还是后端都有极其出色的表现。

2.循环遍历表达式:无论数组或者对象都可以用 each 进行遍历.

  1. jQuery中的Ajax

     $.ajax({}) 可配置方式发起Ajax请求
    
  • url 接口地址 *
  • type 请求方式 *
  • timeout 请求超时 *
  • dataType 服务器返回格式 *
  • data 发送请求数据 *
  • beforeSend:function () {} 请求发起前调用 *
  • success 成功响应后调用 *
  • error 错误响应时调用 *

其它的基本都是这样操作了,小伙伴赶紧动起手来实践吧!

项目下载链接Githuib

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容