整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
全國快遞物流查詢 API 是一種提供實時、準確、可靠的快遞物流信息查詢服務的接口。它基于現有的物流信息系統，通過API接口的方式，向用戶提供快遞物流信息的查詢、跟蹤、統計等功能。使用全國快遞物流查詢 API，用戶可以在自己的應用程序或網站上，快速、方便地查詢快遞物流信息。
本文從全國快遞物流查詢 API 的工作原理開始說起，給出包括 API 的應用場景、如何調用以及實際代碼示例，供大家參考。
全國快遞物流查詢 API 的工作原理比較簡單，通過請求第三方數據源獲取最新的快遞物流信息，再進行處理和解析，最終返回標準格式的數據給用戶，我們可以參考下圖的工作過程：
全國快遞物流查詢 API 的應用場景廣泛，能夠幫助各個行業和場景中的用戶快速查詢、管理和分析快遞物流信息，提高工作效率和服務質量。
APISpace 是 國內一個較大的 API 供應平臺，提供多種類型的 API 接口，包括手機號碼歸屬地查詢 API 、天氣預報查詢API、手機在網狀態 API 、反欺詐（羊毛盾）API 以及當前比較熱門的 AI 繪畫 API 等等，感興趣的小伙伴可以去官網體驗一下。
用戶需要在 API 提供商的官方網站進行注冊，并申請 API 密鑰，獲得 API 接口調用的權限。
以 APISpace 為例，使用全國快遞物流 API 的步驟通常如下：
進入全國快遞物流 API 詳情頁，點擊【免費試用】或者【注冊】都可以獲取 API 密鑰。
訪問地址：
https://www.apispace.com/eolink/api/wlgj1/introduction?utm_source=tth&utm_content=high021&utm_term=qqwl
注冊成功后，我們在頁面導航菜單點擊【我的 API】進入【訪問控制】頁面，即可看到平臺提供的密鑰。
點擊免費試用成功后，系統會自動進入 API 的測試界面，如下圖，我們只需要填入快遞公司名稱以及單號就能獲取到完整的快遞軌跡信息
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、微信小程序等多種示例語言都整理出來了。
根據 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"
}
}下面的代碼是手敲的，有錯誤歡迎評論區指正~
<div class="" id="logistics-trace"></div>樣式覺得簡陋的話可以自行調整
<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 對返回的物流信息做處理
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;
}刀PPT提供免費總結報告PPT模板，貨輪集裝箱背景的港口物流PPT模板，模板是設計好的PPT模板直接打開編輯即可。
頁數：23頁
編號：PPT83361
大小：1.68MB
軟件：PowerPoint
格式：PPTX
比例：16:9
復制下載：
101dao.com/ppt/ppt-PPT83361.html
做這個項目的初衷是因為我去年在微信賣老家水果，好多朋友下單后都問我快遞單號，每天發貨后我都要挨個甄別這個人是哪個快遞信息，很麻煩一部小心就搞錯了。基于這件小事我有了自助快遞查詢的這個想法。將發貨的快遞信息導入到我的系統里，用戶訪問我的系統，通過輸入手機號就可以查看自己的快遞物流信息。 項目是去年8月寫的，一直擱淺在哪，最近無意間翻看我發的那篇文章自助快遞單號查詢閱讀量竟然都1.8w了，有圖有真相。
這著實讓我很震驚，看來自助快遞查詢這塊確實是個熱點。今天我就講一下我手擼的快遞查詢系統。
項目地址：github.com/hellowHuaai… 有興趣的可以直接下載源碼，覺得項目不錯的伙伴記得點個star，謝謝啦！
項目涉及到的技術棧有：
創建entity 創建快遞單實體類，屬性包括id,用戶名（userName）,電話（phone）,快遞單號（kuaidiNo），快遞公司（company），數據創建時間（createTime）。代碼如下：
@Data
@Builder
public class KuaiDi {
private Integer id;
/* 收件人姓名 */
private String userName;
/**收件人電話*/
private String phone;
/* 快遞單號*/
private String kuaidiNo;
/*快遞公司名稱（拼音）*/
private String company;
/*訂單創建時間*/
private Date createTime;
public KuaiDi(Integer id, String userName, String phone, String kuaidiNo, String company, Date createTime) {
this.id=id;
this.userName=userName;
this.phone=phone;
this.kuaidiNo=kuaidiNo;
this.company=company;
this.createTime=createTime;
}
public KuaiDi(Integer id, String userName, String phone, String kuaidiNo, String company) {
this.id=id;
this.userName=userName;
this.phone=phone;
this.kuaidiNo=kuaidiNo;
this.company=company;
}
}service，mapper是常規的增刪查改操作，就是保存快遞的基本信息在數據庫中，并可以對數據進行簡單的維護功能。詳細可參考項目源碼。接下來看核心代碼。
查詢快遞信息 快遞的基本信息存入數據庫，然后就是通過這些信息查詢快遞的詳細物流信息。這里我做過很多嘗試，想直接調用一些快遞公司的快遞信息查詢接口，但是都發現接口都有session，當session失效后就無法查詢到數據或者就查詢到的數據不正確。最終在網上找到一種付費的方案，使用快遞100接口。www.kuaidi100.com/ 查詢快遞的demo代碼如下:
public class SynQueryDemo {
/**
* 實時查詢請求地址
*/
private static final String SYNQUERY_URL="http://poll.kuaidi100.com/poll/query.do";
private String key; //授權key
private String customer; //實時查詢公司編號
public SynQueryDemo(String key, String customer) {
this.key=key;
this.customer=customer;
}
/**
* 實時查詢快遞單號
* @param com 快遞公司編碼
* @param num 快遞單號
* @param phone 手機號
* @param from 出發地城市
* @param to 目的地城市
* @param resultv2 開通區域解析功能：0-關閉；1-開通
* @return
*/
public String synQueryData(String com, String num, String phone, String from, String to, int resultv2) {
StringBuilder param=new StringBuilder("{");
param.append("\"com\":\"").append(com).append("\"");
param.append(",\"num\":\"").append(num).append("\"");
param.append(",\"phone\":\"").append(phone).append("\"");
param.append(",\"from\":\"").append(from).append("\"");
param.append(",\"to\":\"").append(to).append("\"");
if(1==resultv2) {
param.append(",\"resultv2\":1");
} else {
param.append(",\"resultv2\":0");
}
param.append("}");
Map<String, String> params=new HashMap<String, String>();
params.put("customer", this.customer);
String sign=MD5Utils.encode(param + this.key + this.customer);
params.put("sign", sign);
params.put("param", param.toString());
return this.post(params);
}
/**
* 發送post請求
*/
public String post(Map<String, String> params) {
StringBuffer response=new StringBuffer("");
BufferedReader reader=null;
try {
StringBuilder builder=new StringBuilder();
for (Map.Entry<String, String> param : params.entrySet()) {
if (builder.length() > 0) {
builder.append('&');
}
builder.append(URLEncoder.encode(param.getKey(), "UTF-8"));
builder.append('=');
builder.append(URLEncoder.encode(String.valueOf(param.getValue()), "UTF-8"));
}
byte[] bytes=builder.toString().getBytes("UTF-8");
URL url=new URL(SYNQUERY_URL);
HttpURLConnection conn=(HttpURLConnection) url.openConnection();
conn.setConnectTimeout(3000);
conn.setReadTimeout(3000);
conn.setRequestMethod("POST");
conn.setRequestProperty("accept", "*/*");
conn.setRequestProperty("connection", "Keep-Alive");
conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
conn.setRequestProperty("Content-Length", String.valueOf(bytes.length));
conn.setDoOutput(true);
conn.getOutputStream().write(bytes);
reader=new BufferedReader(new InputStreamReader(conn.getInputStream(), "UTF-8"));
String line="";
while ((line=reader.readLine()) !=null) {
response.append(line);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (null !=reader) {
reader.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
return response.toString();
}
}上面的代碼就是通過java代碼調用kuaidi100的查詢接口，這個查詢接口會通過快遞單號自動識別快遞是屬于哪個快遞公司，然后調用對應快遞公司接口獲取響應數據。付費購買接口使用權其實就是生成一個授權key和實時查詢公司編號customer，在線調用會做身份認證。這樣就可以獲取快遞信息的json數據了。我已經購買了100塊大洋的接口使用權，大家可直接調用快遞查詢接口。
controller代碼 快遞信息增刪查改的controller就不在列了，這里主要看下我對查詢快遞的接口進行了一次包裝處理。代碼如下:
@RestController
public class KuaiDiQueryController {
@Autowired
private KuaiDiService kuaiDiService;
@Autowired
private KuaiDiQueryService kuaiDiQueryService;
/**
* 返回json數據
* @param com
* @param no
* @return
*/
@GetMapping("/getKuaiDiInfoByJson")
@ResponseBody
public String queryKuadiInfoByJson(String com, String no) {
return kuaiDiQueryService.synQueryData(com, no,"", "", "", 0);
}
@GetMapping("/getKuaiDiInfoByPhone")
@ResponseBody
public Response queryKuaidiByPhone(String phone){
Response response=new Response();
if(StringUtils.isNotEmpty(phone)){
List<ResponseData> responseDataList=new ArrayList<>();
// 1.通過手機號查詢下面的所有訂單號
List<KuaiDi> kuaiDiList=kuaiDiService.getList("", phone);
if(!CollectionUtils.isEmpty(kuaiDiList)){
kuaiDiList.forEach(kuaiDi -> {
// 2.依次查出所有的訂單號
String responseDataStr=kuaiDiQueryService.synQueryData(kuaiDi.getCompany(), kuaiDi.getKuaidiNo(),"", "", "", 0);
ResponseData responseData=CommonUtils.convertJsonStr2Object(responseDataStr);
responseDataList.add(responseData);
});
}
// 3.組裝數據返回給前臺
response.setDataList(responseDataList);
}
return response;
}
}前端展示主要包括兩個頁面，管理員頁面和客戶頁面。管理員頁面功能包括快遞信息的新增，修改，刪除，分頁查詢，在線快遞物流信息接口。客戶頁面包括快遞信息的分頁查詢和在線快遞物流信息接口。所以主要看一下管理員頁面。
html頁面 html頁面引入了jQuery和Bootstrap，jQuery已經過時了，但是使用起來還是很方便的。
<html>
<head>
<title>快遞單號查詢</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootbox.js/4.4.0/bootbox.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
...
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-inverse navbar-fixed-top">
<a class="navbar-brand" href="http://mhtclub.com">我的個人主頁</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#collapseMenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="collapseMenu">
<ul class="nav navbar-nav">
<li class="nav-li">
<a href="https://github.com/hellowHuaairen/kuaidi" target="_blank">本項目github</a>
</li>
</ul>
</div>
</nav>
</div>
<h1 class="page-header">
快遞單號自助查詢
</h1>
<!-- 查詢工具欄 -->
<div class="form-inline">
<div class="form-group">
<label for="queryNameText">收件人姓名：</label>
<input id="queryNameText" class="form-control input-sm">
</div>
<div class="form-group">
<label for="queryPhoneText">收件人電話：</label>
<input id="queryPhoneText" class="form-control input-sm">
</div>
<button class="btn btn-primary btn-sm" id="queryBtn">查詢</button>
<button class="btn btn-primary btn-sm" id="resetBtn">重置</button>
<button class="btn btn-primary btn-sm" id="addBtn">新增</button>
</div>
<hr>
<table id="testTable"></table>
<!-- 查看訂單信息模態窗 -->
<div class="modal fade" id="viewModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">訂單信息</h4>
</div>
<div class="modal-body" id="viewDataList"></div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">關閉</button>
</div>
</div>
</div>
</div>
<!-- 新增模態窗 -->
<div class="modal fade" id="addModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">新增信息</h4>
</div>
<div class="modal-body">
<div class="form-inline">
</div>
<div class="form-group">
<label for="addNameText">收件人姓名：</label>
<input id="addNameText" class="form-control input-sm">
</div>
<div class="form-group">
<label for="addPhoneText">收件人電話：</label>
<input id="addPhoneText" class="form-control input-sm">
</div>
<div class="form-group">
<label for="addKuaiDiNoText">快遞單號：</label>
<input id="addKuaiDiNoText" class="form-control input-sm">
</div>
<div class="form-group">
<label for="addCompanyText">快遞公司（拼音）：</label>
<input id="addCompanyText" class="form-control input-sm">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">關閉</button>
<button class="btn btn-primary" id="saveAdd">保存</button>
</div>
</div>
</div>
</div>
<!-- 修改模態窗 -->
<div class="modal fade" id="modifyModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">修改信息</h4>
</div>
<div class="modal-body">
<div class="form-inline">
</div>
<div class="form-group">
<label for="modifyNameText">收件人姓名：</label>
<input id="modifyNameText" class="form-control input-sm">
</div>
<div class="form-group">
<label for="modifyPhoneText">收件人電話：</label>
<input id="modifyPhoneText" class="form-control input-sm">
</div>
<div class="form-group">
<label for="modifyKuaiDiNoText">快遞單號：</label>
<input id="modifyKuaiDiNoText" class="form-control input-sm">
</div>
<div class="form-group">
<label for="modifyCompanyText">快遞公司（拼音）：</label>
<input id="modifyCompanyText" class="form-control input-sm">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">關閉</button>
<button class="btn btn-primary" id="saveModify">保存</button>
</div>
</div>
</div>
</div>
</div> <!-- container-fluid -->
<script type="text/javascript" src="js/admin.js"></script>
</body>
</html>admin.js 這里說明一下前端我引入的jQuery，包括新增，修改，刪除，查詢的功能，查詢事件添加了對電話號碼的必填校驗。
var $testTable=$('#testTable');
$testTable.bootstrapTable({
url: 'getList',
queryParams: function (params) {
return {
offset: params.offset,
limit: params.limit,
userName: $('#queryNameText').val(),
phone: $('#queryPhoneText').val()
}
},
columns: [{
field: 'id',
title: '編號'
}, {
field: 'userName',
title: '收件人姓名'
}, {
field: 'phone',
title: '收件人電話'
}, {
field: 'company',
title: '快遞公司'
},{
field: 'kuaidiNo',
title: '快遞單號',
formatter: function (value, row, index) {
return [
'<a onclick="kuaidiRecordInfo(' + "'" + row.kuaidiNo + "','" + row.company + "')" + '">' + row.kuaidiNo +'</a>',
].join('');
},
}, {
formatter: function (value, row, index) {
return [
'<a href="javascript：modifyKuaiDi(' + row.id + ",'" + row.userName + "'," + row.phone + ",'" + row.kuaidiNo + "'" + ')">' +
'<i class="glyphicon glyphicon-pencil"></i>修改' +
'</a>',
'<a href="javascript：delKuaiDi(' + row.id + ')">' +
'<i class="glyphicon glyphicon-remove"></i>刪除' +
'</a>'
].join('');
},
title: '操作'
}],
striped: true,
pagination: true,
sidePagination: 'server',
pageSize: 10,
pageList: [5, 10, 25, 50, 100],
rowStyle: function (row, index) {
var ageClass='';
if (row.age < 18) {
ageClass='text-danger';
}
return {classes: ageClass}
},
});
// 設置bootbox中文
bootbox.setLocale('zh_CN');
var titleTip='提示';
function kuaidiRecordInfo(no, company) {
$('#viewModal').modal('show');
$.ajax({
type:'get',
url:'getKuaiDiInfoByJson?com='+ company +'&no=' + no,
cache:false,
dataType:'json',
success:function(result){
// 顯示詳細信息 發送請求通過單號
$("#viewDataList").empty();
console.log(result.data);
var dataList=result.data;
if(null !=dataList){
$("#viewDataList").append('<li class="accordion-navigation"><a href="#kuaidi'+ '">快遞單號：'+ result.nu +'</a><div id="kuaidi'+ '" class="content"></div></li>');
$("#kuaidi").append('<section class="result-box"><div id="resultTop" class="flex result-top"><time class="up">時間</time><span>地點和跟蹤進度</span></div><ul id="reordList'+'" class="result-list sortup"></ul></section>');
for(var i=0;i<dataList.length; i++){
var kuaiRecodList=dataList[i];
if( i==0){
$("#reordList").append('<li class="last finish"><div class="time"> '+ kuaiRecodList.ftime + '</div><div class="dot"></div><div class="text"> '+ kuaiRecodList.context +'</div></li>');
}else{
$("#reordList").append('<li class=""><div class="time"> '+ kuaiRecodList.ftime + '</div><div class="dot"></div><div class="text"> '+ kuaiRecodList.context +'</div></li>');
}
}
}
}
});
}
// 驗證姓名和地址是否為空
function verifyNameAndAddress(name, address) {
if (name !='' && address !='') {
return true;
}
return false;
}
function nullAlert() {
bootbox.alert({
title: titleTip,
message: '所有項均為必填！'
});
}
// 點擊查詢按鈕
$('#queryBtn').click(function () {
var age=$('#queryAgeText').val();
// 刷新并跳轉到第一頁
$testTable.bootstrapTable('selectPage', 1);
});
// 點擊重置按鈕，清空查詢條件并跳轉回第一頁
$('#resetBtn').click(function() {
$('.form-group :text').val('');
$testTable.bootstrapTable('selectPage', 1);
});
// 用于修改服務器資源
function exchangeData(path, id, userName, phone, kuaiDiNo, company) {
$.ajax({
url: path,
type: 'post',
data : {
id: id,
userName: userName,
phone: phone,
kuaiDiNo: kuaiDiNo,
company: company
},
success: function(res) {
bootbox.alert({
title: titleTip,
message: res.message
});
// 在每次提交操作后返回首頁
$testTable.bootstrapTable('selectPage', 1);
}
});
}
// 新增
$('#addBtn').click(function() {
$('#addNameText').val('');
$('#addPhoneText').val('');
$('#addKuaiDiNoText').val('');
$('#addCompanyText').val('');
$('#addModal').modal('show');
});
$('#saveAdd').click(function() {
$('#addModal').modal('hide');
bootbox.confirm({
title: titleTip,
message: '確認增加？',
callback: function (flag) {
if (flag) {
var userName=$('#addNameText').val();
var phone=$('#addPhoneText').val();
var kuaiDiNo=$('#addKuaiDiNoText').val();
var company=$('#addCompanyText').val();
if (verifyNameAndAddress(userName, kuaiDiNo)) {
exchangeData('addKuaiDi', null, userName, phone, kuaiDiNo, company);
} else {
nullAlert();
}
}
}
});
});
var mid;
// 修改
function modifyKuaiDi(id, name, age, address) {
mid=id;
$('#modifyNameText').val(name);
$('#modifyPhoneText').val(age);
$('#modifyKuaiDiNoText').val(address);
$('#modifyCompanyText').val(address);
$('#modifyModal').modal('show');
}
$('#saveModify').click(function() {
$('#modifyModal').modal('hide');
bootbox.confirm({
title: titleTip,
message: '確認修改？',
callback: function (flag) {
if (flag) {
var userName=$('#modifyNameText').val();
var phone=$('#modifyPhoneText').val();
var kuaiDiNo=$('#modifyKuaiDiNoText').val();
var company=$('#modifyCompanyText').val();
if (verifyNameAndAddress(userName, phone)) {
exchangeData('modifyKuaiDi', mid, userName, phone, kuaiDiNo, company);
} else {
nullAlert();
}
}
}
});
});
// 刪除
function delKuaiDi(id) {
bootbox.confirm({
title: titleTip,
message: '確認刪除？',
callback: function(flag) {
if (flag) {
exchangeData("delKuaiDi", id);
}
}
});
修改配置文件 項目配置文件src/resources/application.properties，根據實際情況修改對應的數據庫連接信息。
#MySQL配置
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.url=jdbc:mysql://localhost:3306/kuaidi?useUnicode=true&characterEncoding=UTF-8
spring.datasource.username=root #數據庫賬號
spring.datasource.password=root #數據庫密碼
#MyBatis日志配置
mybatis.mapperLocations=classpath:mapper/*.xml
mybatis.config-location=classpath:/config/mybatis-config.xml
#端口配置
server.port=8082
# 定位模板的目錄
spring.mvc.view.prefix=classpath:/templates/
# 給返回的頁面添加后綴名
spring.mvc.view.suffix=.html創建數據庫表 表結構如下:
DROP TABLE IF EXISTS `kuaidi`;
CREATE TABLE `kuaidi` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`user_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '收件人姓名',
`phone` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '收件人電話',
`kuaidi_no` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '快遞單號',
`company` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '快遞公司名稱拼音',
`create_time` datetime(0) NULL DEFAULT NULL,
PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=10 CHARACTER SET=utf8 COLLATE=utf8_general_ci ROW_FORMAT=Dynamic;運行 將項目導入Idea工具，找到com.wangzg.kuaidi.KuaiDiApplication文件，執行main方法即可，如下圖:
上傳安裝包 在服務器創建/usr/myworkspace，執行下面命令可直接創建:
mkdir -p /usr/myworkspace
復制代碼下載相關文件，上傳到服務器/usr/myworkspace。下載地址：github.com/hellowHuaai… 文件主要包括：
初始化數據庫 打開Navicat工具，選中數據庫，右鍵選擇運行SQL文件...,具體操作，這樣數據庫就初始化完成。
運行項目
在服務器/usr/myworkspace目錄下，執行如下命令，即可運行項目:
chmod +x *.sh #給所有 .sh文件添加執行權限
./start.shDocker 容器化部署項目，需要創建一個 mysql 的容器，創建kuaidi的容器，再初始化一下數據庫。
創建數據庫容器 代碼如下:
docker run -d --name mysql5.7 -e MYSQL_ROOT_PASSWORD=root -it -p 3306:3306 daocloud.io/library/mysql:5.7.7-rc導入數據庫腳本 數據庫腳本kuaidi.sql內容如下：
create DATABASE kuaidi;
use kuaidi;
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS=0;
DROP TABLE IF EXISTS `kuaidi`;
CREATE TABLE `kuaidi` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`user_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '收件人姓名',
`phone` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '收件人電話',
`kuaidi_no` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '快遞單號',
`company` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '快遞公司名稱拼音',
`create_time` datetime(0) NULL DEFAULT NULL,
PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=10 CHARACTER SET=utf8 COLLATE=utf8_general_ci ROW_FORMAT=Dynamic;然后執行下面命令，就可以導入kuaidi.sql腳本:
docker exec -i mysql5.7 mysql -uroot -proot mysql < kuaidi.sql創建kuaidi容器 執行下面命令就可以創建容器:
docker run -d -p 9082:8082 -v application.properties:/home/conf/application.properties --name kuaidi1 huaairen/kuaidi:latest注:application.properties文件為項目的配置文件，在src/main/resources目錄下；huaairen/kuaidi:latest是我打包好的鏡像，直接下載就可以。
項目功能還特別簡陋，很多功能需要開發和完善。如果你也遇到類似的問題我們可以一起討論，合作共贏哦！
作者：不安分的猿人
鏈接：https://juejin.im/post/5e9313ece51d4546c62f9ac4
來源：掘金
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
