Javascript: CRUD Rest
De Aulas
Afluentes: Desenvolvimento Front-end I, Usabilidade, desenvolvimento web, mobile e jogos.
Serviço web
Para que nosso CRUD possa ser funcional, precisamos de um serviço web com as operações de CRUD (CREATE, READ, UPDATE e DELETE). Para o nosso exemplo aqui, usarei um serviço web desenvolvido em linguagem de programação GO:
Caso você queira reimplementar o serviço em Node.js ou outra linguagem/framework, basta entender o manual de acesso ao serviço web:
index.html
O arquivo index.html contem a formatação básica da nossa aplicação
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Usuários</title>
<script src="api.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet" href="index.css">
</head>
<body onload="carregarDados();">
<h1>Usuários</h1>
<p>
<label for="id">ID:</label>
<input type="number" id="id">
</p>
<p>
<label for="name">Nome:</label>
<input type="text" id="name">
</p>
<p>
<label for="email">E-mail:</label>
<input type="text" id="email">
</p>
<p class="btn-group">
<button class="button" onclick="gravar();">Gravar</button>
<button class="button" onclick="limpar();">Limpar</button>
</p>
<table>
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>E-mail</th>
<th></th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
</body>
</html>
api.js
O arquivo api.js contem os códigos em javascript para o acesso às operações GET, POST, PUT e DELETE do nosso serviço web.
// link do nosso serviço web. Estamos utilizando o localhost na porta 8080
// e o o serviço, especificamente, é o user.
var url = "http://localhost:8080/users";
/**
* Função assíncrona para carregar os dados na tabela
*/
async function carregarDados() {
let tbody = document.getElementById('tbody');
tbody.innerHTML = "";
try {
const response = await fetch(url, { // Usamos a operação GET
method: "GET", // sem parâmetros que retorna
dataType: "json",
});
const result = await response.json(); // uma lista de objetos JSON
result.forEach(row => { // para cada objeto da lista
let tr = document.createElement("tr"); // cria uma linha da tabela
tr.innerHTML =
`<td>${row.id}</td>
<td>
<a href="#" onclick="selecionar(${row.id});">
${row.name}</a>
</td>
<td>${row.email}</td>
<td>
<a href="#" onclick="excluir(${row.id});">
<i class="fa fa-trash-alt"></i></a>
</td>`;
tbody.appendChild(tr); // Criada a linha, adicionamos
}); // no corpo da tabela
} catch (error) {
alert("Error: " + error);
}
}
/**
* Retorna apenas um objeto JSON com o id selected_id
* @param {*} selected_id
*/
async function selecionar(selected_id) {
let id = document.getElementById('id');
id.disabled = true; // Desabilitamos o ID porque
let name = document.getElementById('name'); // vamos alterar pelo ID
let email = document.getElementById('email');
try {
const response = await fetch(`${url}/${selected_id}`, { // Buscamos pela url com parâmetro id
method: "GET",
dataType: "json"
})
const user = await response.json(); // Retorna um objeto e carregamos as
id.value = user.id; // informações retornadas nos campos texto
name.value = user.name;
email.value = user.email;
} catch (error) {
alert("Error: " + error);
}
}
/**
* Exclui um registro pelo ID passado como parâmetro em selected_id
* @param {*} selected_id
*/
async function excluir(selected_id) {
try {
const response = await fetch(`${url}/${selected_id}`, { // Consumimos o serviço com o parâmetro id
method: "DELETE", // usando a operação DELETE
dataType: "json",
}).then(result => { // Se deu tudo ok
limpar(); // limpa os campos
carregarDados(); // e recarrega a tabela
});
} catch (error) {
alert("Error: " + error);
}
}
/**
* Gravamos um objeto com os dados carregados dos campos texto
*/
async function gravar() {
let id = document.getElementById('id');
let name = document.getElementById('name');
let email = document.getElementById('email');
let i_id = 0;
if (isNaN(i_id = parseInt(id.value))) { // O id precisa ser um número inteiro
alert("O id precisa ser um inteiro.");
return;
}
var data = { // Criamos nosso objeto JSON Para o envio
id: i_id,
name: name.value,
email: email.value,
};
let method = "POST"; // Se o campo ID estiver desabilitado, é porque
if (id.disabled) method = "PUT"; // estavamos alterando, então usa PUT, senão POST
try { // porque é um novo registro
const response = await fetch(url, {
method: method,
dataType: "json",
contentType: "application/json; charset=utf-8",
body: JSON.stringify(data),
}).then(result => { // Se deu tudo ok
limpar(); // limpa os campos e habilita o id
carregarDados(); // e recarrega os dados da tabela
});
} catch (error) {
alert("Error: " + error);
}
}
/**
* Limpa os campos e habilita o campo ID que poderia estar desabilitado
*/
function limpar() {
let id = document.getElementById('id');
id.value = "";
id.disabled = false;
document.getElementById('name').value = "";
document.getElementById('email').value = "";
}
index.css
Estou usando um CSS para deixar a parte visual mais bonita, mas o uso é opcional.
table {
width: 100%;
}
th {
background-color: #04AA6D;
color: white;
}
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
input[type=number],
input[type=text],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
input[type=submit],
input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
.btn-group .button {
background-color: #04AA6D;
/* Green */
border: none;
color: white;
padding: 10px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.btn-group .button:hover {
background-color: #3e8e41;
}
