Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
12
respostas

Alberto Souza me ajuda

Eu acabei o curso e até agora não consegui fazer a função editar.. bom na verdade consegui, o problema é deixar os dados persistidos no form! veja como eu fiz.

DAO

function ProdutosDAO(connection) {
    this._connection = connection;
}

ProdutosDAO.prototype

        .findAll = function (callback) {
    this._connection.query('SELECT * FROM produtos', callback);
};

ProdutosDAO.prototype
        .salva = function(produtos,callback) {
    this._connection.query('INSERT INTO produtos SET ?', produtos, callback);

};
ProdutosDAO.prototype

        .deletar = function(id,callback) {
    this._connection.query('DELETE FROM produtos WHERE id=?',[id] , callback);

};
ProdutosDAO.prototype

    .save_update = function(id, produtos, callback) {
    this._connection.query('UPDATE FROM produtos SET ? WHERE id=?',[id, produtos] , callback);

};

ProdutosDAO.prototype

        .findById = function(id,callback) {
    this._connection.query('SELECT * FROM produtos WHERE id=?', [id], callback);

};
module.exports = function () {
    return ProdutosDAO;
};

FORM

<html>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Raleway:800italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Chewy' rel='stylesheet' type='text/css'>
<body background="http://static.tumblr.com/ibcdiqw/Ie9lvg8i2/15_-_degrad___verde.png">
<div class="errors">
    <% if(errs) { %>
    <ul>
        <% for(var i = 0; i < errs.length; i++) { %>
        <li><%= errs[i].param %> - <%= errs[i].msg %></li>
        <% } %>
    </ul>
    <% } %>
</div>
<div align="center">
    <h2 style="color: #3e8f3e; font-family: 'Chewy', cursive;">CADASTRAR LIVROS NO SISTEMA</h2>
</div>
<div align="center">
<form action="/produtos" method="post" class="form-inline">
    <div class="form-group" align="center">
        <br><br>
        <label for="nome">Título</label>
        <br>
        <input type="text" class="form-control" id="nome" value="<%=produtos.nome%>" name="nome" placeholder="Qual o título do livro?">
    </div>
    <br><br>
    <div class="form-group" align="center">

        <label for="preco">Preço</label>
        <br>
        <input type="text" class="form-control" id="preco" name="preco" value="<%=produtos.preco%>"  placeholder="Money, cash, facada">
    </div>
    <br><br>
    <div class="form-group" align="center">
        <label for="descricao">Descrição</label>
        <br>
        <textarea type="text" class="form-control" id="descricao" name="descricao"
                  placeholder="Como é o livro?"><%=produtos.descricao%></textarea>
    </div>
    <br><br>
    <div align="center">
        <input type="submit" class="btn btn-success" value="Guardar na Estante :)">
    </div>
</form>
</div>
</body>
</html>

ROTA GET

app.get('/produtos/:id', function (req, resp, next) {
        var connection = app.infra.connectionFactory();
        var produtosDAO = new app.infra.ProdutosDAO(connection);
        var produtos = req.body
        var id = req.params.id
        produtosDAO.findById(id, function (err, results) {
            if(err){
                return next(err);
            }
            resp.render('produtos/form', {
                errs: {},
                produtos: results
            });
        });
    });

LISTA

<html>
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Raleway:800italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Chewy' rel='stylesheet' type='text/css'>
    <script>function confirmValidation() {
            return window.confirm('Tem certeza que deseja excluir esse produto?');
        }</script>
</head>
<body background="http://static.tumblr.com/ibcdiqw/Ie9lvg8i2/15_-_degrad___verde.png">
<div align="center">
    <h2 style=" font-family: 'Chewy', cursive; color: #3e8f3e">LISTA DE LIVROS CADASTRADOS</h2>
</div>
<div align="center">
    <tbody>
    <div>
        <table border="black" class="table table-bordered"
               style=" margin:auto; width: 800px; font-family: 'Chewy', cursive;color: #0f0f0f">
            <tr bgcolor="black" style="font-family: 'Chewy', cursive;color: white">

                <td align="center">ID</td>
                <td align="center">NOME</td>
                <td align="center">DESCRIÇÃO</td>
                <td align="center">PREÇO</td>
                <td align="center">ACÃO</td>
            </tr>
            <% for(var i = 0; i < lista.length; i++) { %>
            <tr>
                <td><%= lista[i].id %></td>
                <td><%= lista[i].nome %></td>
                <td><%= lista[i].descricao %></td>
                <td><%= lista[i].preco %></td>
                <td>
                    <a class="btn btn-danger" onclick="return confirmValidation()" role="button"
                       href="/produtos/delete/<%= lista[i].id %>"/>DELETAR<br></a>
                    <a class="btn btn-warning" role="button" href="/produtos/<%= lista[i].id %>"/>EDITAR</a>
                </td>
            </tr>
            <% } %>

        </table>
        <a style="font-family:'Chewy'" class="btn btn-success" role="button" href="/produtos/form"/>ADICIONAR <br></a>
    </div>
    </tbody>
</div>
</body>
</html>

quando clico em editar aparece o form vazio... pode me ajudar nisso? aliás parabéns pelas aulas vc explica mt bem!

12 respostas

Opa, olhando o código, ainda não vi o possível problema. Nos values dos inputs não aparece nada mesmo? A variável results, retornada pelo método que faz a query, ta preenchida mesmo? Tem algum detalhe aí no meio que a gente não ta vendo.

Reparei nisso aqui:

ProdutosDAO.prototype

    .save_update = function(id, produtos, callback) {
    this._connection.query('UPDATE FROM produtos SET ? WHERE id=?',[id, produtos] , callback);

};

Não manjo muito, mas parece que os parâmetros da query estão trocados, não? Não deveria ser [produtos, id]?

A variável results esta vindo preenchida sim, e sobre a ordem dos parametros eu n sei dizer pq eu nem consigo pegar o id p ele atualizar, pq oara isso eu orecisa da variavel results que contem o id..mas n consigo acessar nada dela.. ja coloquei um console.log p ver se esta preenchida e esta :(.. quando dou produtos.nome da undefined e somento produtos da object.. e no metodo GET aparece certinho os dados da query no results

E não tem o from no update.. Além dos parâmetros trocados sim. No console.log, dentro da função, usa a variável results e não produtos. Ainda to olhando.. Esse código ta no github?

https://github.com/GustavoRoss/crudnode

Ta aki sim... entao devo alterar a ordem dos parametros e colocar no console.log a variavel results, dentro da funcao GET? Bom pode atebdar certo p salvar, mas oq eu mais queria tb eh os dados no form kkk

Opa, não :). Sugeri simplesmente colocar um console.log no get que recebe o id, para ver o find ta retornando certo :).

dentor da variavel results esta o objeto encontrado ao clicar em editar:

[ RowDataPacket {
    id: 32,
    nome: 'Livro de JAVA 8',
    descricao: 'Muito Eficiente!',
    preco: 121 } ]

e dps de clicar em editar, renderiza a pagina de formulário, e ao inves de substituir, ele cria um novo...

esse codigo que ta no git ta antigo, vou mandar link do atual, um momento

pronto fiz um commit la :D

https://github.com/GustavoRoss/crudnode

Alguem??

solução!

O retorno da consulta do banco traz um array, é por isso que vc não consegue acessar com results.nome. O que vc precisa fazer é passar para a view justamente o objeto da primeira posição do array, já que ele só deve ter uma posição, dado que é uma busca por id.

            resp.render('produtos/form', {
                errs: {},
                produtos: results[0]
            });

Em relação a ele sempre inserir, é pq a action do seu form aponta para a rota de adição.

<form action="/produtos" method="post" class="form-inline">

Você precisa mudar isso.. ou faz um if aí, ou cria uma outra página.

AMÉMMMMMMMMMMMMMMMMMMM OBRIGADO DEU CERTO