Fiz como instruído no vídeo e após atualizar a tela, os dados já apresentados sumiram. Mas no arquivo db.json o novo cliente está lá.
Cadastra_cliente:
import { cliente_service } from "../service/cliente-service.js";
const formulario = document.querySelector('[data-form]');
formulario.addEventListener('submit', (evento) =>{
evento.preventDefault();
const nome = evento.target.querySelector('[data-nome]').value;
const email = evento.target.querySelector('[data-email]').value;
cliente_service.Cria_cliente(nome, email).then(() =>{
window.location.href = '../telas/cadastro_concluido.html';
});
});
Lista_clientes:
import { cliente_service } from "../service/cliente-service.js";
const Cria_nova_linha = (nome, email) =>{
const linha_novo_cliente = document.createElement('tr');
const conteudo = `<td class="td" data-td>${nome}</td>
<td>${email}</td>
<td>
<ul class="tabela__botoes-controle">
<li><a href="../telas/edita_cliente.html" class="botao-simples botao-simples--editar">Editar</a></li>
<li><button class="botao-simples botao-simples--excluir" type="button">Excluir</button></li>
</ul>
</td>`
linha_novo_cliente.innerHTML = conteudo;
return linha_novo_cliente;
}
const tabela = document.querySelector('[data-tabela]');
cliente_service.Lista_clientes().then(dado =>{
dado.forEach(elemento =>{
tabela.appendChild(Cria_nova_linha(elemento.nome, elemento.email));
});
});
cliente-service:
const Lista_clientes = () =>{
return fetch(`http://localhost:3000/profile`).then(resposta =>{
return resposta.json();
});
}
const Cria_cliente = (nome, email) =>{
return fetch(`http://localhost:3000/profile`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
nome: nome,
email: email
})
}).then(resposta =>{
return resposta.body;
});
}
export const cliente_service = {
Lista_clientes,
Cria_cliente
};