HHi,
Я работаю над проектом для онлайн-курса, и мне нужно внести одно изменение в проект. Я не совсем понимаю, что рецензент говорит, что я делаю неправильно. Его комментарий:
Здесь вам нужно запустить новый GET-запрос для получения данных с сервера.
Запросы GET и POST имеют определенное c назначение.
GET-запрос на выборку данных с сервера / db
POST используется для создания новых данных на сервере / db
Эти запросы должны выполнять задачу, для которой они предназначены, и ничего больше.
Это проблемная область моего кода:
let postData = async(url = '', data = {})=>{
console.log(data);
let temp = data.main.temp;
let zip = document.getElementById('zip').value;
let feelings = document.getElementById('feelings').value;
let date = newDate;
let response = await fetch(url, {
method: 'POST',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify( { temp, zip, feelings, date }),
});
try {
const newData = await response.json();
console.log(newData);
document.getElementById("date").innerHTML = newData.date;
document.getElementById("temp").innerHTML = newData.temp;
document.getElementById("content").innerHTML = newData.feelings;
return newData
}catch(error) {
console.log("error", error);
}
}
Это мой полный код:
app. js:
let apiURL = 'http://api.openweathermap.org/data/2.5/weather?id=524901&APPID=' + apiKey + '&zip=';
const endURL = ',us';
// Create a new date instance dynamically with JS
let d = new Date();
let newDate = d.getMonth()+'.'+ d.getDate()+'.'+ d.getFullYear();
document.getElementById('generate').addEventListener('click', performAction);
let content = document.getElementById('feelings').value;
function performAction(e){
let zip = document.getElementById('zip').value;
let url = apiURL + zip + endURL;
apiCall(url)
.then(async function(data){
console.log(data);
let res = await postData('/', data);
console.log(res);
});
};
const apiCall = async (url) =>{
const res = await fetch(url);
try {
const data = await res.json();
console.log(data)
return data;
} catch(error) {
console.log(error)
}
};
let postData = async(url = '', data = {})=>{
console.log(data);
let temp = data.main.temp;
let zip = document.getElementById('zip').value;
let feelings = document.getElementById('feelings').value;
let date = newDate;
let response = await fetch(url, {
method: 'POST',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify( { temp, zip, feelings, date }),
});
try {
const newData = await response.json();
console.log(newData);
document.getElementById("date").innerHTML = newData.date;
document.getElementById("temp").innerHTML = newData.temp;
document.getElementById("content").innerHTML = newData.feelings;
return newData
}catch(error) {
console.log("error", error);
}
}
сервер. js:
let projectData = {};
// Require Express to run server and routes
const express = require('express');
// Start up an instance of app
const app = express();
/* Middleware*/
//Here we are configuring express to use body-parser as middle-ware.
const bodyParser = require('body-parser');
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
const cors = require('cors');
app.use(cors());
// Cors for cross origin allowance
// Initialize the main project folder
app.use(express.static('website'));
// Setup Server
const port = 8000;
const server = app.listen(port, listening);
function listening(){
console.log(`running on localhost: ${port}`);
};
app.get('/weather', getData);
function getData(req, res){
res.send(projectData)
console.log(projectData)
};
app.route('/')
.get(function (req, res) {
res.sendFile('index.html', {root: 'website'})
})
.post(getWeather);
function getWeather(req, res){
console.log(req.body);
projectData = req.body;
console.log(projectData);
res.status(200).send(projectData);
};
Я понятия не имею, как будут выглядеть изменения, потому что я написал этот код, следуя той же структуре, что и на уроках. Любая помощь будет принята с благодарностью.
Большое спасибо, Майк