首頁 >web前端 >js教程 >如何使用 REST API 建立 Covid19 國家/地區狀態專案？

如何使用 REST API 建立 Covid19 國家/地區狀態專案？

PHPz轉載: 2023-08-28 15:25:11837瀏覽

如何使用 REST API 创建 Covid19 国家/地区状态项目？

在建立專案之前，我們會先討論 REST API。 REST 是一種軟體架構風格和有助於製作線上服務的標準集合。表述性狀態傳輸（Representational State Transfer）的全名是REST。同時，應用程式介面（API）允許兩個或多個電腦程式之間進行通訊。它是一個為其他軟體程式提供服務的軟體介面。使用者必須遵循基於 HTTP（超文本傳輸協定）的 REST API 規則來存取 Web 服務。

傳統的 HTTP 方法（如 GET、POST、PUT 和 DELETE）存取和修改 REST API 中的資料物件等資源。這些由 URI（統一資源標識符）標識。可以使用 API 以多種格式傳送數據，包括 XML 和 JSON。可以使用 REST 建立小型、快速且易於擴展的 Web 服務。它是為了與萬維網的 HTTP 協定進行通訊而開發的。由於其以標準協定為基礎，REST API 可供各種用戶端使用，包括 Web 瀏覽器、行動應用程式和其他伺服器。

REST API 經常用於 Web 和行動應用程式開發，因為它為應用程式提供了一種簡單且標準化的方法來存取和更改伺服器上的資源。

創建 Covid19 國家明智狀態項目的步驟

使用 REST API，人們可以按照以下基本步驟建立一個 COVID-19 國家/地區狀態專案 -

第 1 步 - 研究可靠的 API，提供按國家/地區細分的 COVID-19 資料。在本教程中，我們使用以下 API 連結：https://covid19api.com/。

步驟 2 - 請參閱 API 文檔，以了解如何取得資料以及可依國家/地區過濾資料的參數。

步驟 3 - 使用 AJAX 方法，在 API 上傳送 HTTP 請求並取得回應資料。

步驟 4 - 為了開發專案的前端（以使用者友好的方式呈現資料），我們使用 HTML 表格和 CSS 來更好地直觀地表示資料。

Covid19 全國明智狀況項目

在這裡，我們將建立實際的專案。它將分為三部分：執行 HTTP 請求的 JavaScript AJAX 程式碼、顯示內容的 HTML 正文以及使其用戶友好的 CSS 樣式。我們使用 jQuery AJAX 函式庫來讓程式碼更易於使用者閱讀和使用。

HTTP 回應正文

在詳細了解代表國家/地區 Covid19 狀態的實際 HTML 正文程式碼之前，我們需要查看 API 回應並了解其結構。

以下是我們收到的 API 回應的一部分 -

{
   "ID": "027ce495-cf80-48da-afb7-6b8f95b12a01",
   "Message": "",
   "Global": {
      "NewConfirmed": 208060,
      "TotalConfirmed": 671410179,
      "NewDeaths": 2047,
      "TotalDeaths": 6771936,
      "NewRecovered": 0,
      "TotalRecovered": 0,
      "Date": "2023-02-18T04:36:09.159Z"
   },
   "Countries": [
      {
         "ID": "2390f7cb-1c24-4164-bfc3-688afed8bbe7",
         "Country": "Afghanistan",
         "CountryCode": "AF",
         "Slug": "afghanistan",
         "NewConfirmed": 16, 
         "TotalConfirmed": 209072,
         "NewDeaths": 0,
         "TotalDeaths": 7896,
         "NewRecovered": 0,
         "TotalRecovered": 0,
         "Date": "2023-02-18T04:36:09.159Z",
         "Premium": {}
      },
      {
         "ID": "8591babe-97a3-44f5-8e38-06df8ae67a55",
         "Country": "Albania",
         "CountryCode": "AL",
         "Slug": "albania",
         "NewConfirmed": 9,
         "TotalConfirmed": 334273,
         "NewDeaths": 0,
         "TotalDeaths": 3596,
         "NewRecovered": 0,
         "TotalRecovered": 0,
         "Date": "2023-02-18T04:36:09.159Z",
         "Premium": {}
      },
      ...
   ]
   "Date": "2023-02-18T04:36:09.159Z"
}

在此回覆中，我們提供了有關新冠病毒國家/地區的一些詳細信息，但該項目的重要部分是“國家/地區”鍵。它包含一組對象，表示特定國家/地區的 covid19 國家/地區詳細資訊。該物件的按鍵是不言自明的，例如“Country”包含國家/地區名稱。「NewConfirmed」儲存新確診的 covid19 病例。「TotalConfirmed」儲存該國的確診病例總數。「NewDeaths」代表最近的死亡人數。「TotalDeaths」指該國的死亡總數，「NewRecovered」代表目前復健患者，「TotalRecovered」代表康復患者總數。

範例

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
   <title> Covid19 Country Wise Status Project </title>
   <style>
      .text-center {
         text-align: center;
      }
      #mytable {
         border-collapse: collapse;
         width: 100%;
      }
      #mytable td,
      #mytable th {
         border: 1px solid #ddd;
         padding: 8px;
      }
      #mytable tr:nth-child(even) {
         background-color: #f2f2f2;
      }
      #mytable th {
         padding-top: 12px;
         padding-bottom: 12px;
         text-align: left;
         background-color: #008b86;
         color: white;
      }
   </style>
</head>
<body>
   <h2 class="text-center"> Covid19 Country Wise Status Project </h2>
   <!-- Table -->
   <table id="mytable">
      <thead>
         <th> Country Name </th>
         <th> New Confirmed </th>
         <th> New Deaths </th>
         <th> New Recovered </th>
         <th> Total Confirmed </th>
         <th> Total Deaths </th>
         <th> Total Recovered </th>
      </thead>
   </table>
   <script>
      let mytable = document.getElementById('mytable')
      
      // AJAX HTTP Request 
      $.ajax({
         url: 'https://api.covid19api.com/summary',
         type: 'GET',
         success: function (response) {
            let data = response.Countries
            console.log(data)
            let element = ''
            data.forEach((country) => {
               element +=
               '<tr><td>' +
               country.Country +
               '</td>' +
               '<td>' +
               country.NewConfirmed +
               '</td>' +
               '<td>' +
               country.NewDeaths +
               '</td>' +
               '<td>' +
               country.NewRecovered +
               '</td>' +
               '<td>' +
               country.TotalConfirmed +
               '</td>' +
               '<td>' +
               country.TotalDeaths +
               '</td>' +
               '<td>' + 
               country.TotalRecovered +
               '</td></tr>'
            })
            mytable.innerHTML += element
         },
      })
   </script>
 </body>
</html>

這個專案將幫助初學者了解更多關於 AJAX、JavaScript、HTML 和 CSS 的資訊。它還可以用作多個縣的新冠病毒狀態快速檢查。

以上是如何使用 REST API 建立 Covid19 國家/地區狀態專案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用 Fabric.js 設定畫布圓的描邊寬度？下一篇：如何使用 Fabric.js 設定畫布圓的描邊寬度？

看更多