Comment faire une livraison express dans le projet vue

Avec le développement rapide du commerce électronique, la demande de services de livraison express augmente également. De nombreuses entreprises font de la livraison express leur activité principale et la réalisation de fonctions de courrier express est devenue une fonction nécessaire pour de nombreuses entreprises. Cet article présentera comment implémenter la fonction de livraison express dans le projet Vue pour aider les développeurs à mieux répondre aux besoins commerciaux associés.

1. Choisissez l'API Express

Pour implémenter la fonction de mailing express dans le projet Vue, vous devez utiliser une API express tierce. Actuellement, il existe de nombreuses API express facultatives sur le marché, telles que les données agrégées, Express 100, etc. Les développeurs peuvent choisir l’API express qui leur convient en fonction de la situation réelle de leurs projets.

2. Interface de requête express

La première étape pour réaliser la fonction de mailing express consiste à interroger les informations express. Il est nécessaire de fournir aux utilisateurs une interface pour interroger les informations express. Généralement, l'API express sélectionnée fournira une telle interface et le format de données renvoyé est le format JSON. Pour effectuer des appels d'interface dans le projet Vue, vous pouvez utiliser des bibliothèques de requêtes réseau telles que axios pour obtenir des données. Exemple d'interface simple pour interroger les informations de livraison express :

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. Interface de commande express

Après avoir interrogé les informations de livraison express, la prochaine fonction que nous devons fournir aux utilisateurs est de passer des commandes de livraison express. Par rapport à la requête d’informations sur la livraison express, il est plus difficile de passer une commande de livraison express. Les informations qui doivent être saisies lors du passage d'une commande comprennent généralement les informations sur l'expéditeur, les informations sur le destinataire, la société de messagerie, le numéro de messagerie, le numéro de téléphone portable, etc. Selon les informations renseignées par l'utilisateur, les données sont transmises à l'interface de commande de l'API express pour finaliser l'opération de commande.

Le format des données pour passer des commandes est généralement également au format JSON et les données doivent être encapsulées dans un objet JSON. Selon le document d'interface de commande fourni par l'API express, définissez l'exemple d'interface de commande :

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. Affichage de la liste express

Afin de faciliter le suivi et la demande express ultérieurs des utilisateurs, nous devons afficher les informations express via Vue cadre. Avant l'affichage des données, les informations de messagerie demandées et les informations de commande doivent être stockées. Vous pouvez utiliser VueX pour partager l'état entre les composants. Pour les petits projets, vous pouvez directement utiliser la liaison de données de Vue pour y parvenir.

L'affichage de la liste de livraison express est généralement divisé en deux types : non signé et signé. Il peut être classé et affiché en jugeant le statut de l'express, comme suit :

Non signé :

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

Signé :

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

5. Requête de statut express

Afin de permettre aux utilisateurs de suivre l'état de l'express à tout moment temps, nous devons configurer une requête pour l’entrée de statut express. De même, lors de l'interrogation du statut express, vous devez appeler l'interface de requête express fournie par l'API express, et le format des données renvoyées est également au format JSON. Exemple d'interface pour interroger le statut de livraison express :

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. Résumé

Cet article présente comment implémenter la fonction de mailing express dans le projet Vue. Grâce aux appels API de livraison express tiers et à l'affichage des données du framework Vue, nous pouvons mettre en œuvre rapidement et facilement la fonction de livraison express, qui permet aux utilisateurs d'utiliser et de suivre facilement l'état de la livraison express.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!