📜  如何使用 REST API 创建 Covid19 Country wise status 项目?

📅  最后修改于: 2021-11-07 08:34:01             🧑  作者: Mango

今天,世界上所有国家都在与冠状病毒作斗争。每天,冠状病毒病例都在迅速增加。所有人每天跟踪 COVID 病例很重要,并应尽量保证自己的安全。我们制作了小型网络应用程序,可以向用户报告病例数、新病例数、新死亡数、康复数等总数。您只需输入国家/地区名称并单击搜索即可。

此应用程序还受到客户端脚本的保护,并使用免费的 Covid19 API。以下是API链接:
https://covid19api.com/

运行程序的步骤:我们在本文中展示了 JavaScript 和 HTML 文件。包括 HTML、CSS、js 在内的所有代码都在我的 Github 个人资料中。以下是完整的项目链接:
https://github.com/rohitdhonicsk/covid19webapp

  1. Git 克隆https://github.com/rohitdhonicsk/covid19webapp ,将 GitHub 项目文件复制到您的计算机上。
  2. 现在打开 Index.html 文件。
  3. 输入国家名称并点击搜索。

所需的项目文件和模块:

  1. 你应该有三个主要文件 index.html(在 index.html 文件的代码下面),CSS(只有你想设计时才需要,你可以从我的 GitHub 存储库项目文件中下载 CSS)。第三个最重要的文件是 JavaScript 文件(我们在下面给出了完整代码),用于获取 COVID 数据和响应用户搜索。
  2. 您需要 jQuery,它是 JavaScript 库。您可以从 Jquery 官方网站或使用以下命令将 CDN 脚本放在您的 HTML 代码中:

    注意:请确保机器中安装了NODE和NPM,否则请到节点官网下载安装。

    首先,您必须在项目目录中键入以下命令。它将创建一个 package.json 文件。

    npm init

    现在输入以下命令来安装jQuery

    npm install jquery

项目目录:
项目目录

该项目将如下所示:
主页:
webapp的完整图像

COVID19 统计搜索印度国家:
工作示例 印度

构建应用程序的步骤:

  1. 第一步是去API,将API的链接复制到postman app,可视化JSON格式的数据。我们正在使用 API 的汇总数据。
  2. 在 HTML 文件中创建一个表单,输入字段是国家/地区名称。
  3. 将 Id 分配给应在 JavaScript 上使用的标题、表单、输入和标签。下面是演示 HTML 文件,其中 class 和 id 用于样式和操作调用。

    COVID RESULT

    SEARCH COUNTRY NAME

      
         

      

        
                        
           
          
                      
      
      

         
      
  4. 现在包含您的 CSS 文件(可选)。
  5. 请记住在 HTML 代码中包含以下两件事:
    • jQuery CDN 链接
    • 你的JS文件
  6. 现在,在您的 JS 文件中添加以下代码:
    // This Code calls function name performSearch()
    // on clicking submit button of form 
      
    $(document).ready(function() {
      
      // Add an event listener (performSearch) 
      // to the form
      $("#query-form").submit(function(event) 
        { performSearch(event); });
    });
    
  7. 现在使用以下代码创建 performSearch()函数:
    function performSearch(event) {
      
      // Variable to hold request
      var request;
      
      // Prevent default posting of form 
      // put here to work in case of errors
      event.preventDefault();
      
      // Abort any pending request
      if (request) {
          request.abort();
      }
      
      // Setup some local variables
      var $form = $(this);
      
      // Disable the inputs and buttons 
      // for the duration of the request.
      setFormDisabledProps(true);
      
      // It will show heading searching during the request
      $("#search-results-heading").text("Searching ...");
      $("#results").text("");
      
      // Send the request to API for data
      request = $.ajax({
          url:"https://api.covid19api.com/summary",
          type: "GET",
          // data: { i:, q: $("#contains").val()}
      });
      
    // Taking country name from input box that we created
    pat=$("#ingredients").val(); 
      
      // Callback handler for success
      request.done(function (response, textStatus, jqXHR) {
          
        // Calling formal search after getting data from api
        formatSearchResults(response);
      });
      
      // Callback handler for failure
      request.fail(function (jqXHR, textStatus, errorThrown) {
       $("#search-results-heading").
         text("Unable to fetch Covid Data, Try again")
       $("#results").text("");
      });
      
      // Callback handler that will be called in any case
      request.always(function () {
      
          // Reenable the inputs
          setFormDisabledProps(false);
      });
    }
    
  8. 创建 formatSearchResults函数,该函数将为用户提供所需的搜索结果。
    var pat, flag = 0;
    function formatSearchResults(jsonResults) {
      
        // Storing Json Data in jsonobject variable
        var jsonObject = jsonResults;
      
        $("#search-results-heading").text("Search Results");
        var formatedText = "";
      
        jsonObject.Countries.forEach(function (item, index) {
      
            // Matching user search data with api data 
            if (item.Country.toLowerCase() == pat.toLowerCase()) {
                var thumbnail = item.NewConfirmed;
      
                // Printing the result
                formatedText += 
    "

    TotalConfirmed: " +                 item.TotalConfirmed + "

    ";                formatedText +=  "

    NewDeaths: " +                 item.NewDeaths + "

    ";                formatedText +=  "

    NewConfirmed: " +                 item.NewConfirmed + "

    ";                formatedText +=  "

    NewRecovered: " +                 item.NewRecovered + "

    ";                flag = 1;             return;         }     });        // If result not found     $("#results").html(formatedText);        if (!flag) {         $("#search-results-heading")             .text("Dont Fun With it.Please Enter"             + " Correct Country Name e.g-India");         $("#results").text("");     } }
  9. 最后一步是保护数据免受客户端脚本和重置函数。
    function resetResults() {
      $("#search-results-heading").text("");
      $("#results").text("");
      flag=0;
    }
      
    // This function checks the user input fields
    // for any unacceptable characters and removes
    // them if found
    function sanitizeInputs() {
      var str = $("#ingredients").val();
      str = str.replace(/[^a-zA-Z 0-9, ]/gim, "");
      str = str.trim();
      $("#ingredients").val(str);
    }
    

完整的 Javascript 代码:

// This Code call function name performSearch()
// on clicking submit button of form 
$(document).ready(function () {
  
    // Add an event listener (performSearch)
    // to the form
    $("#query-form").submit(function (event) 
        { performSearch(event); });
});
  
var pat, flag = 0;
function formatSearchResults(jsonResults) {
  
    // Storing Json Data in jsonobject variable
    var jsonObject = jsonResults;
  
    $("#search-results-heading").text("Search Results");
    var formatedText = "";
  
    jsonObject.Countries.forEach(function (item, index) {
  
        // Matching user search data with api data 
        if (item.Country.toLowerCase() == pat.toLowerCase()) {
            var thumbnail = item.NewConfirmed;
            // Printing the result
            formatedText += 
"

TotalConfirmed: " +                 item.TotalConfirmed + "

";                formatedText +=  "

NewDeaths: " +                 item.NewDeaths + "

";                formatedText +=  "

NewConfirmed: " +                 item.NewConfirmed + "

";                formatedText +=  "

NewRecovered: " +                 item.NewRecovered + "

";                flag = 1;             return;         }     });        $("#results").html(formatedText);        // If result not found     if (!flag) {         $("#search-results-heading")             .text("Dont Fun With it.Please Enter"                 + " Correct Country Name e.g-India");         $("#results").text("");     } }    function performSearch(event) {        // Variable to hold request     var request;        // Prevent default posting of form -      // put here to work in case of errors     event.preventDefault();        // Abort any pending request     if (request) {         request.abort();     }        // Setup some local variables     var $form = $(this);        // Disable the inputs and buttons      // for the duration of the request.     setFormDisabledProps(true);        // It will show heading searching     // during the request     $("#search-results-heading")             .text("Searching ...");     $("#results").text("");        // Send the request to API for data     request = $.ajax({         url: "https://api.covid19api.com/summary",         type: "GET",         // data: { i:, q: $("#contains").val() }     });        // Taking country name from input     // box that we created     pat = $("#ingredients").val();        // Callback handler for success     request.done(function (response,          textStatus, jqXHR) {         formatSearchResults(response);     });        // Callback handler for failure     request.fail(function (jqXHR,              textStatus, errorThrown) {            // Calling formal search after          // getting data from api         $("#search-results-heading").text( "Sorry We Unable to fetch Covid Data.Try again.");         $("#results").text("");     });        // Callback handler that will be     // called in any case     request.always(function () {            // Reenable the inputs         setFormDisabledProps(false);     }); }    // This function clears the search results // and the heading "Search Results" function resetResults() {     $("#search-results-heading").text("");     $("#results").text("");     flag = 0; }    // This function checks the user input // fields for any unacceptable characters // and removes them if found function sanitizeInputs() {     var str = $("#ingredients").val();     str = str.replace(/[^a-zA-Z 0-9, ]/gim, "");     str = str.trim();     $("#ingredients").val(str); }