11 de dezembro de 2018●3 min de leitura

Render Web Template com Python Flask

Geração de template HTML com Python Flask

Python

Web

Flask

Entregar páginas Web interpretando como se fossem estáticas, reduz a carga de processamento pelo cliente, executando pelo servidor onde pode estar a base de dados e outros recursos, podendo ser disponíveis somente neste ambiente

Montagem do Modelo

Fazendo uso do Jinja, um modelo de sintaxe e semântica, montamos um documento HTML, fazendo uso de delimitadores para expressões {{ e }} e controles de fluxo {% e %}
Inserir um valor direto no corpo do arquivo

<!DOCTYPE html>
<h1>Hello {{ nome }}</h1>

Com o uso de if mudamos o fluxo de treços de código

<!DOCTYPE html>
{% if nome %}
<h1>Hello {{ nome }}!</h1>
{% else %}
<h1>Hello, World!</h1>
{% endif %}

ou por uso de if ternário, seguindo o padrão do Python

<!DOCTYPE html>
<h1>Hello, {{ nome if nome else 'World'}}!</h1>

Através da iteração de uma lista de objetos, salvando na pasta de template com o nome de lista.html

<!DOCTYPE html>
<ul id="navigation">
  {% for item in navigation %}
  <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
  {% endfor %}
</ul>

Com o uso um modelo padrão, salvando na pasta de template com o nome de base.html

<!doctype html>
  <h1>{% block titulo %}{% endblock %}</h1>

  <div class="wrapper">
    {% block corpo %}{% endblock %}
  </div

As definições de bloco {% block titulo %} e {% block corpo %} podem ser preenchidas por qualquer página ao estender o documento de base, vamos fazer isso no lista.html

{% extends 'base.html' %} {% block titulo %} Página Teste {% endblock %} {%
block corpo %}
<ul id="navigation">
  {% for item in navigation %}
  <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
  {% endfor %}
</ul>
{% endblock %}

A estrutura de arquivos deve ficar assim:

/app.py /templates /hello.html /lista.html /base.html

Preparação

Instalar o pelo gerenciador de pacotes, recomendo o uso de Ambiente Virtual

pip install flask

Iniciando o arquivo app.py com a declaração do flask

from flask import Flask
app = Flask(__name__)

Interpretação

Adicionando no arquivo app.py a opção de rotas para ouvir o caminho /hello/ com e sem parâmetros

from flask import render_template

@app.route('/hello/')
@app.route('/hello/<param>')
def hello(param=None):
    return render_template('hello.html', nome=param)

Também adicionando no arquivo app.py a /lista/ passando a listagem em navigation como fixa para ilustração

from flask import render_template

@app.route('/lista/')
def lista():
    list = [
        {"href":"#1", "caption":"primeiro"},
        {"href":"#2", "caption":"segundo"}
    ]
    return render_template('lista.html', navigation=list)

Arquivos Estáticos

Folhas de estilo não costumam sofre variação na execução do sistema, não sendo necessária a interpretação da mesma Para entregar devemos adicionar na pasta static na raiz do projeto

/app.py /templates /static /style.css

E adiciona o trecho na página HTML

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />

ou direto no intepretador, e informando o caminho /static/style.css, mas desta maneira é necessário definir um contexto como no exemplo abaixo

from flask import url_for
app.config['SERVER_NAME'] = "127.0.0.1:5000"

with app.app_context():
  url_for('static', filename='style.css')

Favicon

Para adicionar o favicon.ico na página basta colocar o arquivo na pasta static e adicionar o trecho no texto do HTML

<link
  rel="shortcut icon"
  href="{{ url_for('static', filename='favicon.ico') }}"
/>

Execução

Se o pacote do flask estiver instalado e arquivo nomeado como app.py, basta executar o comando abaixo ou rodar python <nome do arquivo> para outro nome de arquivo