Mudanças entre as edições de "Javascript: CRUD Rest"

De Aulas
Linha 65: Linha 65:
  
 
<syntaxhighlight lang=javascript>
 
<syntaxhighlight lang=javascript>
 +
 +
// 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";
 
var url = "http://localhost:8080/users";
  
 +
/**
 +
* Função assíncrona para carregar os dados na tabela
 +
*/
 
async function carregarDados() {
 
async function carregarDados() {
 
     let tbody = document.getElementById('tbody');
 
     let tbody = document.getElementById('tbody');
 
     tbody.innerHTML = "";
 
     tbody.innerHTML = "";
 
     try {
 
     try {
−
         const response = await fetch(url, {
+
         const response = await fetch(url, {                         // Usamos a operação GET
−
             method: "GET",
+
             method: "GET",                                         // sem parâmetros que retorna
 
             dataType: "json",
 
             dataType: "json",
 
         });
 
         });
−
         const result = await response.json();
+
         const result = await response.json();                       // uma lista de objetos JSON
−
         result.forEach(row => {
+
         result.forEach(row => {                                     // para cada objeto da lista
−
             let tr = document.createElement("tr");
+
             let tr = document.createElement("tr");                 // cria uma linha da tabela
 
             tr.innerHTML =
 
             tr.innerHTML =
 
                 `<td>${row.id}</td>
 
                 `<td>${row.id}</td>
−
                 <td><a href="#" onclick="selecionar(${row.id});">
+
                 <td>
−
                    ${row.name}</a></td>
+
                    <a href="#" onclick="selecionar(${row.id});">
 +
                        ${row.name}</a>
 +
                </td>
 
                 <td>${row.email}</td>
 
                 <td>${row.email}</td>
 
                 <td>
 
                 <td>
 
                     <a href="#" onclick="excluir(${row.id});">
 
                     <a href="#" onclick="excluir(${row.id});">
−
                    <i class="fa fa-trash-alt"></i>
+
                        <i class="fa fa-trash-alt"></i></a>
−
                    </a>
 
 
                 </td>`;
 
                 </td>`;
−
             tbody.appendChild(tr);
+
             tbody.appendChild(tr);                                 // Criada a linha, adicionamos
−
         });
+
         });                                                         // no corpo da tabela
 
     } catch (error) {
 
     } catch (error) {
 
         alert("Error: " + error);
 
         alert("Error: " + error);
Linha 95: Linha 103:
 
}
 
}
  
 +
/**
 +
* Retorna apenas um objeto JSON com o id selected_id
 +
* @param {*} selected_id
 +
*/
 
async function selecionar(selected_id) {
 
async function selecionar(selected_id) {
 
     let id = document.getElementById('id');
 
     let id = document.getElementById('id');
−
     id.disabled = true;
+
     id.disabled = true;                                             // Desabilitamos o ID porque
−
     let name = document.getElementById('name');
+
     let name = document.getElementById('name');                     // vamos alterar pelo ID
 
     let email = document.getElementById('email');
 
     let email = document.getElementById('email');
 
     try {
 
     try {
−
         const response = await fetch(`${url}/${selected_id}`, {
+
         const response = await fetch(`${url}/${selected_id}`, {     // Buscamos pela url com parâmetro id
 
             method: "GET",
 
             method: "GET",
 
             dataType: "json"
 
             dataType: "json"
 
         })
 
         })
−
         const user = await response.json();
+
         const user = await response.json();                         // Retorna um objeto e carregamos as
−
         id.value = user.id;
+
         id.value = user.id;                                         // informações retornadas nos campos texto
 
         name.value = user.name;
 
         name.value = user.name;
 
         email.value = user.email;
 
         email.value = user.email;
Linha 114: Linha 126:
 
}
 
}
  
 +
/**
 +
* Exclui um registro pelo ID passado como parâmetro em selected_id
 +
* @param {*} selected_id
 +
*/
 
async function excluir(selected_id) {
 
async function excluir(selected_id) {
 
     try {
 
     try {
−
         const response = await fetch(`${url}/${selected_id}`, {
+
         const response = await fetch(`${url}/${selected_id}`, {     // Consumimos o serviço com o parâmetro id
−
             method: "DELETE",
+
             method: "DELETE",                                       // usando a operação DELETE
 
             dataType: "json",
 
             dataType: "json",
−
         }).then(result => {
+
         }).then(result => {                                         // Se deu tudo ok
−
             carregarDados();
+
             limpar();                                               // limpa os campos
−
             limpar();
+
             carregarDados();                                       // e recarrega a tabela
 
         });
 
         });
 
     } catch (error) {
 
     } catch (error) {
Linha 128: Linha 144:
 
}
 
}
  
 +
/**
 +
* Gravamos um objeto com os dados carregados dos campos texto
 +
*/
 
async function gravar() {
 
async function gravar() {
 
     let id = document.getElementById('id');
 
     let id = document.getElementById('id');
Linha 133: Linha 152:
 
     let email = document.getElementById('email');
 
     let email = document.getElementById('email');
 
     let i_id = 0;
 
     let i_id = 0;
−
     if (isNaN(i_id = parseInt(id.value))) {
+
     if (isNaN(i_id = parseInt(id.value))) {                         // O id precisa ser um número inteiro
 
         alert("O id precisa ser um inteiro.");
 
         alert("O id precisa ser um inteiro.");
 
         return;
 
         return;
 
     }
 
     }
−
     var data = {
+
     var data = {                                                   // Criamos nosso objeto JSON Para o envio
 
         id: i_id,
 
         id: i_id,
 
         name: name.value,
 
         name: name.value,
 
         email: email.value,
 
         email: email.value,
 
     };
 
     };
−
     let method = "POST";
+
     let method = "POST";                                           // Se o campo ID estiver desabilitado, é porque
−
     if (id.disabled) method = "PUT";
+
     if (id.disabled) method = "PUT";                               // estavamos alterando, então usa PUT, senão POST
−
     try {
+
     try {                                                           // porque é um novo registro
 
         const response = await fetch(url, {
 
         const response = await fetch(url, {
 
             method: method,
 
             method: method,
Linha 150: Linha 169:
 
             contentType: "application/json; charset=utf-8",
 
             contentType: "application/json; charset=utf-8",
 
             body: JSON.stringify(data),
 
             body: JSON.stringify(data),
−
         }).then(result => {
+
         }).then(result => {                                         // Se deu tudo ok
−
             limpar();
+
             limpar();                                               // limpa os campos e habilita o id
−
             carregarDados();
+
             carregarDados();                                       // e recarrega os dados da tabela
 
         });
 
         });
 
     } catch (error) {
 
     } catch (error) {
Linha 159: Linha 178:
 
}
 
}
  
 +
/**
 +
* Limpa os campos e habilita o campo ID que poderia estar desabilitado
 +
*/
 
function limpar() {
 
function limpar() {
 
     let id = document.getElementById('id');
 
     let id = document.getElementById('id');

Edição das 15h27min de 16 de abril de 2024

Afluentes: Desenvolvimento Front-end I, Desenvolvimento Front-end II, 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>Funcioná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;
}
Disponível em “https://saulo.arisa.com.br/wiki/index.php?title=Javascript:_CRUD_Rest&oldid=9189”