zoukankan      html  css  js  c++  java
  • 淘宝开放平台API 小试牛刀

    本应用是基于淘宝开放平台(TOPAPI以及Google Map JavaScript  API的基础上实现的一个自用型淘宝买家应用。

    实现的功能:

    在浏览器端,展示淘宝用户作为买家,所买到的商品(通过在地图上展示,商品的收获地址以及商品图片)。

    如图:

    实现过程:

    在浏览器上显示地图 --> 通过TOP API查询用户的交易记录 --> 返回XML数据 --> 

    解析xml,获得收获地址、商品图片地址 --> 调用Google Map API 在地图上显示 --> 完毕。

    主要技术:

    Java , TOP API,Google Map API, DWR

    源码:

    APITest.java

     

    1 package aa;
    2
    3  import java.text.ParseException;
    4  import java.text.SimpleDateFormat;
    5  import java.util.Date;
    6
    7  import com.taobao.api.ApiException;
    8  import com.taobao.api.Constants;
    9  import com.taobao.api.DefaultTaobaoClient;
    10  import com.taobao.api.TaobaoClient;
    11  import com.taobao.api.request.TradesBoughtGetRequest;
    12  import com.taobao.api.response.TradesBoughtGetResponse;
    13
    14  public class APITest {
    15 protected static String testUrl = "http://gw.api.tbsandbox.com/router/rest";// 沙箱环境调用地址
    16   protected static String Url = "http://gw.api.taobao.com/router/rest";//正式环境调用地址
    17   /**
    18 * 说明:沙箱环境是模拟淘宝网上交易的,开发人员可以在此先测试自己的应用,然后才能申请到正式环境测试
    19 */
    20
    21 // 申请的测试账号 appkey 及 secret
    22   protected static String myappkey = " ";
    23 protected static String mysecret = " ";
    24 protected static String sandboxSecret = " "; // 沙箱环境测试下的 AppSecret
    25   /**
    26 * 说明:开发者申请开发应用的时候,系统给你的appkey与secret是和你的应用唯一对应的,同时,
    27 * 它会绑定你的淘宝账户(现实环境的账户以及申请的沙箱账户),当需要调用到用户隐私数据的时候,
    28 * 调用的即是所关联的账户的数据。
    29 * 例如本例调用到的monkey823用户即是我在沙箱申请的账户,里面的交易数据是在mini淘宝模拟的。
    30 */
    31
    32 /**
    33 * 测试 TradesBoughtGet
    34 *
    35 * 调用了top SDK
    36 *
    37 */
    38 public static String testTradeGet() throws ApiException, ParseException {
    39
    40 // 可以在client 构造函数里 设置返回的数据格式 xml or json
    41   TaobaoClient client = new DefaultTaobaoClient(testUrl, myappkey,
    42 sandboxSecret, Constants.FORMAT_XML);
    43 TradesBoughtGetRequest req = new TradesBoughtGetRequest();
    44 req.setFields("seller_nick,buyer_nick,title,type,create,orders.pic_path,orders.price,orders.num,receiver_city");
    45 Date dateTime = SimpleDateFormat.getDateTimeInstance().parse(
    46 "2011-03-09 05:15:27");
    47 Date dateTime2 = SimpleDateFormat.getDateTimeInstance().parse(
    48 "2011-04-09 23:15:27");
    49
    50 req.setStartCreated(dateTime);
    51 req.setEndCreated(dateTime2);
    52
    53 TradesBoughtGetResponse response = client.execute(req);
    54
    55 System.out.println("------>> " + response.getBody());
    56
    57 return response.getBody();
    58 }
    59
    60 public static void main(String[] args) {
    61
    62 try {
    63 APITest.testTradeGet();
    64 } catch (Exception e) {
    65 e.printStackTrace();
    66 }
    67 }
    68 }

    执行这个测试时,返回的XML数据(为方便查看,以图片形式展示):

     

    Web.xml

     

    1 <?xml version="1.0" encoding="UTF-8"?>
    2  <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
    3 <display-name>DwrTest</display-name>
    4 <servlet>
    5 <servlet-name>dwr-invoker</servlet-name>
    6 <!--<display-name>DWR Servlet</display-name>-->
    7 <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
    8 <init-param>
    9 <param-name>debug</param-name>
    10 <param-value>true</param-value>
    11 </init-param>
    12 </servlet>
    13
    14  <servlet-mapping>
    15 <servlet-name>dwr-invoker</servlet-name>
    16 <url-pattern>/dwr/*</url-pattern>
    17  </servlet-mapping>
    18 <welcome-file-list>
    19 <welcome-file>test.jsp</welcome-file>
    20 </welcome-file-list>
    21  </web-app>

    Dwr.xml

     

    1 <!DOCTYPE dwr PUBLIC
    2 "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
    3 "http://getahead.org/dwr/dwr30.dtd">
    4
    5  <dwr>
    6 <allow>
    7
    8 <create creator="new" javascript="APITest">
    9 <param name="class" value ="aa.APITest" />
    10 </create>
    11
    12 </allow>
    13  </dwr>

    test.jsp

     

    1 <%@ page language="java" contentType="text/html; charset=UTF-8"
    2 pageEncoding="UTF-8"%>
    3  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    4  <html>
    5  <head>
    6  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    7  <title>DWR Test</title>
    8  <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    9  </head>
    10  <!--引入dwr的js脚本-->
    11 <script src="dwr/interface/APITest.js"></script>
    12   <script src="dwr/engine.js" /></script>
    13
    14  <!-- 下面是谷歌地图API的调用 -->
    15  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=cn"></script>
    16  <script type="text/javascript">
    17  function initialize() {
    18
    19 //初始化地图界面
    20   var myLatlng = new google.maps.LatLng(37.230,106.083); //中国地图的坐标中心
    21   var myOptions = {
    22 zoom: 4, //缩放级别
    23   center: myLatlng, //设定中心坐标
    24 mapTypeId: google.maps.MapTypeId.ROADMAP //地图样式:卫星,地图
    25 };
    26
    27 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    28
    29 //获取后台数据, 并实时显示在地图上。
    30 APITest.testTradeGet(callback); //执行top API 生成xml数据, 并绑定 回调方法处理
    31
    32 //回调函数
    33 function callback(response){ //response为执行 APITest.testTradeGet方法返回的值(xml格式的String)
    34 var xmlDoc = loadXMLStr(response);
    35
    36 //其他 步骤
    37 //获得图片路径 数组
    38 var picturePaths = xmlDoc.getElementsByTagName("pic_path");
    39 //获得所在城市 数组
    40 var citys = xmlDoc.getElementsByTagName("receiver_city");
    41 //alert("pic:" +picturePaths[0].text +" city :"+ citys[0].text);
    42 //alert("pic:" +picturePaths[0].text);
    43 if(picturePaths[0]!=null){ //如果返回的数据不为空
    44 //根据图片地址 生成自定义图片文件
    45 var image = new google.maps.MarkerImage(
    46 picturePaths[0].text,
    47 new google.maps.Size(80, 60), //缩放后的大小
    48 new google.maps.Point(0, 0), //原始点
    49 new google.maps.Point(40, 0), //锚点
    50 new google.maps.Size(800, 600) //图片原始大小(缩放图片时必须要填写)
    51 ); //缩放了大小的图片
    52 //var image = new google.maps.MarkerImage(picturePaths[0].text); //原始大小的图片
    53
    54 var address = citys[0].text;
    55 //var address = "长沙";
    56 codeAddress(address); //解析地址, 并往地图上添加图片
    57
    58 }
    59
    60 //解析地址的函数
    61 function codeAddress(address) {
    62 var ll;
    63 var geocoder = new google.maps.Geocoder();
    64
    65 if (geocoder) {
    66 geocoder.geocode( { 'address': address},getLL);
    67 }
    68 var re = function getLL(results, status) {
    69 if (status == google.maps.GeocoderStatus.OK) {
    70
    71 ll = results[0].geometry.location;
    72
    73 //在所解析的地址处, 添加一个标记(用自定义图片)
    74 var marker = new google.maps.Marker({
    75 map: map,
    76 position: ll,//results[0].geometry.location,
    77 icon: image //自定义的icon
    78 });
    79
    80 //信息窗口选项
    81 var infoOption = {
    82 content: address,
    83 position: ll//results[0].geometry.location
    84 };
    85 //添加 信息窗口
    86 var info = new google.maps.InfoWindow(infoOption);
    87 info.open(map); //显示标注信息窗口
    88 //alert("mark 5555555555 success!!!");
    89
    90 } else {
    91 alert("Geocode was not successful for the following reason: " + status);
    92 }
    93 };
    94 }
    95
    96 }
    97
    98 //加载 xml 格式的字符串的函数
    99 function loadXMLStr(text){ //text为xml格式的String
    100 var xmlDoc;
    101 try //Internet Explorer
    102 {
    103 xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    104 xmlDoc.async="false";
    105 xmlDoc.loadXML(text);
    106 }
    107 catch(e)
    108 {
    109 try //Firefox, Mozilla, Opera, etc.
    110 {
    111 parser=new DOMParser();
    112 xmlDoc=parser.parseFromString(text,"text/xml");
    113 }
    114 catch(e) {alert(e.message);}
    115 }
    116 return xmlDoc;
    117 }
    118
    119 }
    120
    121 </script>
    122 </head>
    123 <body onload="initialize()">
    124
    125 <!-- 显示地图的div -->
    126 <div id="map_canvas" style=" 1000px; height: 800px; align:center;"></div>
    127 </body>
    128 </html>

     

    当然,dwr的包、 TOP的SDK是不能忘记的。O(∩_∩)O~

     

    好了,希望本文能引起你对于TOP的兴趣,更希望对于刚要着手开发淘宝应用的同志 能够有点帮助。

    错误之处,还望不吝赐教。

  • 相关阅读:
    遇到缺陷错误时,有耐心,冷静思考,保证大方向是正确的
    学习新芯片和做新的工作内容时 DEMO
    599密码
    shop--7.店铺编辑和列表--店铺管理 前端
    shop--7.店铺编辑和列表--店铺列表展示 前端
    shop--7.店铺编辑和列表--店铺列表 分页查询,模糊查询--service层,controller层实现
    shop--7.店铺编辑和列表--店铺列表 分页查询,模糊查询--dao层实现
    shop--7.店铺编辑和列表--更新店铺的信息 前端实现 js
    shop--7.店铺编辑和列表--更新店铺的信息,包括对店铺照片的处理,根据shopId获取shop信息
    shop--7.店铺编辑和列表--联合查询的结果集封装ResultMap association collection
  • 原文地址:https://www.cnblogs.com/danne823/p/2024259.html
Copyright © 2011-2022 走看看