資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 REST API 建立按國家/地區劃分的 Covid19 疫情狀態專案？
在建立專案之前，我們首先討論 REST API。REST 是一種軟體架構風格和一組標準，有助於建立線上服務。REST 的全稱為表述性狀態轉移。同時，應用程式程式設計介面 (API) 允許兩個或多個計算機程式之間進行通訊。它是一個軟體介面，為其他軟體程式提供服務。使用者必須遵循基於 HTTP（超文字傳輸協議）的 REST API 所知的規則才能訪問 Web 服務。
REST API 使用傳統的 HTTP 方法（如 GET、POST、PUT 和 DELETE）來訪問和修改資源（如資料物件）。這些資源由 URI（統一資源識別符號）標識。資料可以透過 API 以多種格式傳遞，包括 XML 和 JSON。使用 REST 可以構建小型、快速且易於擴充套件的 Web 服務。它被開發用於與全球資訊網的 HTTP 協議通訊。由於 REST API 基於標準協議，因此可以被各種客戶端使用，包括 Web 瀏覽器、移動應用程式和其他伺服器。
REST API 經常用於 Web 和移動應用程式開發，因為它提供了一種簡單且標準化的方式，讓應用程式可以訪問和修改伺服器上的資源。
建立按國家/地區劃分的 Covid19 疫情狀態專案的步驟
使用 REST API，可以透過以下基本步驟構建一個按國家/地區劃分的 COVID-19 疫情狀態專案：
步驟 1 − 研究一個可靠的 API，該 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 的詳細資訊，但此專案的重要部分是“Countries”鍵。它包含一個物件陣列，表示特定國家/地區的 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。它也可以用作幾個國家/地區的 covid19 快速狀態檢查。
278 次檢視
