Menu

Modelo, formulário, visualização e redirecionamento de frasco com exemplos

  • Principal
  • Outro
  • Modelo, formulário, visualização e redirecionamento de frasco com exemplos

flask template form

Experimente Nosso Instrumento Para Eliminar Problemas

Este tutorial explica o que são Flask Template, Form, View, Response e Redirect com exemplos práticos:

Em geral, o Templating é usado em Programação, para reutilizar uma parte do texto com dados diferentes. Com relação ao desenvolvimento da Web, os designers usam modelos para exibir os dados em um formato legível e atraente para leitores humanos.

Um design de modelo geralmente envolve o uso de uma linguagem devido às complexidades impostas pela interação humana.

=> Dê uma olhada no guia para iniciantes do frasco aqui

Modelos, visualizações e formulários de flask

O que você aprenderá:

Introdução

O Flask usa um mecanismo de modelos chamado Jinja2, que exibe o comportamento de um aplicativo com base no nível de interação do usuário. Um modelo Jinja usa variáveis, expressões e tags.

Variáveis ​​e expressões são substituídas por valores durante o tempo de execução, antes da renderização da página no navegador. As tags Jinja ajudam a escrever a lógica e instruções de controle no modelo Flask.

Flask View

A noção de visualização Flask é derivada de um padrão de design de aplicativo da web predominante chamado Model-View-Controller. A View é um dos três elementos interconectados neste paradigma, onde lida com a lógica do aplicativo. A visualização cuida da apresentação das informações ao usuário.

Em nosso tutorial anterior, projetamos uma View criando uma subclasse da classe BaseView do Flask-Appbuilder. Na parte subsequente deste tutorial, iremos estender nosso último exemplo e apresentar maneiras nas quais as visualizações podem ser personalizadas.

Modelo de Frasco

Vamos começar e escrever nosso primeiro modelo. Crie um arquivo chamado hello.html no diretório de modelos.

Escreva o código a seguir nesse arquivo e salve-o.

Hello World!, from Software Testing Help.

{% for item in greetings %} {% if 'Morning' in item %}

{{item}}

{% else %}

{{item}}

{% endif %} {% endfor %}

Modelo para loop

No template Flask acima, usamos um loop for para iterar nos itens da lista. Em nosso controlador ou manipulador, passamos uma lista com valores de saudações para o modelo. Dentro do modelo, acessamos cada item usando a sintaxe {{item}}.

Modelo se bloco

Além disso, anote o uso de uma instrução if. Aqui, testamos o item para Manhã e o colocamos em negrito e itálico.

Agora vamos avançar para aprender mais sobre os conceitos do Flask Forms.

Formulários de frasco

Um dos aspectos mais cruciais da modelagem é pegar as entradas dos usuários e escrever a lógica de back-end com base nessa entrada. Vamos criar um formulário.

Usamos Flask-Appbuilder SimpleFormView para renderizar nosso formulário. No entanto, vamos criar um formulário primeiro. Além da criação de um formulário, precisamos usar o comando flask fab create-admin para criar um usuário administrador.

Portanto, use o comando antes de iniciar o servidor de desenvolvimento para que as visualizações e formulários criados posteriormente possam ser validados com um usuário conectado. Fazemos login com o usuário administrador e continuamos validando se as visualizações criadas estão visíveis no menu, conforme mostrado nas imagens.

Criar Admin

Use o comando abaixo para criar um usuário administrador.

frasco fab criar admin

Faça login com as credenciais de administrador

  • Clique em Login depois de navegar para http: // localhost: 8080.
Faça login como administrador
Faça login como administrador
  • Faça login com as credenciais de administrador, criadas na seção anterior.
Clique em Login
Clique em Sign in
  • Clique na categoria Meus formulários para acessar suas visualizações.
Clique no Menu
Clique no Menu

Observação: Você poderá executar a última etapa somente após adicionar as visualizações ao menu padrão mostrado na barra de navegação.

Vamos continuar e criar algumas visualizações baseadas em formulário.

Crie um arquivo chamado forms.py no diretório do app e escreva o código a seguir nele.

from wtforms import Form, StringField from wtforms.validators import DataRequired from flask_appbuilder.fieldwidgets import BS3TextFieldWidget from flask_appbuilder.forms import DynamicForm class GreetingsForm(DynamicForm): greeting1 = StringField(('Morning'), description = ('Your morning Greeting'), validators = (DataRequired()), widget = BS3TextFieldWidget()) greeting2 = StringField(('Afternoon'), description = ('Your Afternoon Greeting'), validators = (DataRequired()), widget = BS3TextFieldWidget()) greeting3 = StringField(('Evening'), description = ('Your Evening Greeting'), widget = BS3TextFieldWidget()) greeting4 = StringField(('Night'), description = ('Your Night Greeting'), widget = BS3TextFieldWidget())

Criamos um formulário baseado no DynamicForm do Flask-Appbuilder. Existem quatro campos de texto. Estendemos nosso exemplo de saudação. Dos quatro campos, dois são obrigatórios e dois são opcionais porque, para as duas primeiras saudações, mencionamos os valores dos validadores.

Agora vamos criar uma visão para este formulário. Escreva as seguintes linhas de código no arquivo views.py.

from flask import render_template, flash from flask_appbuilder import SimpleFormView from app.forms import GreetingsForm class GreetingsView(SimpleFormView): form = GreetingsForm form_title = 'This is a Greetings form' message = 'Your Greetings are submitted' def form_get(self, form): form.greeting1.data = 'Your Morning Greeting' form.greeting2.data = 'Your Afternoon Greeting' form.greeting3.data = 'Your Evening Greeting' form.greeting4.data = 'Your Night Greeting' def form_post(self, form): flash(self.message, 'info') greetings = ( form.greeting1.data, form.greeting2.data, form.greeting3.data, form.greeting4.data, ) session('greetings')=greetings return redirect(url_for('HelloWorld.hello_greetings2'))

Em nossa visão acima, temos dois métodos chamados form_get e form_post para preencher os valores padrão nos campos dos formulários e ler os valores inseridos assim que o formulário for enviado do navegador, respectivamente.

O GreetingsView exibe o formulário, conforme mostrado na imagem abaixo.

Formulário de Saudações

Também utilizamos um objeto de sessão Flask para armazenar os valores dos campos em form_post para que possamos acessar os mesmos na nova visualização correspondente que estamos prestes a escrever.

Vamos agora modificar a classe HelloWorld e adicionar outro método para exibir as saudações. Vamos chamá-lo de hello_greetings2.

class HelloWorld(BaseView): ## other methods @expose('/greetings2') def hello_greetings2(self): greetings = session('greetings') return render_template('hello.html', greetings=greetings)

Nesta visualização, lemos os valores do objeto de sessão e usamos o modelo de renderização Flask para exibir esses valores no HTML voltado para o usuário. Observe que hello_greetings2 é uma maneira alternativa de obter a mesma funcionalidade semelhante a hello_greetings.

A única diferença é que usando hello_greetings2, estamos mostrando os valores que são inseridos pelo usuário, e em hello_greetings não pegamos nenhuma entrada do usuário e as codificamos enquanto escrevíamos a visão mapeada para a respectiva rota.

Resposta do frasco

É muito raro encontrar o uso explícito da resposta do Flask no código. A classe Response no Flask é apenas uma subclasse da classe Response da classe Response de Werkzueg, que por sua vez cria uma subclasse de sua classe ResponseBase.

O objeto Flask Response é formado internamente por Flask sempre que chamamos uma instrução de retorno ou um método como render_template.

Além disso, podemos personalizar o código de resposta e o tipo de conteúdo, se necessário, como parte da instrução de retorno em nossas visualizações, conforme mostrado na visualização HelloWorld modificada abaixo.

class HelloWorld(BaseView): ## other methods @expose('/greetings2') def hello_greetings2(self): greetings = session('greetings') return render_template('hello.json', greetings=greetings), 201, {'Content-Type' : 'application/json'

O uso direto da classe Resposta do Flask pode ser abordado em um caso de uso quando transmitimos o conteúdo em vez de retornar o conteúdo completo de uma vez por causa das restrições de tamanho do arquivo e largura de banda da rede.

Mostramos abaixo um exemplo de streaming do conteúdo de um CSV grande.

from flask import Response @app.route('https://cdn.softwaretestinghelp.com/largefile.csv') def send_large_csv(): '''A controller to stream the content of a large csv file''' def gen(): for row in iter_all_rows(): yield ','.join(row) + ' ' return Response(gen(), mimetype='text/csv')

Redirecionamento de frasco

Nem sempre é possível para um aplicativo predefinir a resposta com base nas diferentes solicitações do cliente.

Usamos Flask Redirect, em cenários onde é possível servir o conteúdo que pode ser preenchido por outras views ou locais em resposta a uma solicitação. Usamos Flask Redirect junto com abort com os códigos de retorno HTTP padrão.

Por exemplo, no código abaixo, usamos Redirect com HTTP Code 301 e abort com 401.

from flask import Flask, redirect, url_for, request, abort app = Flask(__name__) @app.route('/') def index(): return render_template('log_in.html') # Log In template @app.route('/login',methods = ('POST', 'GET')) def login(): if request.method == 'POST': if request.form('username') == 'admin' : # if user is admin return redirect(url_for('success')), 301 else: abort(401) # stop processing else: return redirect(url_for('index')) # redirect to another view

Além disso, verifique em GreetingsView onde usamos Flask redirect e url_for para redirecionar uma solicitação internamente para uma exibição diferente, armazenando os valores de saudações no objeto de sessão. O redirecionamento de flask sempre retorna um objeto de resposta, com o código de status padrão ou fornecido para outro local no aplicativo.

Flask Debugtoolbar

Já apresentamos o depurador interativo do Flask em nosso último tutorial. Neste tutorial, damos mais uma etapa para facilitar a depuração do aplicativo Flask. Depois de instalada, a barra de ferramentas Flask Debug é exibida como uma sobreposição sobre o aplicativo Flask.

Instale a barra de ferramentas Flask Debug.

pip install flask-debugtoolbar

Para ativar a debugtoolbar, abra o arquivo __init__.py em nosso projeto e modifique o código adicionando as seguintes linhas de código.

from flask_debugtoolbar import DebugToolbarExtension app.debug = True toolbar = DebugToolbarExtension(app)

Observe que a barra de ferramentas de depuração do Flask está habilitada apenas no modo de depuração. Depois de habilitado, ao recarregar seu aplicativo, você observará duas coisas.

# 1) A barra de ferramentas de depuração aparece no lado direito do navegador. Clique e expanda-o para ver os vários recursos fornecidos pela barra de ferramentas.

Ativação da barra de depuração
Ativação da barra de depuração

#dois) Sempre que uma nova solicitação POST é enviada para a aplicação, ela é interceptada pela barra de ferramentas para que possamos inspecionar as variáveis ​​e os demais parâmetros pertinentes à depuração da aplicação.

Depurar interceptação da barra de ferramentas
Depurar interceptação da barra de ferramentas

Esta interceptação padrão pode ser desabilitada com a configuração abaixo.

app.config('DEBUG_TB_INTERCEPT_REDIRECTS') = False Resultados de Pytest
Variáveis ​​da barra de ferramentas de depuração

Agora vamos escrever alguns testes para testar nossas visualizações para os recursos adicionais que introduzimos no aplicativo de amostra.

software escrito em c ++

Antes de prosseguir com o teste, desative a depuração conforme mostrado abaixo em __init__.py. Alternativamente, você pode comentar a linha abaixo.

app.debug = False

Testando visualizações do aplicativo Flask

Precisamos organizar o código de teste para torná-lo mais gerenciável. Crie um arquivo chamado conftest.py no diretório raiz e mova as linhas mencionadas abaixo de test_hello.py para este arquivo.

from app import appbuilder import pytest @pytest.fixture def client(): ''' A pytest fixture for test client ''' appbuilder.app.config('TESTING') = True with appbuilder.app.test_client() as client: yield client

Os acessórios pytest são carregados por pytest em tempo de execução. Esses acessórios estão disponíveis e são compartilhados com todos os testes. Definir um conftest.py no caminho raiz de qualquer projeto é considerado uma prática recomendada porque o pytest pode reconhecer todos os módulos no projeto sem especificar um PYTHONPATH explícito.

Adicione mais um teste para o arquivo test_hello. Um exemplo de teste é fornecido abaixo. Chamamos o método get do objeto cliente e afirmamos o valor esperado nos dados de resposta armazenados em resp.data.

Da mesma forma, você pode escrever mais testes apontando para várias visualizações. Devemos escrever mais testes nos tutoriais subsequentes.

def test_greetings(client): ''' A test method to test view hello_greetings''' resp = client.get('/hello/greetings', follow_redirects=True) assert b'Good Morning' in resp.data

Execute os testes usando o comando abaixo do diretório raiz do projeto.

pytest -v

A execução do teste produz os resultados do teste no console, conforme mostrado abaixo:

Falha em pytest
Resultados de Pytest

Ainda não há falhas. Vamos projetar mais um teste, conforme mencionado abaixo.

def test_greetings2(client): ''' A test method to test view hello_greetings2 ''' resp = client.get('/hello/greetings2', follow_redirects=True) assert b'Good Morning' in resp.data

Este teste falhará porque não definimos nenhum atributo de mensagem na classe HelloWorld no arquivo views.py.

Depois de executar os testes usando pytest -v, novamente os resultados semelhantes à imagem mostrada abaixo serão exibidos no console.

Falha em pytest

A seção abaixo explica as etapas que precisamos realizar durante a execução dos testes em uma plataforma CI / CD. Usamos Git Actions para o mesmo projeto.

CI / CD com ações Git

Agora salvamos todas as mudanças nos arquivos e criamos um commit dando a mensagem para este tutorial. Depois de confirmar no repositório local, puxamos as alterações da origem remota com o sinalizador –rebase para ver se há algum conflito com as novas alterações no remoto. Nós rebase para manter a história consistente.

Use o comando abaixo para extrair e mesclar as alterações da origem remota. No entanto, confirme suas alterações antes de puxar as alterações remotamente.

git pull origin master --rebase

Agora verifique o branch master local e mescle com o branch tutorial-2. Assim que a fusão for bem-sucedida, publique essas alterações no mestre de origem. Esta ação irá invocar as compilações nas plataformas de destino. Estamos testando este código no Python3.7 e Python 3.8 no Ubuntu mais recente.

Conclusão

Neste tutorial, vimos como os modelos funcionam na estrutura Flask. Descrevemos as etapas de criação e renderização de modelos de frasco com valores definidos pelo usuário usando variáveis ​​e expressões.

Também vimos exemplos de uma visualização pré-definida BaseView do plugin Flask Appbuilder. Esta visão pode ser subclassificada prontamente pelos desenvolvedores do Flask para criar visualizações personalizadas.

Os conceitos abordados até agora ajudam os leitores a criar rapidamente sites estáticos e dinâmicos usando o Flask sem um back-end de banco de dados. Explicaremos como ler e gravar dados de e para os bancos de dados com ModelView no próximo tutorial, quando examinarmos o conceito de uso de bancos de dados com Flask.

=> Leia a série de treinamento Easy Flask

Leitura recomendada

^