Bagaimana untuk melakukan penghantaran ekspres dalam projek vue

Dengan perkembangan pesat e-dagang, permintaan untuk perniagaan penghantaran ekspres juga semakin meningkat. Banyak syarikat mengambil penghantaran ekspres sebagai perniagaan utama mereka, dan merealisasikan fungsi mel ekspres telah menjadi fungsi yang diperlukan bagi banyak syarikat. Artikel ini akan memperkenalkan cara melaksanakan fungsi penghantaran ekspres dalam projek Vue untuk membantu pembangun melengkapkan keperluan perniagaan berkaitan dengan lebih baik.

1. Pilih Express API

Untuk melaksanakan fungsi mel ekspres dalam projek Vue, anda perlu menggunakan API ekspres pihak ketiga. Pada masa ini, terdapat banyak API ekspres pilihan di pasaran, seperti data agregat, Express 100, dsb. Pembangun boleh memilih API ekspres yang sesuai dengan mereka berdasarkan situasi sebenar projek mereka.

2. Antara Muka Pertanyaan Ekspres

Langkah pertama untuk melaksanakan fungsi mel ekspres adalah untuk menanyakan maklumat penghantaran ekspres. Secara amnya, API ekspres yang dipilih akan menyediakan antara muka sedemikian, dan format data yang dikembalikan ialah format JSON. Untuk membuat panggilan antara muka dalam projek Vue, anda boleh menggunakan perpustakaan permintaan rangkaian seperti axios untuk mendapatkan data. Contoh antara muka mudah untuk menanyakan maklumat penghantaran ekspres:

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. Antara muka pesanan ekspres

Selepas menyoal maklumat penghantaran ekspres, fungsi seterusnya yang perlu kami sediakan kepada pengguna ialah membuat pesanan penghantaran ekspres. Berbanding dengan menanyakan maklumat penghantaran ekspres, adalah lebih sukar untuk membuat pesanan penghantaran ekspres. Maklumat yang perlu dimasukkan semasa membuat pesanan secara amnya termasuk maklumat penghantar, maklumat penerima, syarikat kurier, nombor kurier, nombor telefon mudah alih, dsb. Menurut maklumat yang diisi oleh pengguna, data dihantar ke antara muka pesanan API Ekspres untuk menyelesaikan operasi pesanan.

Format data pesanan biasanya juga dalam format JSON dan data tersebut perlu dikapsulkan ke dalam objek JSON. Menurut dokumen antara muka pesanan yang disediakan oleh API ekspres, tentukan contoh antara muka pesanan:

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. Paparan senarai ekspres

Untuk memudahkan penjejakan ekspres berikutnya dan pertanyaan, kita perlu menggunakan Vue Bingkai memaparkan maklumat penghantaran ekspres. Sebelum data dipaparkan, maklumat kurier yang ditanya dan maklumat pesanan perlu disimpan. Anda boleh menggunakan VueX untuk berkongsi keadaan antara komponen Untuk projek yang lebih kecil, anda boleh terus menggunakan pengikatan data Vue untuk mencapainya.

Paparan senarai penghantaran ekspres secara amnya dibahagikan kepada dua jenis: tidak ditandatangani dan ditandatangani. Paparan klasifikasi boleh dilakukan dengan menilai status penghantaran ekspres, seperti berikut:

Tidak ditandatangani untuk:

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

Ditandatangani untuk:

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

5. Pertanyaan status penghantaran ekspres

Untuk memudahkan pengguna menjejaki status penghantaran ekspres pada bila-bila masa, kami perlu menyediakan pintu masuk untuk menanyakan status penghantaran ekspres. Begitu juga, apabila menanyakan status ekspres, anda perlu memanggil antara muka pertanyaan ekspres yang disediakan oleh API ekspres dan format data yang dikembalikan juga dalam format JSON. Contoh pertanyaan antara muka status penghantaran ekspres:

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. Ringkasan

Artikel ini memperkenalkan kaedah melaksanakan fungsi mel ekspres dalam projek Vue. Melalui panggilan API penghantaran ekspres pihak ketiga dan paparan data rangka kerja Vue, kami boleh melaksanakan fungsi penghantaran ekspres dengan cepat dan mudah, yang memudahkan pengguna menggunakan dan menjejak status penghantaran ekspres.

Atas ialah kandungan terperinci Bagaimana untuk melakukan penghantaran ekspres dalam projek vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!