Curso Programação para Web

Curso completo

Enviado por

Fernanda Alves

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

11 visualizações17 páginas

Curso Programação para Web

Curso completo

Enviado por

Fernanda Alves

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 17

TT905

Programação para a Web

SI401 – Programação para a Web

1º Semestre - 2024

Acesso a Bancos de Dados no Servidor:

MongoDB.

Prof. Danielle Furtado dos Santos Dias 1

[email protected]
•
Roteiro

SI401 – Programação para a Web

2
SI401 – Programação para a Web
OPERAÇÕES CRUD UTILIZANDO A FETCH API 3
Operações CRUD utilizando a Fetch
API.
• Vamos utilizar a Fetch API para realizar operações de Create, Read,
Update e Delete (CRUD) em uma API RESTful.

SI401 – Programação para a Web

• A APIRESTful está hospedada em um servidor Node.js que se
conecta a um banco de dados MongoDB (aula da unidade 14).

4
Configuração Inicial
• Primeiramente, você deve criar um código JavaScript que conterá
as funções da Fetch API.

SI401 – Programação para a Web

• No VSCode, crie um novo arquivo chamado functions.js.

• Para iniciar a configuração, você deve definir a URL base da API.

• Essa é a URL do seu backend. Você pode adquirir a URL ao rodar o

backend no Replit.

• Lembre de adicionar /mongo/, pois esse foi o endpoint que

programamos. 5
Função GET
• Todas as funções da Fetch API seguem o mesmo roteiro:

SI401 – Programação para a Web

• Crie a função callFetch;
• Configure as opções da requisição (modo, método,
cabeçalhos);
• Faça a requisição usando Fetch API;
• Aguarde a resposta;
• Verifique o status da resposta;
• Exiba os dados ou dê uma mensagem de erro.

6
Função GET
• Iremos programar a função callFetchWithGet para fazer uma
requisição GET para obter dados da API e exibir no navegador.

SI401 – Programação para a Web

7
SI401 – Programação para a Web
8
Função POST
• Iremos programar a função callFetchWithPost para fazer uma
requisição POST para adicionar novos dados à API.