问题描述
在我的节点 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.2);
background: #a5bbdd;
position: relative;
overflow: hidden;
transform: translate3d(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);
}
@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>
解决方法
有错别字
请更改温度值
let temparature = tempval.replace("{%tempvalue}%",orgval.main.temp);
到
let temparature = tempval.replace("{%tempvalue%}",orgval.main.temp);
并更改最低温度
temparature = temparature.replace("{%tempmin}%",orgval.main.temp_min);
到
temparature = temparature.replace("{%tempmin%}",orgval.main.temp_min);
由于这些打字错误，服务器端和用户端或 HTML 文件中的变量不匹配，因此您从天气 API 中看到了正确的值。