极客教程如何使用REST API创建Covid19 Country wise状态项目
在创建项目之前，我们将首先讨论REST API。REST是一种软件架构风格和标准的集合，有助于实现在线服务。Representational State Transfer是REST的全称。同时，应用编程接口（API）允许两个或多个计算机程序之间的通信。它是一个软件接口，给其他软件程序提供服务。用户必须遵循被称为基于HTTP（超文本传输协议）的REST API的规则来访问网络服务。
传统的HTTP方法，如GET、POST、PUT和DELETE，在REST API中访问和修改数据对象等资源。这些都是由URI（统一资源标识符）识别的。数据可以使用API以多种格式交付，包括XML和JSON。使用REST可以建立小型、快速和易于扩展的网络服务。它是为了与万维网的HTTP协议通信而开发的。由于其在标准协议中的基础，REST APIs可以被各种客户端使用，包括网络浏览器、移动应用程序和其他服务器。
REST API经常被用于网络和移动应用开发，因为它为应用提供了一个简单和标准化的方法来访问和改变服务器上的资源。
创建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国家的细节，但这个项目的重要部分是 “国家 “键。它包含一个对象数组，代表特定国家的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的快速状态检查。