极客笔记如何使用REST API创建Covid19按国家划分的状态项目
在创建项目之前，我们首先讨论REST API。REST是一种软件架构风格和一套标准，有助于创建在线服务。REST的全名是Representational State Transfer。同时，应用程序编程接口（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，该API按国家提供COVID-19数据。在本教程中，我们使用以下API链接：https://covid19api.com/。
步骤2 - 参考API文档，了解如何获取数据以及可以用哪些参数按国家进行过滤。
步骤3 - 使用AJAX方法，向API发送HTTP请求并获取响应数据。
步骤4 - 使用HTML表格和CSS开发项目的前端，以更友好的方式呈现数据。
Covid19按国家划分的状态项目
在这里，我们将构建实际项目。它将分为三个部分：JavaScript AJAX代码执行HTTP请求、HTML主体显示内容以及CSS样式使其用户友好。我们使用了jQuery AJAX库，使代码更易读和易于使用。
HTTP响应主体
在详细介绍实际HTML主体代码以表示按国家划分的Covid19状态之前，我们需要查看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"
}
在此响应中，我们有有关COVID-19按国家细分的若干详细信息，但本项目的关键部分是“国家”键。它包含表示特定国家COVID-19详细信息的对象数组。对象的键是自解释的，例如“Country”包括国家名称。“NewConfirmed”存储新确认的COVID-19病例。“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的知识。同时，它也可以用作多个县的新冠疫情快速状态检查。