手撸的一个快递查询系统,竟然阅读量过1.8w


手撸的一个快递查询系统,竟然阅读量过1.8w

一、目的

做这个项目的初衷是因为我去年在微信卖老家水果,好多朋友下单后都问我快递单号,每天发货后我都要挨个甄别这个人是哪个快递信息,很麻烦一部小心就搞错了。基于这件小事我有了自助快递查询的这个想法。将发货的快递信息导入到我的系统里,用户访问我的系统,通过输入手机号就可以查看自己的快递物流信息。 项目是去年8月写的,一直搁浅在哪,最近无意间翻看我发的那篇文章自助快递单号查询阅读量竟然都1.8w了,有图有真相。

手撸的一个快递查询系统,竟然阅读量过1.8w

这着实让我很震惊,看来自助快递查询这块确实是个热点。今天我就讲一下我手撸的快递查询系统。

二、开发

项目地址:github.com/hellowHuaai… 有兴趣的可以直接下载源码,觉得项目不错的伙伴记得点个star,谢谢啦!

2.1技术栈

项目涉及到的技术栈有:

  • SpringBoot: 一款 Java 微服务框架。Spring boot 是 Spring 家族中的一个新框架,它用来简化 Spring 应用程序的创建和开发。
  • Mybitas: 一款ORM框架,即对象关系映射。ORM框架的作用是把持久化对象的保存、修改、删除等操作,转换成对数据库的操作。
  • Jquery:一个轻量级的写的少,做的多的 JavaScript 函数库。
  • Bootstrap:Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

2.2后端开发

创建entity 创建快递单实体类,属性包括id,用户名(userName),电话(phone),快递单号(kuaidiNo),快递公司(company),数据创建时间(createTime)。代码如下:

<code>@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;
}
}/<code>

service,mapper是常规的增删查改操作,就是保存快递的基本信息在数据库中,并可以对数据进行简单的维护功能。详细可参考项目源码。接下来看核心代码。

查询快递信息 快递的基本信息存入数据库,然后就是通过这些信息查询快递的详细物流信息。这里我做过很多尝试,想直接调用一些快递公司的快递信息查询接口,但是都发现接口都有session,当session失效后就无法查询到数据或者就查询到的数据不正确。最终在网上找到一种付费的方案,使用快递100接口。www.kuaidi100.com/ 查询快递的demo代码如下:

<code>public class SynQueryDemo {

\t/**
\t * 实时查询请求地址
\t */
\tprivate static final String SYNQUERY_URL = "http://poll.kuaidi100.com/poll/query.do";
\t
\tprivate String key;\t\t\t//授权key
\tprivate String customer;\t//实时查询公司编号

\tpublic SynQueryDemo(String key, String customer) {
\t\tthis.key = key;
\t\tthis.customer = customer;
\t}
\t
\t/**
\t * 实时查询快递单号
\t * @param com\t\t\t快递公司编码
\t * @param num\t\t\t快递单号
\t * @param phone\t\t\t手机号
\t * @param from\t\t\t出发地城市
\t * @param to\t\t\t目的地城市
\t * @param resultv2\t\t开通区域解析功能:0-关闭;1-开通
\t * @return
\t */
\tpublic String synQueryData(String com, String num, String phone, String from, String to, int resultv2) {

\t\tStringBuilder param = new StringBuilder("{");
\t\tparam.append("\"com\":\"").append(com).append("\"");
\t\tparam.append(",\"num\":\"").append(num).append("\"");
\t\tparam.append(",\"phone\":\"").append(phone).append("\"");
\t\tparam.append(",\"from\":\"").append(from).append("\"");
\t\tparam.append(",\"to\":\"").append(to).append("\"");
\t\tif(1 == resultv2) {
\t\t\tparam.append(",\"resultv2\":1");
\t\t} else {
\t\t\tparam.append(",\"resultv2\":0");
\t\t}
\t\tparam.append("}");
\t\t
\t\tMap<string> params = new HashMap<string>();
\t\tparams.put("customer", this.customer);
\t\tString sign = MD5Utils.encode(param + this.key + this.customer);

\t\tparams.put("sign", sign);
\t\tparams.put("param", param.toString());
\t\t
\t\treturn this.post(params);
\t}
\t
\t/**
\t * 发送post请求
\t */
\tpublic String post(Map<string> params) {
\t\tStringBuffer response = new StringBuffer("");
\t\t
\t\tBufferedReader reader = null;
\t\ttry {
\t\t\tStringBuilder builder = new StringBuilder();
\t\t\tfor (Map.Entry<string> param : params.entrySet()) {
\t\t\t\tif (builder.length() > 0) {
\t\t\t\t\tbuilder.append('&');
\t\t\t\t}
\t\t\t\tbuilder.append(URLEncoder.encode(param.getKey(), "UTF-8"));
\t\t\t\tbuilder.append('=');
\t\t\t\tbuilder.append(URLEncoder.encode(String.valueOf(param.getValue()), "UTF-8"));
\t\t\t}
\t\t\tbyte[] bytes = builder.toString().getBytes("UTF-8");

\t\t\tURL url = new URL(SYNQUERY_URL);
\t\t\tHttpURLConnection conn = (HttpURLConnection) url.openConnection();
\t\t\tconn.setConnectTimeout(3000);
\t\t\tconn.setReadTimeout(3000);
\t\t\tconn.setRequestMethod("POST");
\t\t\tconn.setRequestProperty("accept", "*/*");
conn.setRequestProperty("connection", "Keep-Alive");
\t\t\tconn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
\t\t\tconn.setRequestProperty("Content-Length", String.valueOf(bytes.length));
\t\t\tconn.setDoOutput(true);
\t\t\tconn.getOutputStream().write(bytes);

\t\t\treader = new BufferedReader(new InputStreamReader(conn.getInputStream(), "UTF-8"));
\t\t\t
\t\t\tString line = "";
while ((line = reader.readLine()) != null) {
\tresponse.append(line);
}
\t\t} catch (Exception e) {
\t\t\te.printStackTrace();
\t\t} finally {
\t\t\ttry {
\t\t\t\tif (null != reader) {
\t\t\t\t\treader.close();
\t\t\t\t}

\t\t\t} catch (IOException e) {
\t\t\t\te.printStackTrace();
\t\t\t}
\t\t}
\t\t
\t\treturn response.toString();
\t}
}/<string>/<string>/<string>/<string>/<code>

上面的代码就是通过java代码调用kuaidi100的查询接口,这个查询接口会通过快递单号自动识别快递是属于哪个快递公司,然后调用对应快递公司接口获取响应数据。付费购买接口使用权其实就是生成一个授权key和实时查询公司编号customer,在线调用会做身份认证。这样就可以获取快递信息的json数据了。我已经购买了100块大洋的接口使用权,大家可直接调用快递查询接口。

controller代码 快递信息增删查改的controller就不在列了,这里主要看下我对查询快递的接口进行了一次包装处理。代码如下:

<code>@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;
}
}/<kuaidi>/<responsedata>/<code>

2.3前端开发

前端展示主要包括两个页面,管理员页面和客户页面。管理员页面功能包括快递信息的新增,修改,删除,分页查询,在线快递物流信息接口。客户页面包括快递信息的分页查询和在线快递物流信息接口。所以主要看一下管理员页面。

html页面

html页面引入了jQuery和Bootstrap,jQuery已经过时了,但是使用起来还是很方便的。

<code>

<title>快递单号查询/<title>

<link>


<link>


...









快递单号自助查询






<label>收件人姓名:/<label>



<label>收件人电话:/<label>


<button>查询/<button>
<button>重置/<button>
<button>新增/<button>




<table>






/<code>

admin.js 这里说明一下前端我引入的jQuery,包括新增,修改,删除,查询的功能,查询事件添加了对电话号码的必填校验。

<code>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 [
\t\t\t\t' ',
].join('');
},
}, {
formatter: function (value, row, index) {
return [
' ',
' '
].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){
// 显示详细信息 发送请求通过单号
\t\t\t$("#viewDataList").empty();
console.log(result.data);
var dataList = result.data;
if(null != dataList){
\t\t\t\t$("#viewDataList").append('
  • ');
    \t\t\t\t$("#kuaidi").append('
    <time>时间/<time>地点和跟踪进度
      /');
      for(var i=0;i<datalist.length> var kuaiRecodList = dataList[i];
      if( i == 0){
      $("#reordList").append('
    • '+ kuaiRecodList.ftime + '
      '+ kuaiRecodList.context +'
    • ');
      }else{
      $("#reordList").append('
    • '+ kuaiRecodList.ftime + '
      '+ kuaiRecodList.context +'
    • ');
      }
      }
      }
      }
      });
      }

      // 验证姓名和地址是否为空
      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('');
      \t $('#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);
      \t$('#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);
      }
      }
      });
      /<datalist.length>/<code>

    2.4运行项目

    修改配置文件 项目配置文件src/resources/application.properties,根据实际情况修改对应的数据库连接信息。

    <code>#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/<code>

    创建数据库表 表结构如下:

    <code>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;/<code>

    运行 将项目导入Idea工具,找到com.wangzg.kuaidi.KuaiDiApplication文件,执行main方法即可,如下图:

    手撸的一个快递查询系统,竟然阅读量过1.8w

    三、部署

    3.1 jar部署

    上传安装包 在服务器创建/usr/myworkspace,执行下面命令可直接创建:

    <code>mkdir -p /usr/myworkspace
    复制代码/<code>

    下载相关文件,上传到服务器/usr/myworkspace。下载地址:github.com/hellowHuaai… 文件主要包括:

    • application.properties 说明:项目配置文件,可能会涉及到修改服务器端口,数据库访问、端口、账号、密码等。
    • kuaidi.jar 说明:后端服务的可执行jar文件。
    • kuaidi.sql 说明:数据库初始化脚本。
    • start.sh 说明: 启动服务器shell脚本。
    • stop.sh 说明: 停止服务器shell脚本。

    初始化数据库 打开Navicat工具,选中数据库,右键选择运行SQL文件...,具体操作,这样数据库就初始化完成。

    手撸的一个快递查询系统,竟然阅读量过1.8w

    运行项目
    在服务器/usr/myworkspace目录下,执行如下命令,即可运行项目:

    <code>chmod +x *.sh #给所有 .sh文件添加执行权限
    ./start.sh/<code>

    3.2 Docker部署

    Docker 容器化部署项目,需要创建一个 mysql 的容器,创建kuaidi的容器,再初始化一下数据库。

    创建数据库容器 代码如下:

    <code>docker run -d --name mysql5.7 -e MYSQL_ROOT_PASSWORD=root -it -p 3306:3306 daocloud.io/library/mysql:5.7.7-rc/<code>

    导入数据库脚本 数据库脚本kuaidi.sql内容如下:

    <code>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;/<code>

    然后执行下面命令,就可以导入kuaidi.sql脚本:

    <code>docker exec -i mysql5.7 mysql -uroot -proot mysql < kuaidi.sql/<code>

    创建kuaidi容器 执行下面命令就可以创建容器:

    <code>docker run -d -p 9082:8082 -v application.properties:/home/conf/application.properties --name kuaidi1 huaairen/kuaidi:latest/<code>

    注:application.properties文件为项目的配置文件,在src/main/resources目录下;huaairen/kuaidi:latest是我打包好的镜像,直接下载就可以。

    四、最后

    项目功能还特别简陋,很多功能需要开发和完善。如果你也遇到类似的问题我们可以一起讨论,合作共赢哦!

    链接:https://juejin.im/post/5e9313ece51d4546c62f9ac4


    分享到:


    相關文章: