AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

原生JS + HTML + CSS 实现快递物流信息 API 的数据链式展示

2023-04-14 780
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 全国快递物流查询 API 是一种提供实时、准确、可靠的快递物流信息查询服务的接口。它基于现有的物流信息系统，通过API接口的方式，向用户提供快递物流信息的查询、跟踪、统计等功能。

引言

全国快递物流查询 API 是一种提供实时、准确、可靠的快递物流信息查询服务的接口。它基于现有的物流信息系统，通过API接口的方式，向用户提供快递物流信息的查询、跟踪、统计等功能。使用全国快递物流查询 API，用户可以在自己的应用程序或网站上，快速、方便地查询快递物流信息。

本文从全国快递物流查询 API 的工作原理开始说起，给出包括 API 的应用场景、如何调用以及实际代码示例，供大家参考。

工作原理

全国快递物流查询 API 的工作原理比较简单，通过请求第三方数据源获取最新的快递物流信息，再进行处理和解析，最终返回标准格式的数据给用户，我们可以参考下图的工作过程：

主要应用场景

全国快递物流查询 API 的应用场景广泛，能够帮助各个行业和场景中的用户快速查询、管理和分析快递物流信息，提高工作效率和服务质量。

全国快递物流 API 使用教程

APISpace 是 国内一个较大的 API 供应平台，提供多种类型的 API 接口，包括手机号码归属地查询 API 、天气预报查询API、手机在网状态 API 、反欺诈（羊毛盾）API 以及当前比较热门的 AI 绘画 API 等等，感兴趣的小伙伴可以去官网体验一下。

1.申请 API 密钥

用户需要在 API 提供商的官方网站进行注册，并申请 API 密钥，获得 API 接口调用的权限。

以 APISpace 为例，使用全国快递物流 API 的步骤通常如下：

进入全国快递物流 API 详情页，点击【免费试用】或者【注册】都可以获取 API 密钥。

注册成功后，我们在页面导航菜单点击 【我的 API】进入 【访问控制】页面，即可看到平台提供的密钥。

2.在线测试 API

点击免费试用成功后，系统会自动进入 API 的测试界面，如下图，我们只需要填入快递公司名称以及单号就能获取到完整的快递轨迹信息

3.使用代码接入 API 接口 - JS 方式

var data = "{"cpCode":"YTO","mailNo":"YTO1111111111","tel":"13000000000或0000","orderType":"asc"}"

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
        console.log(this.responseText);
    }
});

xhr.open("POST", "https://eolink.o.apispace.com/wlgj1/paidtobuy_api/trace_search");
xhr.setRequestHeader("X-APISpace-Token","替换成平台提供的 API");
xhr.setRequestHeader("Authorization-Type","apikey");
xhr.setRequestHeader("Content-Type","application/json");

xhr.send(data);

其他语言的接入可以点【接入指南】查看，包括Java、微信小程序等多种示例语言都整理出来了。

4.物流轨迹数据展示

根据 API 返回的结果

{
    "traceId": "xxx",
    "trace_id": "xxx",
    "success": true,
    "logisticsTrace": {
        "theLastTime": "2023-04-13 13:33:17",
        "cpCode": "EMS",
        "cpUrl": "https://www.ems.com.cn/",
        "takeTime": "2天21小时27分",
        "logisticsStatusDesc": "已代收",
        "logisticsTraceDetailList": [{
            "areaCode": "xxx",
            "areaName": "天津,天津市,武清区",
            "subLogisticsStatus": "ACCEPT",
            "time": 1681113967000,
            "logisticsStatus": "ACCEPT",
            "desc": "【天津市武清区电商客户揽投部】已收寄,揽投员:xxx,电话:185xxxxxxx4"
        }, {
            "areaCode": "CN120114000000",
            "areaName": "天津,天津市,武清区",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681124599000,
            "logisticsStatus": "TRANSPORT",
            "desc": "离开【天津市武清区电商客户揽投部】,下一站【天津邮件处理中心包件车间】"
        }, {
            "areaCode": "CN120100000000",
            "areaName": "天津,天津市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681134781000,
            "logisticsStatus": "TRANSPORT",
            "desc": "到达【天津邮件处理中心包件车间】"
        }, {
            "areaCode": "CN120100000000",
            "areaName": "天津,天津市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681141155000,
            "logisticsStatus": "TRANSPORT",
            "desc": "离开【天津邮件处理中心包件车间】,下一站【广州市江高包件车间】"
        }, {
            "areaCode": "CN440100000000",
            "areaName": "广东省,xx市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681281085000,
            "logisticsStatus": "TRANSPORT",
            "desc": "到达【xx车间】"
        }, {
            "areaCode": "CN440100000000",
            "areaName": "广东省,xx市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681297051000,
            "logisticsStatus": "TRANSPORT",
            "desc": "离开【xx车间】,下一站【xx车间】"
        }, {
            "areaCode": "CN442000000000",
            "areaName": "广东省,xx市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681307392000,
            "logisticsStatus": "TRANSPORT",
            "desc": "到达【xx车间】（经转）"
        }, {
            "areaCode": "CN442000000000",
            "areaName": "广东省,xx市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681318786000,
            "logisticsStatus": "TRANSPORT",
            "desc": "离开【xxx车间】,下一站【xxx处理车间】（经转）"
        }, {
            "areaCode": "CN440100000000",
            "areaName": "广东省,xx市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681331119000,
            "logisticsStatus": "TRANSPORT",
            "desc": "到达【xxx处理车间】"
        }, {
            "areaCode": "CN440100000000",
            "areaName": "广东省,xx市",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681337879000,
            "logisticsStatus": "TRANSPORT",
            "desc": "离开【xxx处理车间】,下一站【xxx揽投部】"
        }, {
            "areaCode": "CN440113000000",
            "areaName": "广东省,xx市,xx区",
            "subLogisticsStatus": "TRANSPORT",
            "time": 1681342169000,
            "logisticsStatus": "TRANSPORT",
            "desc": "到达【xxxx投部】"
        }, {
            "areaCode": "CN440113000000",
            "courier": "xxx",
            "areaName": "广东省,xx,xx区",
            "subLogisticsStatus": "DELIVERING",
            "courierPhone": "13xxxxxxxxx",
            "time": 1681352410000,
            "logisticsStatus": "DELIVERING",
            "desc": "【xxx揽投部】安排投递,投递员:xxx，电话:1xxxxxxxxxx,揽投部电话:0xx-xxxxxxx2"
        }, {
            "areaCode": "CN440100000000",
            "courier": "xxx",
            "areaName": "广东省,xxx市",
            "subLogisticsStatus": "xxx",
            "courierPhone": "1xxxxxxxxx3",
            "time": 1681363997000,
            "logisticsStatus": "AGENT_SIGN",
            "desc": "已签收,他人代收:xxxxx,投递员:xxx,电话:1xxxxxxxxx"
        }],
        "mailNo": "9853491117528",
        "cpMobile": "xxx",
        "theLastMessage": "已签收,他人代收:xxxxx,投递员:xxx,电话:1xxxxxxxxx",
        "logisticsCompanyName": "EMS",
        "courier": "xxx",
        "courierPhone": "1xxxxxxxxxx",
        "logisticsStatus": "xxx"
    }
}

物流信息展示代码示例( 原生JS + HTML + CSS)

下面的代码是手敲的，有错误欢迎评论区指正~

Html

<div class="" id="logistics-trace"></div>

Css

样式觉得简陋的话可以自行调整

<style>
    .logistics-trace {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }
    .logistics-trace li {
      width: 180px;
      margin: 10px;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
      text-align: center;
      position: relative;
    }
    .logistics-trace li:after {
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #ddd;
      background-color: #fff;
      position: absolute;
      top: -10px;
      left: calc(50% - 10px);
      z-index: 1;
    }
    .logistics-trace li:before {
      content: "";
      display: block;
      width: 2px;
      height: 100%;
      border-left: 1px solid #ddd;
      position: absolute;
      top: 10px;
      left: calc(50% - 1px);
      z-index: 1;
    }
    .logistics-trace li:first-child:before {
      display: none;
    }
    .logistics-trace li:last-child:after {
      display: none;
    }
    .logistics-time {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .logistics-status {
      font-size: 12px;
      margin-bottom: 5px;
    }
    .logistics-desc {
      font-size: 12px;
    }
    .logistics-status.accept {
      color: green;
    }
    .logistics-status.transport {
      color: blue;
    }
    .logistics-status.delivering {
      color: red;
    }
  </style>

JS

使用 JS 对返回的物流信息做处理

function generateLogisticsTrace(logisticsTraceData) {
      const logisticsTraceDetailList = logisticsTraceData.logisticsTrace.logisticsTraceDetailList;
      let logisticsTrace = '<ul>';
      logisticsTraceDetailList.forEach((logisticsTraceDetail, index) => {
        let logisticsStatus = '';
        let logisticsStatusDesc = '';
        let desc = logisticsTraceDetail.desc;
        let time = new Date(logisticsTraceDetail.time).toLocaleString();
        if (logisticsTraceDetail.subLogisticsStatus === 'ACCEPT') {
          logisticsStatus = 'accept';
          logisticsStatusDesc = '揽收';
        } else if (logisticsTraceDetail.subLogisticsStatus === 'TRANSPORT') {
          logisticsStatus = 'transport';
          logisticsStatusDesc = '运输';
        } else if (logisticsTraceDetail.subLogisticsStatus === 'DELIVERING') {
          logisticsStatus = 'delivering';
          logisticsStatusDesc = '派送';
          desc = '【' + logisticsTraceDetail.areaName + '】' + logisticsTraceDetail.desc.replace('，', ',<br>投递员：');
        }
        logisticsTrace += `
          <li class="${logisticsStatus}">
            <div class="logistics-time">${time}</div>
            <div class="logistics-status">${logisticsStatusDesc}</div>
            <div class="logistics-desc">${desc}</div>
          </li>
        `;
        if (index === logisticsTraceDetailList.length - 1) {
          logisticsTrace += '</ul>';
        }
      });
      return logisticsTrace;
    }

调用

 // xxx 请用上述返回的代码示例替换
 const logisticsTraceData = xxx
 const logisticsTrace = generateLogisticsTrace(logisticsTraceData);
 document.getElementById('logistics-trace').innerHTML = logisticsTrace;
文章标签：
Java
JavaScript
前端开发
人工智能
数据安全/隐私保护
API
小程序
关键词：
API信息
API物流
物流API
信息API
CSS js
不是海碗
目录
相关文章
游客ib7xsk7hcucuo
|
12月前
|
存储 前端开发 JavaScript
仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目，用于学习前端开发基础。用户可进行存款、取款操作，所有数据存储于浏览器内存中
游客ib7xsk7hcucuo
3082 4
游客mass6jalwg5qm
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端，再到利用 APIPost 高效测试 API，适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式，还涉及数据库连接和前后端数据交互。通过实际代码示例，助你快速上手并优化应用性能。
游客mass6jalwg5qm
501 6
winx_19970108018
|
数据采集 搜索推荐 API
Python 原生爬虫教程：京东商品列表页面数据API
京东商品列表API是电商大数据分析的重要工具，支持开发者、商家和研究人员获取京东平台商品数据。通过关键词搜索、分类筛选、价格区间等条件，可返回多维度商品信息（如名称、价格、销量等），适用于市场调研与推荐系统开发。本文介绍其功能并提供Python请求示例。接口采用HTTP GET/POST方式，支持分页、排序等功能，满足多样化数据需求。
winx_19970108018
721 5
疯狂的猿
|
存储 API 文件存储
单页图床HTML源码+本地API接口图床系统源码
图床系统是一种用于存储和管理图片文件的在线服务。它允许用户上传图片文件，并生成相应的图片链接，从而方便用户在网页、社交媒体或其他平台上分享图片。
疯狂的猿
648 2
单页图床HTML源码+本地API接口图床系统源码
疯狂的猿
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
疯狂的猿
660 33
游客lijmi4663rgsa
|
JavaScript 前端开发 API
JavaScript中通过array.map(）实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等，array.map(）的使用详解（附实际应用代码）
array.map(）可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等，比for好用太多了，主要是写法简单，并且非常直观，并且能提升代码的可读性，也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
733 1
winx_19970108018
|
数据采集 API 数据格式
Python 原生爬虫教程：京东商品详情页面数据API
本文介绍京东商品详情API在电商领域的应用价值及功能。该API通过商品ID获取详细信息，如基本信息、价格、库存、描述和用户评价等，支持HTTP请求（GET/POST），返回JSON或XML格式数据。对于商家优化策略、开发者构建应用（如比价网站）以及消费者快速了解商品均有重要意义。研究此API有助于推动电商业务创新与发展。
winx_19970108018
473 0
疯狂的猿
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
疯狂的猿
301 24
李游Leo
|
JavaScript 前端开发 安全
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中，许多功能与API曾风光无限，但随着技术进步和语言演化，部分功能逐渐被淘汰或被更高效的替代方案取代。例如，`with`语句使代码作用域复杂、可读性差；`void`操作符功能冗余且影响可读性；`eval`函数存在严重安全风险和性能问题；`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代；`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势，开发者应紧跟技术步伐，学习新技能，适应新技术环境。
李游Leo
319 10
请看我回答~
|
JSON JavaScript 前端开发
深入浅出Node.js：从零开始构建RESTful API
在数字化时代的浪潮中，后端开发作为连接用户与数据的桥梁，扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界，通过实践操作，掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用，学习如何设计API端点，处理数据请求，并实现身份验证机制，最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者，这篇文章都将为您打开一扇通往后端开发深层知识的大门。
请看我回答~
420 12