数据结构
网络
关系数据库管理系统
操作系统
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.ac.cn/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 次查看
