简单的快递服务器 - Javascript (1)

📌 相关文章

📜 简单的快递服务器 - Javascript (1)

📅 最后修改于: 2023-12-03 14:56:42.744000 🧑 作者: Mango

简单的快递服务器 - Javascript

本项目演示了如何使用 Javascript 和 Express.js 建立一个简单的快递服务器，即通过发送 HTTP 请求来查询快递物流信息。

前置知识

在开始之前，你需要了解以下基础知识：

HTML
CSS
Javascript
Node.js
Express.js
HTTP 请求与响应

使用方法

首先，你需要安装 Node.js 和 Express.js。然后，下载本项目的代码，并在项目目录下运行以下命令：

npm install
node app.js

访问 localhost:3000 即可开始使用。

代码实现

搭建基本框架

我们需要先搭建一个基本的 Express.js 服务器，代码如下：

const express = require('express');
const app = express();

app.use(express.static('public'));

app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

这段代码创建了一个 Express 实例，并设置静态资源路径为 public 目录（稍后会创建该目录）。同时，将服务器监听端口设置为 3000。

查询物流信息

我们可以使用第三方快递查询 API 来获取物流信息。这里我们使用快递鸟提供的 API。

首先，在 public 目录下创建一个 index.html 文件，用来展示查询结果。代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>简单的快递服务器</title>
  </head>
  <body>
    <form action="/query" method="post">
      <label for="num">请输入快递单号：</label>
      <input type="text" id="num" name="num">
      <button type="submit">查询</button>
    </form>
    <div id="result"></div>
  </body>
</html>

这段代码创建了一个包含单号输入框和查询按钮的表单，并向 /query 发送 POST 请求。同时，创建一个 div 元素用来展示查询结果。

然后，在服务器端接收该请求，代码如下：

const request = require('request');

app.post('/query', (req, res) => {
  const num = req.body.num;
  const options = {
    url:
      'http://api.kdniao.com/Ebusiness/EbusinessOrderHandle.aspx',
    form: {
      RequestData: JSON.stringify({
        OrderCode: '',
        ShipperCode: 'SF',
        LogisticCode: num,
      }),
      EBusinessID: '123456',
      RequestType: '1002',
      DataSign: '',
      DataType: '2',
    },
  };

  request.post(options, (err, response, body) => {
    if (err) {
      console.error(err);
      res.end('<p>查询失败，请稍后再试。</p>');
    } else {
      const data = JSON.parse(body);
      if (data.Success === true) {
        res.redirect(`/result?num=${num}`);
      } else {
        res.end('<p>查询失败，请稍后再试。</p>');
      }
    }
  });
});

这段代码使用 request 模块向快递鸟 API 发送 POST 请求，并将查询结果存储在 data 变量中。若查询成功，则将单号传递给 /result 路由；否则，返回查询失败信息。

展示物流信息

接下来，我们需要通过查询结果展示物流信息。在服务器端接收 /result 路由请求，代码如下：

const queryType = require('./queryType');

app.get('/result', (req, res) => {
  const num = req.query.num;
  const options = {
    url:
      'http://api.kdniao.com/Ebusiness/EbusinessOrderHandle.aspx',
    form: {
      RequestData: JSON.stringify({
        OrderCode: '',
        ShipperCode: 'SF',
        LogisticCode: num,
      }),
      EBusinessID: '123456',
      RequestType: '1002',
      DataSign: '',
      DataType: '2',
    },
  };

  request.post(options, (err, response, body) => {
    if (err) {
      console.error(err);
      res.end('<p>查询失败，请稍后再试。</p>');
    } else {
      const data = JSON.parse(body);
      if (data.Success === true) {
        const info = data.Traces.reverse().map((item) => ({
          time: item.AcceptTime,
          location: item.AcceptStation,
        }));
        const type = queryType.find((item) =>
          item.code === data.State
        );
        res.render('result', { num, info, type });
      } else {
        res.end('<p>查询失败，请稍后再试。</p>');
      }
    }
  });
});

这段代码与查询物流信息段的代码类似，通过单号向 API 发送 POST 请求，并将查询结果存储在 data 变量中。若查询成功，则将单号、物流信息和快递状态（包括状态码和说明）传递给 result 视图进行渲染；否则，返回查询失败信息。

在 views 目录下创建一个 result.ejs 文件，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>查询结果</title>
    <style>
      table {
        border-collapse: collapse;
      }
      th, td {
        border: 1px solid black;
        padding: 6px;
      }
    </style>
  </head>
  <body>
    <h1>查询结果</h1>
    <p>快递单号： <%= num %> </p>
    <p>快递状态： <%= type.name %> （<%= type.desc %>）</p>
    <table>
      <thead>
        <tr>
          <th>时间</th>
          <th>地点</th>
        </tr>
      </thead>
      <tbody>
        <% info.forEach((item) => { %>
          <tr>
            <td><%= item.time %></td>
            <td><%= item.location %></td>
          </tr>
        <% }); %>
      </tbody>
    </table>
  </body>
</html>

这段代码展示了查询结果的页面结构和样式，包括单号、状态和物流信息（时间和地点）。

总结

通过本项目，我们了解了如何使用 Javascript 和 Express.js 建立一个简单的快递服务器，即通过发送 HTTP 请求来查询快递物流信息；同时，了解了 HTTP 请求与响应、静态资源路径、Post 请求和响应、快递鸟 API 和 Ejs 模板引擎的基本用法。