问题描述
我制作了一个Weather应用程序，从今天开始显示4天的天气。当我在localhost上进行测试时，Web应用程序按预期方式运行，并且获得了理想的结果，即如果今天是2020年8月15日，那么当我搜索我的城市，我得到8月15日，然后8月16、17和18日的天气。但是，当我在Heroku上部署我的应用程序时，天气从8月16日，8月17日，18日和19日开始。谁能指出我的错误？提前致谢。
下面是我在app.js中的代码
require("dotenv").config();
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const ejs = require("ejs");
const https = require("https");
// done requiring module
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(__dirname + "/public"));
app.set("view engine","ejs");
var daysArray = [];
const imgurl = [];
var imgurlSingle = "";
let port = process.env.PORT;
if (port == null || port == "") {
port = 4000;
}
app.listen(port,function (res) {
console.log("Port started successfully at host 4000");
});
app.get("/",function (req,res) {
res.render("index");
});
app.post("/",res) {
const cityName = req.body.cityName;
// res.render("forecast");
const url =
"https://api.openweathermap.org/data/2.5/forecast?q=" +
cityName +
"&appid=" +
process.env.WEATHER_API +
"&units=metric&cnt=32";
https.get(url,function (response) {
response.on("data",function (data) {
const weatherData = JSON.parse(data);
const time = new Date().getHours();
weatherData.list.forEach(function (single) {
var textHour = single.dt_txt.substring(11,13);
var numberHour = parseInt(textHour,10);
var difference = Math.abs(time - numberHour);
if (
difference === 1 ||
difference === 0 ||
(time === 23 && numberHour === 21) ||
(time === 24 && numberHour === 0) ||
(time === 2 && numberHour === 00)
) {
daysArray.push(single);
imgurlSingle =
"http://openweathermap.org/img/w/" +
single.weather[0].icon +
".png";
imgurl.push(imgurlSingle);
}
});
// res.send(daysArray);
res.render("forecast",{ daysArray: daysArray,imgurl: imgurl });
daysArray = [];
});
});
});
Forecast.ejs中的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8" />
<Meta
name="viewport"
content="width=device-width,initial-scale=1,shrink-to-fit=no"
/>
<Meta name="description" content="" />
<Meta name="author" content="" />
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico" />
<title>Weather Forecast</title>
<link
rel="canonical"
href="https://getbootstrap.com/docs/4.0/examples/sign-in/"
/>
<!-- Bootstrap core CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<!-- Custom styles for this template -->
<link href="CSS/styles.css" rel="stylesheet" />
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=
Montserrat:wght@500;900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="container">
<div class="row">
<% daysArray.forEach(function(singleDay,index){ %>
<div class="col-6 col-me d-lg-none">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">
<%= singleDay.dt_txt.substring(0,10) %>
</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">
<img
src= <%= imgurl[index] %>
/>
</h1>
<p class="description">
<%= singleDay.weather[0].description %> <br />
<%= singleDay.main.temp %> ℃
</p>
</div>
</div>
</div>
<!-- For desktop -->
<div class="col-lg-3 d-none d-lg-block">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">
<%= singleDay.dt_txt.substring(0,10) %>
</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">
<img
src= <%= imgurl[index] %>
/>
</h1>
<p class="description">
<%= singleDay.weather[0].description %> <br />
<%= singleDay.main.temp %> ℃
</p>
</div>
</div>
</div>
<% }) %>
</div>
</div>
</body>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</html>
index.ejs中的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8" />
<Meta
name="viewport"
content="width=device-width,shrink-to-fit=no"
/>
<Meta name="description" content="" />
<Meta name="author" content="" />
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico" />
<title>Weather Forecast</title>
<link
rel="canonical"
href="https://getbootstrap.com/docs/4.0/examples/sign-in/"
/>
<!-- Bootstrap core CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<!-- Custom styles for this template -->
<link href="CSS/styles.css" rel="stylesheet" />
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=
Montserrat:wght@500;900&display=swap"
rel="stylesheet"
/>
</head>
<body class="text-center">
<form class="form-signin" action="/" method="POST">
<img
class="mb-4"
src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg"
alt=""
width="72"
height="72"
/>
<h1 class="h3 mb-3 font-weight-normal">Enter you city</h1>
<input
name="cityName"
type="cityName"
id="inputEmail"
class="form-control"
placeholder="City Name"
required
autofocus
/>
<button class="btn btn-lg btn-primary btn-block" type="submit">
Submit
</button>
<p class="copyright">© Raxy_45</p>
</form>
</body>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</html>
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）