Question

我正在使用使用node和Ejs的气象应用程序。最初，输入城市后，信息将显示在同一页面上，但是我试图将其显示在名为result的新页面上。我已经指出，新页面将在console.log中加载而没有任何错误，但是没有显示任何API信息。这只是结果文件中包含的HTML。

JS：

const express = require("express");
const https = require('https');
const ejs = require("ejs");
const bodyParser = require("body-parser");
const date = require(__dirname + "/result.js");

const app = express();

var city = {};
let weatherData = [];

app.use(bodyParser.urlencoded({
  extended: true
}));

app.set('view engine', 'ejs');
app.use(express.static("public"));

app.get("/", function(req, res) {

  res.sendFile(__dirname + "/index.html");
});

app.get("/index", function(req, res) {
  res.render("index");
});

app.post("/", function(req, res) {

  const query = req.body.cityName;
  const apiKey = "d56f0e3ec353b519c8e1fcfff89a4326";
  const units = "metric";
  const url = "https://api.openweathermap.org/data/2.5/weather?q=" + query + "&appid=" + apiKey + "&units=" + units;

  https.get(url, function(response) {
    console.log(response.statusCode);

    response.on("data", function(data) {
      const weatherData = JSON.parse(data)
      const temp = weatherData.main.temp
      const feels_like = weatherData.main.feels_like
      const description = weatherData.weather[0].description
      const icon = weatherData.weather[0].icon
      const clouds = weatherData.clouds.all
      const imageURL = "http://openweathermap.org/img/wn/" + icon + "@2x.png"
      const cloudsImageURL = "http://openweathermap.org/img/wn/03n@2x.png"

      console.log(weatherData);

    });

  });

  var city = query;
  res.redirect("/result");

})

const content1 = "11Scelerisque eleifend donec pretium vulputate sapien. Rhoncus urna neque viverra justo nec ultrices. Arcu dui vivamus arcu felis bibendum. Consectetur adipiscing elit duis tristique. Risus viverra adipiscing at in tellus integer feugiat. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Consequat interdum varius sit amet mattis. Iaculis nunc"

app.get("/result", function(req, res) {
  res.render('result', {
    content: content1,
    description: weatherData.description,
    city: weatherData.city,
    temp: weatherData.temp,
    feelsLike: weatherData.feels_like

  });

});

app.listen(3300, function() {
  console.log("Server is running on port 3300.");
});

EJS（结果页面）

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Weather App</title>
    
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&display=swap" rel="stylesheet">
  </head>
  <body>
  
    <div id="wrapper" class="result-pg">
        
        <h1>The weather is currently <span class="description"><%= description %></span></h4>
        <img class="weather-img" src="">
        <h1>The temperature in <span class="city"><%= city %></span> is <span class="temp"><%= temp %></span> degrees. It feels more like <span class="feels-like"><%= feelsLike %></span></h1>
        
        <p><%= content %></p>
          
    </div>

  </body>
</html>

任何帮助将不胜感激。

Answer 1

您正在为API的响应设置局部变量weatherData。您需要将其放在/result函数中使用的全局变量中。变了

const weatherData = JSON.parse(data)

到

weatherData = JSON.parse(data)

我不确定为什么要设置所有其他变量，例如temp和feels_like，因为您从未使用过它们。

如何将信息从一个功能传递给另一个功能

1 个答案: