Modelos Flask: simplificando o desenvolvimento da Web

Os modelos Flask são arquivos que definem a estrutura de uma página da Web e permitem gerar conteúdo dinâmico inserindo dados em espaços reservados predefinidos.

Os modelos usam o mecanismo de modelagem Jinja2, que fornece uma ampla variedade de recursos que facilitam a criação de páginas da Web complexas.

Neste artigo, você explorará modelos Flask com exemplos e suas vantagens no desenvolvimento web.

Índice-

O que são modelos de balão?

Em termos simples, os modelos do Flask são arquivos HTML que possuem espaços para alterar o conteúdo.

Chamamos esses espaços de variáveis ​​de modelo e eles são colocados entre chaves duplas ( {{ }} ).

Você pode usar essas variáveis ​​para exibir dados provenientes de seu aplicativo Flask , incluindo entradas de usuários ou informações obtidas de bancos de dados.

Você pode exibir a saída de uma função conectada a uma URL específica como HTML.

No exemplo abaixo, a função chamada “ show_html() ” exibirá “ Aqui está o código html ” com um cabeçalho <h1> .

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
from flask import Flask
app = Flask(__name__)
@app.route('/')
def show_html():
return "<html><body><h1>Here's the html code</h1></body></html>"
if __name__ == '__main__':
app.run(debug = True)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Produzir conteúdo HTML a partir do código Python pode ser difícil, especialmente ao incluir dados variáveis ​​e recursos da linguagem Python, como loops ou condicionais . Isso exigiria muita alternância entre HTML e Python.

É aí que o mecanismo de modelo Jinja2 , fornecido pela Flask, é útil.

Em vez de gerar HTML estático na função, você pode utilizar a função “ render_template() ” para exibir um arquivo HTML.

form.html:

Example: 

1
2
3
4
5
6
7
8
9
<html>
<body>
<center><h1>MR.EXAMPLES</h1></center>
<center><h3>Flask Tutorial</h3></center>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Execute o seguinte código no shell python:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def show_html():
return render_template('form.html')
if __name__ == '__main__':
app.run(debug = True)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O Flask tenta localizar o arquivo HTML no diretório “ templates ” que está situado na mesma pasta do script.

  • Pasta de aplicativos
    • Saudações.py
    • modelos
      • form.html

Um “ sistema de modelagem da web ” é o processo de geração de um arquivo HTML que permite a inserção dinâmica de dados variáveis.

Um sistema de modelo da web inclui um mecanismo de modelo, uma fonte de dados e um processador de modelo.

O Flask faz uso do mecanismo de modelo jinja2. Um modelo da web consiste em código HTML com espaços reservados para variáveis ​​e expressões (neste caso, expressões Python) que são substituídos por valores quando o modelo é exibido.

O código abaixo é armazenado como “form.html” no diretório “templates”.

Example: 

1
2
3
4
5
6
7
8
<html>
<body>
<center><h1>The best programming website in the world is: {{name}}</h1></center>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Em um shell python, implemente o código a seguir para verificar a renderização do modelo.

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/show/<mrx>')
def show_html(mrx):
return render_template('form.html', name = mrx)
if __name__ == '__main__':
app.run(debug = True)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Assim que o servidor de desenvolvimento começar a rodar, você pode abrir seu navegador e inserir o seguinte URL: http://localhost:5000/show/MR.Examples

O componente variável da URL é colocado no espaço reservado “ {{ name }} ”.

O mecanismo de modelo jinja2 possui símbolos específicos para separar do HTML:

Símbolos Visão geral
{% … %} é usado para Declarações.
{{ … }} é usado para Expressões que são exibidas na saída do modelo.
{# … #} é usado para comentários que não são exibidos na saída do modelo.
# … ## é usado para declaração de linha

O exemplo acima mostra a utilização de declarações condicionais em um modelo. A regra de URL direciona para a função votando_html(), que recebe um parâmetro inteiro e o passa para o modelo form.html. Dentro do modelo, o valor do parâmetro de entrada (idade) é comparado a 18 e o HTML é exibido com base no fato de ser maior, menor ou igual a 18.

O script para o modelo HTML denominado form.html é apresentado a seguir:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<body>
<center><h1>Vote Casting Checker</h1></center>
{% if mrx>=18 %}
<h3>Status: </h3><p>Eligible for Voting!</p>
{% else %}
<h3>Status: </h3><p>Not Eligible for Voting!</p>
{% endif %}
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Abaixo está o código Python para renderizar o form.html:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/eligiblity/<int:age>')
def voting_html(age):
return render_template('form.html', mrx = age)
if __name__ == '__main__':
app.run(debug = True)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Você deve observar que as declarações condicionais if-else e endif são encapsuladas no delimitador {%..%}. Depois de executar o script Python, você pode verificar a URL http://localhost/eligiblity/19 e, em seguida, http://localhost/eligiblity/12 para observar como a saída HTML muda condicionalmente.

Código do arquivo HTML do verificador de vogais:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<body>
<center><h1>Vowel Checker</h1></center>
{% if vowel.lower()==('a'or'e'or'i'or'o'or'u') %}
<h3>Status: </h3><p>Its a Vowel</p>
{% else %}
<h3>Status: </h3><p>Not a Vowel</p>
{% endif %}
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Arquivo de código Python do verificador de vogais:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/checker/<char>')
def vowel_html(char):
return render_template('form.html', vowel = char)
if __name__ == '__main__':
app.run(debug = True)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Você também pode implementar construções de loop Python dentro do modelo. Quando você abre a URL http://localhost:5000/courses em seu navegador, a função course() fornecerá um objeto de lista para o modelo form.html.

Dentro do modelo, um loop for é utilizado para renderizar o objeto de lista de cursos como células dentro de uma tabela HTML .

Segue o código do form.html onde a lista de cursos é renderizada:

Example: 

1
2
3
4
5
6
7
8
9
10
11
<html>
<body>
<h2>COURSE LIST</h2>
{% for mrx in course %}
<p>{{mrx}}</p>
{% endfor %}
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está o código Python para a lista de cursos:

Example: 

1
2
3
4
5
6
7
8
9
10
@app.route('/courses')
def course():
course_list = ['Data Structures','Object Oriented Programming','Database Management System','Design Analysis Alogrithm','Probability Statistics']
return render_template('form.html', course = course_list)
if __name__ == '__main__':
app.run(debug = True)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Mais uma vez, você descobrirá que as instruções Python que pertencem ao loop For estão encapsuladas em {%..%}, enquanto as expressões mrx estão contidas em {{ }}.

Você também pode implementar construções de loop Python dentro do modelo. Quando você abre a URL http://localhost:5000/employee em seu navegador, a função employee_detail() fornecerá um objeto de dicionário para o modelo form.html.

Dentro do modelo form.html, um loop for é utilizado para exibir os pares de chave e valor do objeto{} de dicionário do funcionário como células dentro de uma tabela HTML.

Para salvar o script HTML dos detalhes do funcionário, você deve armazená-lo como form.html no diretório de modelos.

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html>
<body>
<h1>EMPLOYEE SALARIES</h1>
<table border = 4>
{% for key, value in employee.items() %}
<tr>
<th width = 150px> {{ key }} </th>
<td width = 150px> {{ value }} </td>
</tr>
{% endfor %}
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

form.html Explicação

  • O código acima é um arquivo de modelo HTML chamado 'form.html' que foi projetado para exibir os salários dos funcionários e funcionará junto com o aplicativo da web Python Flask.
  • O modelo HTML gera uma tabela com um cabeçalho rotulado 'EMPLOYEE SALARIES' e duas colunas denominadas 'key' e 'value'.
  • Dentro da tabela, um loop for é utilizado para iterar sobre o objeto de dicionário 'employee', que foi passado como um parâmetro para o arquivo de modelo do aplicativo Flask.
  • Durante cada iteração do loop for, a chave e o valor atuais do dicionário são atribuídos às variáveis ​​'chave' e 'valor'.
  • Essas variáveis ​​são usadas para preencher as células da tabela para cada linha.
  • Após a iteração de todos os pares chave-valor no dicionário, o modelo HTML conclui o loop com a instrução {% endfor %}.
  • Quando o aplicativo Flask renderizar o arquivo de modelo, ele exibirá uma tabela HTML que contém os nomes dos funcionários e seus respectivos salários.

Execute o código a seguir no ambiente shell do Python.

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/employee')
def employee_detail():
employee_dict = {'Harry':'2000$','Dustin':'1000$','Tory':'900$','Kate':'1700$','Alyssa':'1500$'}
return render_template('form.html', employee = employee_dict)
if __name__ == '__main__':
app.run(debug = True)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exemplo de Explicação

Aqui estão os pontos principais do script Python acima:

  • O script usa o Flask para criar um aplicativo da Web com uma única rota.
  • A rota é definida usando o decorador @app.route e está associada à URL '/employee'.
  • Quando um usuário visita esta URL, a função employee_detail é executada.
  • A função Employees_detail cria um dicionário chamado Employees_dict que contém os nomes e salários de cinco funcionários.
  • A função render_template é chamada com dois argumentos: o nome de um arquivo de modelo HTML e um dicionário de variáveis ​​para preencher o modelo.
  • O dicionário de variáveis ​​passado para render_template contém um único par chave-valor, onde a chave é 'employee' e o valor é o dicionário employee_dict.
  • O aplicativo Flask é iniciado no modo de depuração usando o método app.run() dentro de um bloco if name == ' main ', o que garante que o aplicativo só seja executado se o script for executado diretamente.

Benefícios dos Modelos de Frasco

  • Os modelos Flask permitem a separação da camada de apresentação (HTML/CSS) da lógica do aplicativo (código Python), ajudando assim a manter e atualizar o código do aplicativo sem afetar a aparência da página da web.
  • Os modelos promovem a reutilização de código em páginas da Web por meio do uso de modelos básicos contendo elementos comuns (como cabeçalho, rodapé e barra de navegação), que podem ser estendidos em outros modelos.
  • Os modelos Flask fornecem recursos dinâmicos de criação de conteúdo, permitindo a manipulação de dados e a geração de elementos HTML com base na entrada do usuário ou nos dados do aplicativo usando estruturas de controle como loops e instruções condicionais.
  • Os modelos do Flask podem melhorar o desempenho do aplicativo da Web armazenando em cache os modelos usados ​​com frequência, o que reduz a carga do servidor e melhora o tempo de resposta para solicitações subsequentes.
  • Os modelos Flask podem contribuir para uma melhor experiência do usuário ajudando a criar uma interface de usuário visualmente atraente e consistente, permitindo que os desenvolvedores se concentrem em aprimorar a experiência do usuário sem se preocupar com os detalhes técnicos da renderização HTML e CSS.

Conclusão

Se você é um desenvolvedor que deseja criar aplicativos da Web modernos, os modelos do Flask são um recurso poderoso que você deve considerar usar. Eles permitem que você separe a camada de apresentação da lógica do aplicativo, tornando seu código mais fácil de manter e atualizar ao longo do tempo. Além disso, os modelos do Flask permitem que você reutilize o código em várias páginas da Web, economizando tempo e reduzindo a probabilidade de erros.

Uma das vantagens mais significativas dos modelos Flask é sua capacidade de gerar conteúdo dinâmico. Com os modelos do Flask, você pode criar páginas da Web que se adaptam à entrada do usuário ou à mudança de dados, resultando em uma melhor experiência do usuário. Além disso, os modelos do Flask podem melhorar o desempenho do seu aplicativo da Web, reduzindo a quantidade de dados que precisam ser enviados ao cliente.

No geral, os modelos do Flask são uma ferramenta crítica na criação de aplicativos da Web gerenciáveis, escaláveis ​​e visualmente atraentes. Usando modelos, você pode criar aplicativos da web que são mais fáceis de manter e atualizar ao longo do tempo. Esteja você construindo um site simples ou um aplicativo da web complexo, os modelos Flask são um componente essencial de qualquer projeto Flask.

Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.