Criando um aplicativo Web do zero usando Python Flask e MySQL:Parte 4

Primeiros passos

git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part3.git

cd PythonFlaskMySQLApp_Part3python app.py

Editando a lista de desejos

Etapa 1:exibir o ícone de edição

Etapa 2:exibir o pop-up de edição

 
 
 
 ×Fechar  
Atualizar desejo
 
 
 
 
 Título:  
 
 Descrição:  
 
 
 
 Fechar Atualizar 
 
 

 
 O HTML acima servirá como o pop-up. Quando o usuário clica no botão edit ícone que o pop-up irá mostrar. Já adicionamos os atributos data-target e data-toggle que acionará o pop-up modal. 
 
 
 
 Salve as alterações acima e reinicie o aplicativo. Uma vez conectado ao aplicativo, clique no botão edit ícone e você poderá visualizar o pop-up. 
    
Etapa 3:preencher o pop-up de edição
 
 Quando o usuário clicar no ícone de edição, mostraremos o pop-up de atualização com o title e description atualizar. Para começar, primeiro precisamos do ID do desejo para buscar os detalhes do desejo específico assim que o usuário clicar no ícone de edição. Portanto, modifique o código do modelo jQuery para incluir um atributo extra data-id no elemento âncora de edição. 
 

 
 Também anexamos um onclick evento para chamar o método Edit . Dentro da função Edit, faremos uma chamada AJAX para um método python chamado getWishById que retornará os detalhes do desejo. 
 
função Edit(elm) { $.ajax({ url:'/getWishById', data:{ id:$(elm).attr('data-id') }, type:'POST', success:function (res) { console.log(res); }, erro:function(erro) { console.log(erro); } });}
 
 Em seguida, abra app.py e crie um método chamado getWishById . Usando esse método, obteremos os detalhes do desejo específico do banco de dados. 
 
@app.route('/getWishById',methods=['POST'])def getWishById():try:if session.get('user'):_id =request.form['id'] _user =session.get('user') conn =mysql.connect() cursor =conn.cursor() cursor.callproc('sp_GetWishById',(_id,_user)) result =cursor.fetchall() wish =[] wish.append ({'Id':result[0][0],'Title':result[0][1],'Description':result[0][2]}) return json.dumps(wish) else:return render_template ('error.html', error ='Acesso não autorizado') exceto Exceção como e:return render_template('error.html',error =str(e))
 
 Como você pode ver no método acima, passamos o ID do desejo para este método e ele obtém os dados do banco de dados usando o user ID e wish ID . Depois que os dados são buscados, ele os converte em uma lista e os retorna como JSON dados. 
 
 Em seguida, vamos criar o procedimento armazenado MySQL necessário para buscar dados do banco de dados. 
 
DELIMITER $$CREATE DEFINER=`root`@`localhost` PROCEDIMENTO `sp_GetWishById`(IN p_wish_id bigint,In p_user_id bigint)BEGINselect * from tbl_wish onde wish_id =p_wish_id e wish_user_id =p_user_id;END
 
 O código mostrado acima é o procedimento armazenado para obter detalhes específicos do desejo usando o wish ID e user ID . 
 
 Salve as alterações e reinicie o servidor. Uma vez conectado ao aplicativo, clique no botão edit ícone e você deve ter os detalhes registrados no console do seu navegador. 
 
 Para vincular os dados recebidos ao pop-up HTML, primeiro remova o data-target e data-toggle atributos da tag âncora do ícone de edição. Em seguida, adicione o seguinte código ao Edit Retorno de chamada de sucesso da função JavaScript para preencher o pop-up e acioná-lo. 
 
// Analisar os dados JSON stringvar recebidos =JSON.parse(res);//Preencher o Pop up$('#editTitle').val(data[0]['Title']);$('# editDescription').val(data[0]['Description']);// Aciona o Pop Up$('#editModal').modal();
 
 Salve as alterações e reinicie o servidor. Uma vez conectado ao aplicativo, tente clicar no ícone de edição e você deverá ter o pop-up com o título e a descrição. 
    
Etapa 4:atualizar os detalhes do desejo
 
 Para implementar a funcionalidade de atualização, vamos primeiro criar um procedimento armazenado do MySQL. 
 
DELIMITER $$CREATE DEFINER=`root`@`localhost` PROCEDIMENTO `sp_updateWish`(IN p_title varchar(45),IN p_description varchar(1000),IN p_wish_id bigint,In p_user_id bigint)BEGINupdate tbl_wish set wish_title =p_title, wish_description =p_description onde wish_id =p_wish_id e wish_user_id =p_user_id;END$$DELIMITER;
 
 Como visto no procedimento armazenado acima, passaremos o title modificado e description junto com o ID do desejo e o usuário para atualizar os detalhes no banco de dados. 
 
 Em seguida, vamos criar um novo método chamado updateWish para atualizar os detalhes. Aqui está o updateWish método:
 
@app.route('/updateWish', métodos=['POST'])def updateWish():try:if session.get('user'):_user =session.get('user') _title =request.form['title'] _description =request.form['description'] _wish_id =request.form['id'] conn =mysql.connect() cursor =conn.cursor() cursor.callproc('sp_updateWish', (_title,_description,_wish_id,_user)) data =cursor.fetchall() se len(data) for 0:conn.commit() return json.dumps({'status':'OK'}) else:return json. dumps({'status':'ERROR'}) exceto Exceção como e:return json.dumps({'status':'Acesso não autorizado'}) finalmente:cursor.close() conn.close()
 
 Como visto no código acima, após validar para uma sessão válida, coletamos os dados postados e chamamos o procedimento armazenado sp_updateWish para atualizar os detalhes. 
 
 Para chamar o updateWish método, precisamos anexar um evento no Update clique no botão. Então, nomeie o botão de atualização como btnUpdate e anexe um onclick evento como mostrado:
 
$('#btnUpdate').click(function() { $.ajax({ url:'/updateWish', data:{ title:$('#editTitle').val(), descrição:$( '#editDescription').val(), id:localStorage.getItem('editId') }, tipo:'POST', sucesso:function(res) { $('#editModal').modal('hide'); // Preencha novamente a grade }, error:function(error) { console.log(error); } })});
 
 Como visto no código acima, coletamos o editId de localStorage , então dentro do Edit função salvar o ID em localStorage . 
 
localStorage.setItem('editId',$(elm).attr('data-id'));
 
 Finalize o getWish Chamada AJAX em uma função, para que possamos chamá-la novamente assim que os dados forem atualizados. 
 
function GetWishes() { $.ajax({ url:'/getWish', type:'GET', success:function(res) { var wishObj =JSON.parse(res); $('#ulist') .empty(); $('#listTemplate').tmpl(wishObj).appendTo('#ulist'); }, error:function(error) { console.log(error); } });}
 
 Ligue para o GetWishes função no retorno de chamada de sucesso do update Chamada AJAX. 
 
$('#btnUpdate').click(function() { $.ajax({ url:'/updateWish', data:{ title:$('#editTitle').val(), descrição:$( '#editDescription').val(), id:localStorage.getItem('editId') }, tipo:'POST', sucesso:function(res) { $('#editModal').modal('hide'); // Preencha novamente a grade GetWishes(); }, error:function(error) { console.log(error); } })});
 
 Salve todas as alterações e reinicie o servidor. Uma vez conectado ao aplicativo, tente editar os desejos disponíveis criados pelo usuário. 
 
Excluindo um desejo
 
Etapa 1:mostrar um pop-up de confirmação
 
 Adicione o seguinte código HTML a userHome.html . 
 
 
 
 
 
Você vai Excluir isso para sempre !!
 
 
 Cancelar Excluir 
 
 

 
 Adicione um ícone de exclusão dentro do listTemplate adicionando o seguinte HTML:
 

 
 Ao clicar no ícone de exclusão acima, chamaremos uma função JavaScript chamada ConfirmDelete onde acionaremos o pop-up de confirmação. 
 
função ConfirmDelete(elem) { localStorage.setItem('deleteId', $(elem).attr('data-id')); $('#deleteModal').modal();}
 
 Salve as alterações e reinicie o servidor. Depois de fazer login, clique no ícone de exclusão na lista de desejos e você verá o pop-up de confirmação. 
    
Etapa 2:excluir um desejo
 
 Para implementar a funcionalidade Excluir desejo, primeiro vamos criar o procedimento armazenado do MySQL para excluir. 
 
DELIMITER $$USE `BucketList`$$CREATE PROCEDURE `sp_deleteWish` (IN p_wish_id bigint,IN p_user_id bigint)BEGINdelete de tbl_wish onde wish_id =p_wish_id e wish_user_id =p_user_id;END$$DELIMITER;
 
 O procedimento acima recebe o ID do desejo e o ID do usuário e exclui o desejo correspondente do banco de dados. 
 
 Em seguida, vamos criar um método dentro de app.py para chamar o procedimento sp_deleteWish . 
 
 Vamos criar um método chamado deleteWish para exclusão de desejo. 
 
@app.route('/deleteWish',methods=['POST'])def deleteWish():try:if session.get('user'):_id =request.form['id'] _user =session.get('user') conn =mysql.connect() cursor =conn.cursor() cursor.callproc('sp_deleteWish',(_id,_user)) resultado =cursor.fetchall() se len(resultado) for 0 :conn.commit() return json.dumps({'status':'OK'}) else:return json.dumps({'status':'Ocorreu um erro'}) else:return render_template('error.html' ,error ='Acesso não autorizado') exceto Exceção como e:return json.dumps({'status':str(e)}) finalmente:cursor.close() conn.close()
 
 No método acima, primeiro validamos a sessão. Depois de validarmos a sessão do usuário, usando o ID do desejo e o ID do usuário, chamamos o procedimento armazenado de sp_deleteWish . 
 
 Para chamar o método acima deleteWish , adicione um onclick evento ao botão Excluir no pop-up de confirmação de exclusão. 
 
Excluir
 
 Crie uma função JavaScript chamada Delete , e dentro de Delete faça uma chamada AJAX para o método python deleteWish . 
 
function Delete() { $.ajax({ url:'/deleteWish', data:{ id:localStorage.getItem('deleteId') }, type:'POST', success:function(res) { var result =JSON.parse(res); if (result.status =='OK') { $('#deleteModal').modal('hide'); GetWishes(); } else { alert(result.status); } }, erro:function(erro) { console.log(erro); } });}
 
 No retorno de chamada de sucesso do Delete acima função, verificaremos o status retornado e, se estiver OK, ocultaremos o pop-up modal e recarregaremos os desejos. 
 
 Salve as alterações e reinicie o servidor. Uma vez logado no aplicativo, tente excluir um desejo da página inicial do usuário.