artTemplate与php,使用Arttemplate模板写动态网页

写个动态的页面

1.直接看效果：

布卡动漫.png

使用到的是我们今天的主角 art-template，一个简约、超快的模板引擎。

2.它有2种语法(原始语法、标准语法)：

标准语法：

{{if user}}

{{user.name}}

{{/if}}

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

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

渲染模板

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 }}

原始语法

2. 条件

标准语法

{{if value}} ... {{/if}}

{{if v1}} ... {{else if v2}} ... {{/if}}

原始语法

...

... ...

3. 循环

标准语法

{{each target}}

{{$index}} {{$value}}

{{/each}}

原始语法

注意：

target 支持 array 与 object 的迭代，其默认值为 $data。

value 与index 可以自定义：{{each target val key}}。

4.变量

标准语法

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

原始语法

更多请看官网。。。

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

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

模板.png

1.导入模板

art-template.png

引入js到代码

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页面，渲染就可以了。

{{each data value index}}

{{each data value index}}

{{value.gameName}}

{{/each}}

最后：一刷新bring bring 出来了：

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

总结：

使用的知识点：

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

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

jQuery中的Ajax

$.ajax({}) 可配置方式发起Ajax请求

url 接口地址 *

type 请求方式 *

timeout 请求超时 *

dataType 服务器返回格式 *

data 发送请求数据 *

beforeSend:function () {} 请求发起前调用 *

success 成功响应后调用 *

error 错误响应时调用 *

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