Flask es un marco micro web escrito en python. Micro-framework es normalmente un marco con poca o ninguna dependencia de bibliotecas externas. Aunque es un marco micro, casi todo se puede implementar utilizando bibliotecas de Python y otras dependencias cuando y como sea necesario.
En este artículo, crearemos una aplicación Flask que toma datos en un formulario del usuario y luego los muestra en otra página del sitio web. También podemos borrar los datos. No nos centraremos en la parte frontal, sino que solo codificaremos el backend para la aplicación web.
Instalación de matraz
En cualquier directorio donde se sienta cómodo, cree una carpeta y abra la línea de comando en el directorio. Cree un entorno virtual de python usando el siguiente comando.
python -m venv <name>
Una vez que el comando haya terminado de ejecutarse, active el entorno virtual usando el siguiente comando.
<name>\scripts\activate
Ahora, instale Flask usando pip (instalador de paquetes para python). Simplemente ejecute el siguiente comando.
pip install Flask
Creando app.py
Una vez finalizada la instalación, cree un nombre de archivo app.py y ábralo en su editor favorito. Para verificar si Flask se ha instalado correctamente, puede ejecutar el siguiente código.
Python
from flask import Flask
app = Flask(__name__)
'''If everything works fine you will get a
message that Flask is working on the first
page of the application
'''
@app.route('/')
def check():
return 'Flask is working'
if __name__ == '__main__':
app.run()
Producción:
Configuración de SQLAlchemy
Ahora, pasemos a crear una base de datos para nuestra aplicación. A los efectos de este artículo, utilizaremos SQLAlchemy, un conjunto de herramientas de base de datos y un ORM (Mapeador relacional de objetos). Usaremos pip nuevamente para instalar SQLAlchemy. El comando es el siguiente,
pip install flask-sqlalchemy
En su archivo app.py, importe SQLAlchemy como se muestra en el siguiente código. También necesitamos agregar una configuración a nuestra aplicación para que podamos usar la base de datos SQLite en nuestra aplicación. También necesitamos crear una instancia de base de datos SQLAlchemy que es tan simple como crear un objeto.
Python
from flask import Flask from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) app.debug = True # adding configuration for using a sqlite database app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db' # Creating an SQLAlchemy instance db = SQLAlchemy(app) if __name__ == '__main__': app.run()
Creación de modelos
En sqlalchemy usamos clases para crear nuestra estructura de base de datos. En nuestra aplicación, crearemos una tabla de perfil que se encargará de almacenar la identificación, el nombre, el apellido y la edad del usuario.
Python
from flask import Flask, request, redirect
from flask.templating import render_template
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.debug = True
# adding configuration for using a sqlite database
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'
# Creating an SQLAlchemy instance
db = SQLAlchemy(app)
# Models
class Profile(db.Model):
# Id : Field which stores unique id for every row in
# database table.
# first_name: Used to store the first name if the user
# last_name: Used to store last name of the user
# Age: Used to store the age of the user
id = db.Column(db.Integer, primary_key=True)
first_name = db.Column(db.String(20), unique=False, nullable=False)
last_name = db.Column(db.String(20), unique=False, nullable=False)
age = db.Column(db.Integer, nullable=False)
# repr method represents how one object of this datatable
# will look like
def __repr__(self):
return f"Name : {self.first_name}, Age: {self.age}"
if __name__ == '__main__':
app.run()
La siguiente tabla explica algunas de las palabras clave utilizadas en la clase modelo.
| Columna | se utiliza para crear una nueva columna en la tabla de la base de datos |
| Entero | Un campo de datos enteros |
| Clave primaria | Si se establece en Verdadero para un campo, garantiza que el campo se puede usar para identificar de forma única los objetos de la tabla de datos. |
| Cuerda | Un campo de datos de string. String (<longitud máxima>) |
| único | Si se establece en True, garantiza que todos los datos de ese campo sean únicos. |
| anulable | Si se establece en False, se asegura de que los datos del campo no puedan ser nulos. |
| __repr__ | Función utilizada para representar objetos de la tabla de datos. |
Creando la base de datos
En la línea de comando que se navega al directorio del proyecto y al entorno virtual en ejecución, debemos ejecutar los siguientes comandos.
python
El comando anterior iniciará un bash de python en su línea de comando donde puede usar más líneas de código para crear su tabla de datos de acuerdo con su clase de modelo en su base de datos.
from app import db db.create_all()
Después de los comandos, la respuesta se vería como algo en la imagen y en el directorio de su proyecto notará un nuevo archivo llamado ‘site.db’ .
Haciendo Migraciones en base de datos
Instale Flask-Migrate usando pip
pip install Flask-Migrate
Ahora, en su app.py agregue dos líneas, el código es el siguiente,
Python
# Import for Migrations from flask_migrate import Migrate, migrate # Settings for migrations migrate = Migrate(app, db)
Ahora para crear migraciones ejecutamos los siguientes comandos uno tras otro.
flask db init
matraz db init
flask db migrate -m "Initial migration"
matraz db migrar -m «Migración inicial»
flask db upgrade
actualización de la base de datos del matraz
Ahora hemos creado con éxito la tabla de datos en nuestra base de datos.
Creación de la página de índice de la aplicación
Antes de seguir adelante y construir nuestro formulario, creemos una página de índice para nuestro sitio web. El archivo HTML siempre se almacena dentro de una carpeta en el directorio principal de la aplicación llamada ‘templates’ . Dentro de la carpeta de plantillas, cree un archivo llamado index.html y pegue el siguiente código por ahora. Volveremos a agregar más código en nuestro archivo de índice a medida que avancemos.
HTML
<html> <head> <title>Index Page</title> </head> <body> <h3>Profiles</h3> </body> </html>
En app.py agregue una pequeña función que representará una página HTML en una ruta específica especificada en app.route.
Python
from flask import Flask, request, redirect
from flask.templating import render_template
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.debug = True
# adding configuration for using a sqlite database
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'
# Creating an SQLAlchemy instance
db = SQLAlchemy(app)
# Models
class Profile(db.Model):
id = db.Column(db.Integer, primary_key=True)
first_name = db.Column(db.String(20), unique=False, nullable=False)
last_name = db.Column(db.String(20), unique=False, nullable=False)
age = db.Column(db.Integer, nullable=False)
def __repr__(self):
return f"Name : {self.first_name}, Age: {self.age}"
# function to render index page
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()
Para probar si todo funciona bien, puede ejecutar su aplicación usando el comando
python app.py
El comando configurará un servidor local en http://localhost:5000.
Producción:
Creación de página HTML para formulario
Crearemos una página HTML en la que se representará nuestro formulario. Cree un archivo HTML llamado add_profile en su carpeta de plantillas. El código HTML es el siguiente. Los puntos importantes del código se resaltarán a medida que siga leyendo .
HTML
<!DOCTYPE html> <html> <head> <title>Add Profile</title> </head> <body> <h3>Profile form</h3> <form action="/add" method="POST"> <label>First Name</label> <input type="text" name="first_name" placeholder="first name..."> <label>Last Name</label> <input type="text" name= "last_name" placeholder="last name..."> <label>Age</label> <input type="number" name="age" placeholder="age.."> <button type="submit">Add</button> </form> </body> </html>
Agregar una función en nuestra aplicación para representar la página del formulario
En nuestro archivo app.py, agregaremos la siguiente función. En la ruta o la ruta del sitio ‘http://localhost:5000/add_data’, se representará la página.
Python
@app.route('/add_data')
def add_data():
return render_template('add_profile.html')
Para verificar si el código funciona bien o no, puede ejecutar el siguiente comando para iniciar el servidor local.
python app.py
Ahora, visite http://localhost:5000/add_data y podrá ver el formulario.
Producción:
Función para agregar datos usando el formulario a la base de datos
Para agregar datos a la base de datos usaremos el método “POST” . POST se utiliza para enviar datos a un servidor para crear/actualizar un recurso. En el matraz donde especificamos nuestra ruta, que es app.route, también podemos especificar los métodos HTTP allí. Luego, dentro de la función, creamos variables para almacenar datos y usamos objetos de solicitud para obtener datos del formulario .
Nota: El nombre utilizado en las etiquetas de entrada en el archivo HTML debe ser el mismo que se utiliza en esta función,
Por ejemplo,
<input type="number" name="age" placeholder="age..">
«edad» también debe usarse en la función python como,
age = request.form.get("age")
Luego pasamos a crear un objeto de la clase Perfil y lo almacenamos en nuestra base de datos usando sesiones de base de datos.
Python
# function to add profiles
@app.route('/add', methods=["POST"])
def profile():
# In this function we will input data from the
# form page and store it in our database.
# Remember that inside the get the name should
# exactly be the same as that in the html
# input fields
first_name = request.form.get("first_name")
last_name = request.form.get("last_name")
age = request.form.get("age")
# create an object of the Profile class of models
# and store data as a row in our datatable
if first_name != '' and last_name != '' and age is not None:
p = Profile(first_name=first_name, last_name=last_name, age=age)
db.session.add(p)
db.session.commit()
return redirect('/')
else:
return redirect('/')
Una vez que se ejecuta la función, nos redirige a la página de índice de la aplicación.
Mostrar datos en la página de índice
En nuestra página de índice ahora, mostraremos todos los datos que se han almacenado en nuestra tabla de datos. Usaremos ‘ Profile.query.all() ‘ para consultar todos los objetos de la clase Profile y luego usaremos el lenguaje de plantillas Jinja para mostrarlo dinámicamente en nuestro archivo HTML de índice.
Actualice su archivo de índice de la siguiente manera. La función de eliminación se escribirá más adelante en este artículo. Por ahora, consultaremos todos los datos de la tabla de datos y los mostraremos en nuestra página de inicio.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Index Page</title>
</head>
<body>
<h3>Profiles</h3>
<a href="/add_data">ADD</a>
<br>
<table>
<thead>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>#</th>
</thead>
{% for data in profiles %}
<tbody>
<td>{{data.id}}</td>
<td>{{data.first_name}}</td>
<td>{{data.last_name}}</td>
<td>{{data.age}}</td>
<td><a href="/delete/{{data.id}}" type="button">Delete</a></td>
</tbody>
{% endfor%}
</table>
</body>
</html>
Recorremos cada objeto en los perfiles que pasamos a nuestra plantilla en nuestra función de índice e imprimimos todos sus datos en forma tabular. La función de índice en nuestra app.py se actualiza de la siguiente manera.
Python
@app.route('/')
def index():
# Query all data and then pass it to the template
profiles = Profile.query.all()
return render_template('index.html', profiles=profiles)
Eliminación de datos de nuestra base de datos
Para eliminar datos, ya hemos usado una etiqueta de anclaje en nuestra tabla y ahora solo le asociaremos una función.
Python
@app.route('/delete/<int:id>')
def erase(id):
# Deletes the data on the basis of unique id and
# redirects to home page
data = Profile.query.get(id)
db.session.delete(data)
db.session.commit()
return redirect('/')
La función consulta los datos sobre la base de la identificación y luego los elimina de nuestra base de datos.
Código completo
Se proporcionó el código completo para app.py, index.html y add-profile.html.
app.py
Python
from flask import Flask, request, redirect
from flask.templating import render_template
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate, migrate
app = Flask(__name__)
app.debug = True
# adding configuration for using a sqlite database
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'
# Creating an SQLAlchemy instance
db = SQLAlchemy(app)
# Settings for migrations
migrate = Migrate(app, db)
# Models
class Profile(db.Model):
# Id : Field which stores unique id for every row in
# database table.
# first_name: Used to store the first name if the user
# last_name: Used to store last name of the user
# Age: Used to store the age of the user
id = db.Column(db.Integer, primary_key=True)
first_name = db.Column(db.String(20), unique=False, nullable=False)
last_name = db.Column(db.String(20), unique=False, nullable=False)
age = db.Column(db.Integer, nullable=False)
# repr method represents how one object of this datatable
# will look like
def __repr__(self):
return f"Name : {self.first_name}, Age: {self.age}"
# function to render index page
@app.route('/')
def index():
profiles = Profile.query.all()
return render_template('index.html', profiles=profiles)
@app.route('/add_data')
def add_data():
return render_template('add_profile.html')
# function to add profiles
@app.route('/add', methods=["POST"])
def profile():
# In this function we will input data from the
# form page and store it in our database. Remember
# that inside the get the name should exactly be the same
# as that in the html input fields
first_name = request.form.get("first_name")
last_name = request.form.get("last_name")
age = request.form.get("age")
# create an object of the Profile class of models and
# store data as a row in our datatable
if first_name != '' and last_name != '' and age is not None:
p = Profile(first_name=first_name, last_name=last_name, age=age)
db.session.add(p)
db.session.commit()
return redirect('/')
else:
return redirect('/')
@app.route('/delete/<int:id>')
def erase(id):
# deletes the data on the basis of unique id and
# directs to home page
data = Profile.query.get(id)
db.session.delete(data)
db.session.commit()
return redirect('/')
if __name__ == '__main__':
app.run()
índice.html
HTML
<!DOCTYPE html>
<html>
<head>
<title>Index Page</title>
</head>
<body>
<h3>Profiles</h3>
<a href="/add_data">ADD</a>
<br>
<table>
<thead>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>#</th>
</thead>
{% for data in profiles %}
<tbody>
<td>{{data.id}}</td>
<td>{{data.first_name}}</td>
<td>{{data.last_name}}</td>
<td>{{data.age}}</td>
<td><a href="/delete/{{data.id}}" type="button">Delete</a></td>
</tbody>
{% endfor%}
</table>
</body>
</html>
añadir_perfil.html
HTML
<!DOCTYPE html> <html> <head> <title>Add Profile</title> </head> <body> <h3>Profile form</h3> <form action="/add" method="POST"> <label>First Name</label> <input type="text" name="first_name" placeholder="first name..."> <label>Last Name</label> <input type="text" name= "last_name" placeholder="last name..."> <label>Age</label> <input type="number" name="age" placeholder="age.."> <button type="submit">Add</button> </form> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por amanjha7151 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA