如何将从 api 接收到的数据发送到我设计的 html 页面答案

【问题标题】：How to send data received from api to my designed html page如何将从 api 接收到的数据发送到我设计的 html 页面
【发布时间】：2021-10-28 16:20:35
【问题描述】：

基本上我是网络开发的初学者我已经使用 Openweather api 设计了一个基本的天气报告网站我已经从 api 接收数据但主要问题是我无法将数据从 api 传递到我的 html 页面并且我甚至使用 DOM 来发送信息，但它不起作用。

'''
const express = require("express");
const bodyParser = require("body-parser");
const http = require("http");

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


 app.use(express.static("./public"));
 app.get("/",(request,response)=>{
response.sendFile('/Users/vivek/Desktop/web-development/weather- 
app/public');
});

app.get("/weatherdata",(request,response)=>{
response.sendfile('/Users/vivek/Desktop/web-development/weather- 
app/public/weatherData.html');
})
app.post("/weatherdata",(req,res)=>{
res.sendfile('./public/weatherData.html');
var cityname = req.body.cityName;
var apiid = "b75642448cbd207923a63b89cf48768d";
var url = "http://api.openweathermap.org/data/2.5/weather? 
q="+cityname+"&appid="+apiid;

http.get(url,(res=>{
    console.log(res.statusCode)
    res.on("data",(data)=>{
        data = JSON.parse(data);
        temp = data.main.temp;
        console.log(temp);
       document.querySelector(".main-degree").innerHTML=temp;
       })
    }))
 })
 app.listen(7000,()=>{
 console.log("sever is running on port 7000");
 });

【问题讨论】：

我认为你应该使用ejs

标签： javascript html node.js api express

【解决方案1】：

扩展评论，您可以使用 ejs 之类的模板引擎。顾名思义，它是一个模板，您可以使用 Openweather API 的响应来呈现。

基本流程：

当用户打开网站时
控制器会调用 API 并获得响应
使用响应呈现 .ejs 页面

这里是 EJS 的入门页面：https://ejs.co/#install

另一个建议：

对所有文件使用相对路径。这样做的好处是，移动项目不会造成任何破坏。

【讨论】：