Olá, colega!
Acontece que as requisições do front-end não são feitas pela URL da página e nem por links. O front-end, por baixo dos panos, com JavaScript envia requisições AJAX para a API back-end usando a fetch API do JavaScript.
Se você abrir o source da aplicação front-end, for na pasta scripts e abrir o script series.js, lá no final vai encontrar o seguinte código:
// Função para carregar informações da série
function carregarInfoSerie() {
getDados(`/series/${serieId}`)
.then(data => {
fichaDescricao.innerHTML = `
<img src="${data.poster}" alt="${data.titulo}" />
<div>
<h2>${data.titulo}</h2>
<div class="descricao-texto">
<p><b>Média de avaliações:</b> ${data.avaliacao}</p>
<p>${data.sinopse}</p>
<p><b>Estrelando:</b> ${data.atores}</p>
</div>
</div>
`;
})
.catch(error => {
console.error('Erro ao obter informações da série:', error);
});
}
// Adiciona ouvinte de evento para o elemento select
listaTemporadas.addEventListener('change', carregarEpisodios);
// Carrega as informações da série e as temporadas quando a página carrega
carregarInfoSerie();
Esse script roda 1 vez, sempre que a página 127.0.0.1:5501/detalhes.html?id=0 é carregada. É esse script que envia a requisição para a nossa API.
A função getDados de getDados.js possui uma constante String (baseURL) que é usada para passar o endereço da nossa API.
const baseURL = 'http://localhost:8080';
export default function getDados(endpoint) {
return fetch(`${baseURL}${endpoint}`)
.then(response => response.json())
.catch(error => {
console.error('Erro ao acessar o endpoint /series/top5:', error);
});
}
Essa String possui apenas o endereço da URL base da API, a função getDados espera receber como parâmetro o resto da URL (url relativa, representada pela variável enpoint). Quando a função getDados é chamada, ela apenas concatena os valores das variáveis baseURL e endpoint. Isso permite que a função getDados seja usada de forma versátil para enviar requisições para qualquer endpoint da nossa API. Por exemplo:
//Request para http://localhost:8080/series
getDados('/series')
//Request para http://localhost:8080/series/top5
getDados('/series/top5')
//Request para http://localhost:8080/series/lancamentos
getDados('/series/lancamentos')
//Request para http://localhost:8080/series/{id}/temporadas/todas
const urlRelativa = `/{serieID}/temporadas/todas`;
getDados(urlRelativa)
//Ou assim:
//Request para http://localhost:8080/series/{id}/temporadas/todas
const urlRelativa = '/' + serieID + '/temporadas/todas';
getDados(urlRelativa)
Todas as requisições do front-end são enviadas através de JavaScript. O JS requisita os dados e quando obtém, manipula os elementos da página, para alterar a página web sem precisar dar um reload completo para cada ação que o usuário toma. Isso acontece por vários motivos, um deles é o fato de o front-end e o back-end serem aplicações indepentendes, logo, quando você acessa um URL do front-end, nada irá acontecer no back-end, pois os dois não têm nenhum ligação; quem faz a ponte entre os dois é o JavaScript, sem ele, as duas aplicações não conseguem se comunicar. Essa abordagem também reduz a carga sobre o servidor e otimiza a experiência do usuário em todos os sentidos possíveis.
