时间戳

首页 > 解决方案 > NodeJs 天气应用程序不显示动态数据

javascript - NodeJs 天气应用程序不显示动态数据

问题描述

在我的节点 js 天气应用程序中，我正在获取国家名称和城市名称，但无法获取天气条件。我无法捕捉到错误在哪里。请帮我找出这里是 json 文件 在我的节点 js 天气应用程序中，我正在获取国家名称和城市名称，但无法获取天气条件。我无法捕捉到错误在哪里。请帮我找出这里是json文件

const http = require("http");
const fs = require("fs");
var requests = require("requests");
const homeFile = fs.readFileSync("home.html", "utf-8");
const replaceVal = (tempval, orgval)=>{
  let temparature = tempval.replace("{%tempvalue}%", orgval.main.temp);
   temparature = temparature.replace("{%tempmin}%", orgval.main.temp_min);
   temparature = temparature.replace("{%tempmax%}", orgval.main.temp_max);
   temparature = temparature.replace("{%location%}", orgval.name);
   temparature = temparature.replace("{%country%}", orgval.sys.country);
   return temparature;
};

const server = http.createServer((req, res) =>{
    if(req.url == "/"){
        requests('http://api.openweathermap.org/data/2.5/weather?q=Dhaka&appid=ac18c1f96a3b47360ad004981a34c353')
.on('data',  (chunk)=> {
    const objData = JSON.parse(chunk);
    const arrData = [objData]
 const realTimedata = arrData.map((val) => replaceVal(homeFile, val)).join(" ");
//  res.write(realTimedata);
res.write(realTimedata);
console.log(realTimedata);
})
.on('end',  (err) =>{
  if (err) return console.log('connection closed due to errors', err);
 
  res.end();
});
    }
});
server.listen(8000, "127.0.0.1");
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <style>
        * {
          padding: 0;
          margin: 0;
          /* font-family: "Jost", sans-serif; */
          font-family: "Quicksand", sans-serif;
        }
  
        body {
          background: #f3f2ef;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          height: 100vh;
          width: 100vw;
        }
  
        html,
        body {
          font-size: 62.5%;
          height: 100%;
        }
  
        html {
          background: #eee;
        }
  
        .box {
          width: 20vw;
          height: 60vh;
          border-radius: 0.5rem;
          box-shadow: 0 0.2rem 3rem rgba(0, 0, 0, 0.2);
          background: #a5bbdd;
          position: relative;
          overflow: hidden;
          transform: translate3d(0, 0, 0);
          min-width: 20rem;
          min-height: 35rem;
        }
  
        .wave {
          opacity: 0.3;
          position: absolute;
          top: 120%;
          left: 50%;
          background: white;
          width: 50rem;
          height: 50rem;
          margin-left: -25rem;
          margin-top: -25rem;
          transform-origin: 50% 48%;
          border-radius: 43%;
          animation: drift 3000ms infinite linear;
          z-index: 1;
        }
  
        .wave.-three {
          animation: drift 5000ms infinite linear;
          z-index: 2 !important;
          opacity: 0.2;
        }
  
        .wave.-two {
          animation: drift 7000ms infinite linear;
          opacity: 0.1;
          z-index: 3 !important;
        }
  
        .box:after {
          content: "";
          display: block;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 11;
          transform: translate3d(0, 0, 0);
        }
  
        @keyframes drift {
          from {
            transform: rotate(0deg);
          }
          from {
            transform: rotate(360deg);
          }
        }
        .info {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 45%;
          z-index: 4;
        }
  
        .location {
          margin-top: 1.5rem;
          text-align: center;
          font-weight: 500;
          font-size: 2rem;
        }
  
        .fa-street-view {
          animation: rotates 3s linear infinite alternate;
        }
  
        @keyframes rotates {
          from {
            transform: translateX(-0.5rem);
          }
          to {
            transform: translateX(0.5rem);
          }
        }
  
        #date {
          text-align: center;
          margin-top: 0.5rem;
          color: #57606f;
          font-size: 1.2rem;
          font-weight: 300;
          text-transform: uppercase;
        }
  
        .temp {
          margin-top: 2.5rem;
          text-align: center;
          font-size: 3rem;
        }
  
        .tempmin_max {
          text-align: center;
          margin-top: 0.3rem;
          font-weight: 300;
          font-size: 1.2rem;
          color: #57606f;
          
        }
        .tempin_max {
            text-align: center;
            margin-top: 0.5rem;
        }
        #weathercon {
          height: 55%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 3em;
        }
  
        #weathercon .fas {
          font-size: 6rem;
          animation: fas-anime 3s linear infinite alternate;
        }
  
        @keyframes fas-anime {
          from {
            transform: scale(1.1);
          }
          to {
            transform: scale(1.5);
          }
        }
  
        @media (max-width: 600px) {
          .box {
            width: 90vw;
            height: 80vh;
          }
  
          .wave {
            top: 85%;
          }
  
          #weathercon {
            font-size: 5em;
          }
  
          .info {
            font-size: 1.5rem;
          }
        }
        @media (max-height: 500px) {
          .box {
            height: 80vh;
          }
  
          .wave {
            top: 115%;
          }
        }
        body > span {
          width: 100vw;
          text-align: center;
          color: grey;
        }
      </style>
    <title>Wheather app</title>
</head>
<body>

    <div class="box">
        <div class="wave -one"></div>
        <div class="wave -two"></div>
        <div class="wave -three"></div>
        <div id="weathercon">
            <i class="fas fa-sun" style="color:#fdcb6e"></i>
        </div>
        <di v class="info">
            <h2 class="location"><i class="fas fa-street-view" style="color:#000"></i>{%location%}, {%country%}</h2>
            <p id="date"></p>
            <h1 class="temp">{%tempvalue%}</h1>
            <h3 class="tempin_max">Min {%tempmin%} | Max {%tempmax%}</h3>
        </div>
    </div>
    <script>
       const curdate = document.getElementById("date");
       let weathercon = document.getElementById("weathercon");
       const tempStatus = "clouds";
       const getCurDay = () =>{
        var weekday = new Array(7);
        weekday[0] = "Sun";
        weekday[1] = "Mon";
        weekday[2] = "Tues";
        weekday[3] = "Wednes";
        weekday[4] = "Thurs";
        weekday[5] = "Fri";
        weekday[6] = "Satur";
           let curTime = new Date();
           let day = (weekday[curTime.getDay()]);
           return day;
       };
       const getCurNowime = () =>{
           var months = [
               "jan",
               "feb",
               "mar",
               "Apr",
               "may",
               "june", 
               "july",
               "aug",
               "Sept",
               "oct",
               "nov",
               "dec",
           ];
           var now = new Date();
           var month = months[now.getMonth()];
           var date = now.getDate();
           let hours = now.getHours();
           var mins = now.getMinutes();
           let period = "AM";
           if(hours >11){
               period = "pm"
               if(hours>12) hours -=12;

           }
           if(mins<10){
               mins = "0" + mins; 
           }

           return ` ${date}  ${month}  |${hours}:${mins} ${period}`;

       }
    //    getCurDay();
    // getCurNowime();
    curdate.innerHTML = getCurDay() + " | " + getCurNowime(); 
    </script>
</body>
</html>

在此处输入图像描述

标签： javascripthtmlcssnode.jsweather-api

解决方案

有错别字

请更改温度值

let temparature = tempval.replace("{%tempvalue}%", orgval.main.temp);

至

let temparature = tempval.replace("{%tempvalue%}", orgval.main.temp);

并更改为Min Temp

temparature = temparature.replace("{%tempmin}%", orgval.main.temp_min);

至

temparature = temparature.replace("{%tempmin%}", orgval.main.temp_min);

由于服务器端和用户端或 HTML 文件中的这些错字变量不匹配，因此您可以从天气 API 中看到正确的值。

推荐阅读