Vueプロジェクトで速達配信を行う方法

電子商取引の急速な発展に伴い、速達ビジネスの需要も高まっています。速達を主力事業としている企業も多く、速達機能の実現は多くの企業にとって必要な機能となっています。この記事では、開発者が関連するビジネス ニーズをより適切に満たせるように、Vue プロジェクトに速達機能を実装する方法を紹介します。

1. Express API の選択

Vue プロジェクトにエクスプレス メール機能を実装するには、サードパーティのエクスプレス API を使用する必要があります。現在、市場には、集約データ、Express 100 など、オプションの Express API が多数存在します。開発者は、プロジェクトの実際の状況に基づいて、適切な Express API を選択できます。

2. Express Query インターフェース

速達機能を実現するための最初のステップは、速達情報を照会することであり、速達情報を照会するためのインターフェースをユーザーに提供する必要があります。通常、選択した高速 API はそのようなインターフェイスを提供し、返されるデータ形式は JSON 形式です。 Vue プロジェクトでインターフェイス呼び出しを行うには、axios などのネットワーク リクエスト ライブラリを使用してデータを取得できます。速達情報をクエリするための簡単なインターフェイスの例:

getData() {
   const url = "https://apis.juhe.cn/express/query"; // 接口地址
   const params = {
      com: "shentong",  // 快递公司的编码
      no: "1234567890", // 快递单号
      key: "*************" // 接口的key
   };
   axios.get(url, {params})
      .then(response => {
         console.log(response.data); // 打印接口返回的数据
      })
      .catch(error => {
         console.log(error);
      });
}

3. 速達注文インターフェイス

速達情報をクエリした後、ユーザーに提供する必要がある次の機能は、速達注文を行うことです。速達情報のクエリに比べて、速達注文を行うことはより困難です。注文時に入力する必要がある情報には、通常、送り主情報、受取人情報、宅配会社、宅配便番号、携帯電話番号などが含まれます。ユーザーが入力した情報に従って、データは Express API の注文インターフェイスに渡され、注文操作が完了します。

注文するためのデータ形式も通常は JSON 形式であり、データは JSON オブジェクトにカプセル化する必要があります。エクスプレス API によって提供される注文インターフェースのドキュメントに従って、注文インターフェースの例を定義します。

submitOrder() {
   const url = "https://apis.juhe.cn/express/order"; // 接口地址
   const params = {
      sendMan: "张三",
      sendMobile: "13312345678",
      sendAddress: "广东省深圳市罗湖区",
      receiveMan: "李四",
      receiveMobile: "13512345678",
      receiveAddress: "湖北省武汉市洪山区",
      courierCode: "shentong",
      courierNumber: "1234567890",
      key: "*************"
   };
   axios.post(url, params)
      .then(response => {
         console.log(response.data); // 打印接口返回的数据
      })
      .catch(error => {
         console.log(error);
      });
}

4. エクスプレス リストの表示

ユーザーのその後のエクスプレス追跡とクエリを容易にするために、速達情報を表示するには、Vue フレームワークを使用する必要があります。データを表示する前に、クエリされた配送業者情報と注文情報を保存する必要があります。 VueX を使用してコンポーネント間で状態を共有できます。小規模なプロジェクトの場合は、Vue のデータ バインディングを直接使用してそれを実現できます。

速達一覧表示は、大きく分けて無署名と署名の2種類に分かれます。速達状況の判定により、以下のように分類表示が可能です。

未署名:

<ul>
   <li v-for="item in uncollected">
      <p>快递公司：{{item.com}}</p>
      <p>快递单号：{{item.no}}</p>
      <p>状态：{{item.state}}</p>
   </li>
</ul>

署名済み:

<ul>
   <li v-for="item in collected">
      <p>快递公司：{{item.com}}</p>
      <p>快递单号：{{item.no}}</p>
      <p>状态：{{item.state}}</p>
   </li>
</ul>

5. 速達状況照会

ユーザーがいつでも速達の状況を追跡できるようにするために、速達の状況を問い合わせるための入り口を設定する必要があります。同様に、エクスプレス ステータスをクエリする場合は、エクスプレス API によって提供されるエクスプレス クエリ インターフェイスを呼び出す必要があります。返されるデータ形式も JSON 形式です。速達状況を問い合わせるインターフェースの例:

getExpressStatus() {
   const url = "https://apis.juhe.cn/express/query"; // 接口地址
   const params = {
      com: "shentong",  // 快递公司的编码
      no: "1234567890", // 快递单号
      key: "*************" // 接口的key
   };
   axios.get(url, {params})
      .then(response => {
         console.log(response.data); // 打印接口返回的数据
      })
      .catch(error => {
         console.log(error);
      });
}

6. まとめ

この記事では、Vue プロジェクトに速達メール機能を実装する方法を紹介します。サードパーティの速達 API 呼び出しと Vue フレームワーク データ表示を通じて、速達機能を迅速かつ簡単に実装でき、ユーザーが速達ステータスを使用および追跡するのが便利になります。

以上がVueプロジェクトで速達配信を行う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。