所属分类：web前端开发
在创建项目之前，我们将首先讨论 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 和移动应用程序开发，因为它为应用程序提供了一种简单且标准化的方法来访问和更改服务器上的资源。
使用 REST API，人们可以按照以下基本步骤构建一个 COVID-19 国家/地区状态项目 -
第 1 步 - 研究可靠的 API，提供按国家/地区细分的 COVID-19 数据。在本教程中，我们使用以下 API 链接：https://covid19api.com/。
步骤 2 - 请参阅 API 文档，了解如何获取数据以及可按国家/地区过滤数据的参数。
步骤 3 - 使用 AJAX 方法，在 API 上发送 HTTP 请求并获取响应数据。
步骤 4 - 为了开发项目的前端（以用户友好的方式呈现数据），我们使用 HTML 表格和 CSS 来更好地直观地表示数据。
在这里，我们将构建实际的项目。它将分为三部分：执行 HTTP 请求的 JavaScript AJAX 代码、显示内容的 HTML 正文以及使其用户友好的 CSS 样式。我们使用 jQuery AJAX 库来使代码更易于用户阅读和使用。
在详细了解代表国家/地区 Covid19 状态的实际 HTML 正文代码之前，我们需要查看 API 响应并了解其结构。
以下是我们收到的 API 响应的一部分 -
微博登录
QQ登录{
"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 的更多信息。它还可以用作多个县的新冠病毒状态快速检查。
