1

我正在尝试在后端部分使用 node、express 和 Axios 来应对 Api 应用程序，而无需使用 Angular 或 react 之类的任何框架。

我的代码有 3 个主文件。

  1. 索引.html
  2. customer.js（用于前端部分）
  3. server.js（用于后端部分）

我的后端部分如下；

const express = require('express');
const app = express();
const axios = require('axios').default;

API_KEY = "***";
const PORT =3000;

// app.use("/static", express.static(__dirname + '/customer'));

app.get('/', (req, res) =>{
    axios
      .get(`http://api.openweathermap.org/data/2.5/forecast?q=amsterdam&appid=${API_KEY}`)
      .then(resp => {
         let weatherDetail = resp.data;
         console.log('a single country details: ', weatherDetail);
         res.send(weatherDetail);
      })
      .catch(err => console.log(err));
  });

app.listen(PORT, () => console.log(`My app listening on port ${PORT}! `));

当我在浏览器上写 localhost:3000 时，我可以看到天气 api 的数据。但是我想查看带有customer.js 和api 数据中的函数的html 文件。因此我尝试编写res.sendFile((__dirname + '/index.html')); 内部app.get('/', (req, res))函数。但是，在这种情况下，我只能看到 html 页面而没有从后端获取数据。

如何在 customer.js 文件中的前端部分调用从后端部分获取的数据？

我在 customer.js 中的代码如下所示（但我不确定我是否在此文件中使用 axios agan）

const apiCall = cityName => {
    let apiKey = "***";
    let apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}&units=metric`
    axios
        .get(apiUrl)
        .then(getWeather)
        .catch(err => {
            console.log(err);
            err.response.status === 404 ? alert(`The country ${cityName} doesn't exist.`) : alert('Server error! Sorry.');
        });
};
apiCall(amsterdam)

    function getWeather (response) {
        let city = document.querySelector("#city");
        city.innerHTML = response.data.name;
.
.
.
.
}
4

2 回答 2

1

我建议使用像handlebars或ejs这样的模板引擎。有很多例子，使用任何模板引擎时，从后端发送数据到前端都是小菜一碟。我个人最喜欢的是车把，因为它的语法很简单。

于 2021-06-29T09:51:21.903 回答
0

如果您使用 Angular 或 React，建议不要使用 document.querySelector。每当有新数据可供更新时，React/Angular 都会通过在 index.html 文件的“根”div 元素中进行更新来让浏览器重新绘制 DOM。另外，为什么要发送 HTML 文件？您可以在 Node 中有一条如下所示的路线

route.get('/weather', (req, res) => {
    // do your api call with axios to get weather data
   res.json(weatherData);
});

从您的前端，您可以对“/weather”路由进行 API 调用并使用 JSON 数据

axios.get('baseUrl/weather').then(res=>{
   console.log("weather data", res);
}).catch(...);

您还可以像上面一样直接从前端获取天气数据。

于 2021-06-29T09:38:44.903 回答