En la parte anterior de esta serie de tutoriales, implementamos la funcionalidad de inicio y cierre de sesión para nuestra aplicación Lista de deseos. En esta parte de la serie, implementaremos el back-end y el front-end necesarios para que un usuario agregue y muestre elementos de la lista de deseos.
Cómo empezar
Comencemos clonando la parte anterior del tutorial de GitHub.
git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part2.git
Una vez que se haya clonado el código fuente, navegue hasta el directorio del proyecto e inicie el servidor web.
cd PythonFlaskMySQLApp_Part2 python app.py
Apunte su navegador a http://localhost:5002/ y debería tener la aplicación ejecutándose.
Agregar elementos de la lista de deseos
Paso 1:crea una interfaz para agregar elementos
Comenzaremos creando una interfaz para que el usuario que inició sesión agregue elementos de la lista de deseos. Navega a las templates carpeta dentro del directorio del proyecto y cree un archivo llamado addWish.html . Abra addWish.html y agregue el siguiente código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Python Flask Bucket List App</title>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
<script src="../static/js/jquery-1.11.2.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="#">Add Item</a>
</li>
<li role="presentation"><a href="/logout">Logout</a>
</li>
</ul>
</nav>
<h3 class="text-muted">Python Flask App</h3>
</div>
<section>
<form class="form-horizontal" method="post" action="/addWish">
<fieldset>
<!-- Form Name -->
<legend>Create Your Wish</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="txtTitle">Title</label>
<div class="col-md-4">
<input id="txtTitle" name="inputTitle" type="text" placeholder="placeholder" class="form-control input-md">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="txtPost">Post</label>
<div class="col-md-4">
<textarea class="form-control" id="txtPost" name="inputDescription"></textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<input id="singlebutton" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
</div>
</div>
</fieldset>
</form>
</section>
<footer class="footer">
<p>© Company 2015</p>
</footer>
</div>
</body>
</html>
Abra app.py y agregue una nueva ruta y método para mostrar el Add Wish página.
@app.route('/showAddWish')
def showAddWish():
return render_template('addWish.html')
Abra userHome.html y agregue un nuevo elemento de menú para vincularlo a Add Wish página.
<li role="presentation"><a href="/showAddWish">Add Wish</a></li>
Guarde los cambios y reinicie el servidor. Apunte su navegador a http://localhost:5002 e inicie sesión con una dirección de correo electrónico y una contraseña válidas. Una vez que haya iniciado sesión, haga clic en Agregar deseo enlace y debería mostrarse la página Agregar deseo.
Paso 2:Implementación de la base de datos
Para agregar elementos a la lista de deseos, debemos crear una tabla llamada tbl_wish .
CREATE TABLE `tbl_wish` ( `wish_id` int(11) NOT NULL AUTO_INCREMENT, `wish_title` varchar(45) DEFAULT NULL, `wish_description` varchar(5000) DEFAULT NULL, `wish_user_id` int(11) DEFAULT NULL, `wish_date` datetime DEFAULT NULL, PRIMARY KEY (`wish_id`) ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;
tbl_wish tendrá title , description y el ID del usuario que creó el deseo.
A continuación, debemos crear un procedimiento almacenado de MySQL para agregar elementos a tbl_wish mesa.
USE `BucketList`;
DROP procedure IF EXISTS `BucketList`.`sp_addWish`;
DELIMITER $$
USE `BucketList`$$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_addWish`(
IN p_title varchar(45),
IN p_description varchar(1000),
IN p_user_id bigint
)
BEGIN
insert into tbl_wish(
wish_title,
wish_description,
wish_user_id,
wish_date
)
values
(
p_title,
p_description,
p_user_id,
NOW()
);
END$$
DELIMITER ;
;
Paso 3:Cree un método de Python para llamar al procedimiento almacenado de MySQL
Crea un método llamado addWish en app.py .
@app.route('/addWish',methods=['POST'])
def addWish():
# Code will be here Dado que publicaremos datos en este método, lo hemos declarado explícitamente en la ruta definida.
Cuando se realiza una llamada al addWish método, necesitamos validar si es una llamada auténtica verificando si la variable de sesión user existe Una vez que hayamos validado la sesión, leeremos el title publicado y description .
_title = request.form['inputTitle']
_description = request.form['inputDescription']
_user = session.get('user')
Una vez que tengamos los valores de entrada requeridos, abriremos una conexión MySQL y llamaremos al procedimiento almacenado sp_addWish .
conn = mysql.connect()
cursor = conn.cursor()
cursor.callproc('sp_addWish',(_title,_description,_user))
data = cursor.fetchall()
Después de haber ejecutado el procedimiento almacenado, debemos confirmar los cambios en la base de datos.
if len(data) is 0:
conn.commit()
return redirect('/userHome')
else:
return render_template('error.html',error = 'An error occurred!')
Aquí está el addWish completo método.
@app.route('/addWish',methods=['POST'])
def addWish():
try:
if session.get('user'):
_title = request.form['inputTitle']
_description = request.form['inputDescription']
_user = session.get('user')
conn = mysql.connect()
cursor = conn.cursor()
cursor.callproc('sp_addWish',(_title,_description,_user))
data = cursor.fetchall()
if len(data) is 0:
conn.commit()
return redirect('/userHome')
else:
return render_template('error.html',error = 'An error occurred!')
else:
return render_template('error.html',error = 'Unauthorized Access')
except Exception as e:
return render_template('error.html',error = str(e))
finally:
cursor.close()
conn.close()
Guarde todo el código fuente y reinicie el servidor. Apunte su navegador a http://localhost:5002 e inicie sesión con una dirección de correo electrónico y una contraseña válidas. Una vez que haya iniciado sesión, haga clic en Agregar deseo Enlace. Introduce el title y description para su deseo y haga clic en Publicar . Al agregar con éxito el deseo, debe redirigir a la página de inicio del usuario. Inicie sesión en la base de datos MySQL y debería tener el deseo en su tbl_wish mesa.
Mostrar un elemento de la lista de deseos
Paso 1:crear un procedimiento almacenado para recuperar un deseo
Vamos a crear un procedimiento almacenado de MySQL que obtendrá los deseos creados por un usuario. Tomará el usuario ID como parámetro y devolver un conjunto de datos de deseos creados por la ID de usuario particular.
USE `BucketList`;
DROP procedure IF EXISTS `sp_GetWishByUser`;
DELIMITER $$
USE `BucketList`$$
CREATE PROCEDURE `sp_GetWishByUser` (
IN p_user_id bigint
)
BEGIN
select * from tbl_wish where wish_user_id = p_user_id;
END$$
DELIMITER ;
Paso 2:Cree un método de Python para recuperar datos
A continuación, creemos un método de Python que llamará al sp_GetWishByUser procedimiento almacenado para obtener los deseos creados por un usuario. Agrega un método llamado getWish en app.py .
@app.route('/getWish')
def getWish():
try:
if session.get('user'):
_user = session.get('user')
else:
return render_template('error.html', error = 'Unauthorized Access')
except Exception as e:
return render_template('error.html', error = str(e))
Como se ve en el código anterior, este método solo se puede llamar con un user válido sesión. Una vez que hayamos validado una sesión de usuario válida, crearemos una conexión a la base de datos MySQL y llamaremos al procedimiento almacenado sp_GetWishByUser .
_user = session.get('user')
# Connect to MySQL and fetch data
con = mysql.connect()
cursor = con.cursor()
cursor.callproc('sp_GetWishByUser',(_user,))
wishes = cursor.fetchall()
Una vez que hayamos obtenido datos de MySQL, analizaremos los datos y los convertiremos en un dictionary para que sea fácil regresar como JSON .
wishes_dict = []
for wish in wishes:
wish_dict = {
'Id': wish[0],
'Title': wish[1],
'Description': wish[2],
'Date': wish[4]}
wishes_dict.append(wish_dict)
Después de convertir los datos en un dictionary convertiremos los datos en JSON y volver.
return json.dumps(wishes_dict)
Aquí está el getWish completo método.
@app.route('/getWish')
def getWish():
try:
if session.get('user'):
_user = session.get('user')
con = mysql.connect()
cursor = con.cursor()
cursor.callproc('sp_GetWishByUser',(_user,))
wishes = cursor.fetchall()
wishes_dict = []
for wish in wishes:
wish_dict = {
'Id': wish[0],
'Title': wish[1],
'Description': wish[2],
'Date': wish[4]}
wishes_dict.append(wish_dict)
return json.dumps(wishes_dict)
else:
return render_template('error.html', error = 'Unauthorized Access')
except Exception as e:
return render_template('error.html', error = str(e))
Paso 3:enlazar datos JSON a HTML
Cuando se cargue la página de inicio del usuario, llamaremos a getWish método utilizando jQuery AJAX y vincular los datos recibidos en nuestro HTML. En userHome.html agregue el siguiente jQuery Guión AJAX:
<script>
$(function() {
$.ajax({
url: '/getWish',
type: 'GET',
success: function(res) {
console.log(res);
},
error: function(error) {
console.log(error);
}
});
});
</script> Guarde los cambios anteriores y reinicie el servidor. Una vez que haya iniciado sesión con una dirección de correo electrónico y una contraseña válidas, verifique la consola de su navegador y debería recuperar la lista de deseos de la base de datos como se muestra:
[{
"Date": "Fri, 23 Jan 2015 23:26:05 GMT",
"Description": "I want to climb Mount Everest",
"Id": 1,
"Title": "Climb Everest"
}, {
"Date": "Fri, 23 Jan 2015 23:27:05 GMT",
"Description": "I want to jump from top of a mountain",
"Id": 2,
"Title": "Bungee Jump"
}]
Ahora, necesitamos iterar sobre el JSON datos y vincúlelos al HTML. Usaremos bootstrap list-group para mostrar los artículos de nuestra lista de deseos. Aquí está la plantilla básica para list-group :
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Wish Title</h4>
<p class="list-group-item-text">Wish Description</p>
</a>
</div>
Agregue el código HTML anterior al jumbotron div en userHome.html . Así es como se ve:
Ahora, lo que haremos es crear el list-group que se muestra arriba. div dinámicamente para cada entrada de la lista de deseos y añádalo al jumbotron división Dentro de la devolución de llamada exitosa de getWish llamada de función, cree un div como se muestra:
var div = $('<div>')
.attr('class', 'list-group')
.append($('<a>')
.attr('class', 'list-group-item active')
.append($('<h4>')
.attr('class', 'list-group-item-heading'),
$('<p>')
.attr('class', 'list-group-item-text')));
Estaremos clonando el div anterior para crear el list-group div para cada elemento de la lista de deseos. A continuación, analice el JSON devuelto cadena en un objeto JavaScript.
var wishObj = JSON.parse(res);
Ahora, itera sobre wishObj y para cada elemento deseado, clone un nuevo div y agréguelo al jumbotron div.
var wish = '';
$.each(wishObj, function(index, value) {
wish = $(div).clone();
$(wish).find('h4').text(value.Title);
$(wish).find('p').text(value.Description);
$('.jumbotron').append(wish);
}); Guarde los cambios anteriores y reinicie el servidor. Inicie sesión con una dirección de correo electrónico y una contraseña válidas y debería poder ver la lista de deseos creada por el usuario en particular.
