Javashop模板制作手册V2--基础篇

一、概述

模板制作需要用到标签、api调用，在一些复杂的模板中还可能会用到挂件和url映射。

我们以购物车页面为例介绍，购物车页面的样子可能如下所示：

我们首先会用标签输出上述列表的数据，而对于删除和更改数量的功能性操作，我们通过异步调用核心的api来完成，

如删除购物车一项的api地址为：

/api/shop/cart!delete.do?cartid=1

调用上述地址会返回一个json串{“result”:1,”message”:”删除成功”}

二、标签使用详解

我们以输出上述购物车列表为例来调用标签输出数据：

首先我们在当前模板文件夹中建立一个模板文件，如名为：”cart.html”，然后在此页面中输入如下代码：

<#-- 创建购物车标签 -->
<#assign cartTag= newTag("cartTag")>
<#assign itemList = cartTag() >

<div class="cart-wrap">
    <#if (itemList?size>0) >
    <!--循环输出商品列表-->
        <#list itemList as item>
            <li>
                <span>${item.name}</span>
                <span>${item.num}</span>
                <span>
                    <a href="javascript" itemid="${item.id}" class=”del”>删除</a>
                </span>
            </li>
        </#list>
    <#else>
        <span>购物车没有商品！</span>
    </#if>
</div>

然后打开浏览器在地址栏中输入：/cart.html就可以看到效果了。

我们来解释一下标签的使用，首先是标签的创建：

<#assign itemList = cartTag() >

assign 这个关键字是Freemarker定义的，用来在模板中声明一个变量，

cartTag 是声明的变量名

newTag("cartTag") 是创建了一个购物车标签，并将引用赋值给了cartTag变量

而下面这行代码是调用了刚刚创建的cartTag标签：

<#assign itemList = cartTag() >

调用这个标标签会得到购物车的列表，上述代码把他赋值给itemList变量。

这样我们就可以通过#list 指令来循环这个列表了。

小提示

在页面中可以直接获取在地址栏和form中传递的参数哦，如：

/test.html?name=wf

那么在页面中直接通过${name}就可以输出地址栏中定义的name参数。

同样的地，form表单中的参数通过上述方法可以一直获取、输出。

三、API的调用

我们还以上述购物车的删除操作为例，调用购物车删除api代码如下：

$(".cart-wrap .del").click(function(){
//得到cart id
var itemid = $(this).attr("itemid");
$.ajax({
  url:"/api/shop/cart!delete.do",
  data:"cartid="+itemid,
  dataType:"json",
  success:function(result){
    if(result.result==1){
      alert("删除成功");
    }else{
      $.alert(result.message);
    }
    $.Loading.hide();
  },
  error:function(){
    $.alert("出错了:(");
  }
});
});

上述的api 是通过访问一个url:

/api/shop/cart!delete.do

来调用的，调用结果是json格式，如：

{“result”:1,”message”:”删除成功”}