Flask é um pequeno e poderoso framework web para Python. É fácil de aprender e simples de usar, permitindo que você crie seu aplicativo da web em um curto período de tempo.
Neste artigo, mostrarei como construir um site simples, contendo duas páginas estáticas com uma pequena quantidade de conteúdo dinâmico. Embora o Flask possa ser usado para criar sites complexos orientados a bancos de dados, começar com páginas estáticas será útil para introduzir um fluxo de trabalho, que podemos generalizar para criar páginas mais complexas no futuro. Após a conclusão, você poderá usar esta sequência de etapas para iniciar seu próximo aplicativo Flask.
Instalando o Frasco
Antes de começar, precisamos instalar o Flask. Como os sistemas variam, as coisas podem dar errado esporadicamente durante essas etapas. Se o fizerem, como todos nós, basta pesquisar a mensagem de erro no Google ou deixar um comentário descrevendo o problema.
Instalar Virtualenv
Virtualenv é uma ferramenta útil que cria ambientes de desenvolvimento Python isolados onde você pode fazer todo o seu trabalho de desenvolvimento.
Usaremos o virtualenv para instalar o Flask. Virtualenv é uma ferramenta útil que cria ambientes de desenvolvimento Python isolados onde você pode fazer todo o seu trabalho de desenvolvimento. Suponha que você encontre uma nova biblioteca Python que gostaria de experimentar. Se você instalá-lo em todo o sistema, existe o risco de bagunçar outras bibliotecas que você possa ter instalado. Em vez disso, use virtualenv para criar um sandbox, onde você pode instalar e usar a biblioteca sem afetar o restante do sistema. Você pode continuar usando esse sandbox para o trabalho de desenvolvimento contínuo ou simplesmente excluí-lo assim que terminar de usá-lo. De qualquer forma, seu sistema permanece organizado e organizado.
É possível que seu sistema já tenha virtualenv. Consulte a linha de comando e tente executar:
Se você vir um número de versão, está pronto e pode pular para esta seção “Instalar Flask”. Se o comando não foi encontrado, use pip para instalar o virtualenv, você já deve ter o pip instalado. Se estiver executando Linux ou Mac OS X, o seguinte deve funcionar para você:
Instalar pip
1 |
sudo apt-get install python3-pip |
Instalar Virtualenv
1 |
$ sudo pip install virtualenv |
Caso você não tenha nenhum desses comandos instalados, existem vários tutoriais online, que vão te mostrar como instalá-lo em seu sistema. Se você estiver executando o Windows, instale o viralenv com pip da seguinte forma:
Instalar Frasco
Depois de instalar virtualenvvocê pode criar um novo ambiente de desenvolvimento isolado, assim:
Aqui, virtualenv cria uma pasta, flaskapp/, e configura uma cópia limpa do Python para você usar. Ele também instala o prático gerenciador de pacotes, pip.
Entre no ambiente de desenvolvimento recém-criado e ative-o para começar a trabalhar nele.
1 |
$ cd flaskapp |
2 |
$ . bin/activate |
Agora, você pode instalar o Flask com segurança:
Configurando a Estrutura do Projeto
Vamos criar algumas pastas e arquivos dentro flaskapp/ para manter nosso aplicativo da web organizado.
1 |
. |
2 |
. |
3 |
├── app |
4 |
│ ├── static |
5 |
│ │ ├── css |
6 |
│ │ ├── img |
7 |
│ │ └── js |
8 |
│ ├── templates |
9 |
│ ├── routes.py |
10 |
│ └── README.md |
Dentro de flaskapp/crie uma pasta, aplicativo/, para conter todos os seus arquivos. Lado de dentro aplicativo/crie uma pasta estático/; é aqui que colocaremos as imagens, CSS e arquivos JavaScript do nosso aplicativo da web, então crie pastas para cada um deles, conforme demonstrado acima. Além disso, crie outra pasta, modelos/, para armazenar os modelos da web do aplicativo. Crie um arquivo Python vazio rotas.py para a lógica do aplicativo, como roteamento de URL.
E nenhum projeto está completo sem uma descrição útil, então crie um README.md arquivo também.
Agora, sabemos onde colocar os recursos do nosso projeto, mas como tudo se conecta? Vamos dar uma olhada no diagrama abaixo para ver o quadro geral:
- Um usuário emite uma solicitação para o URL raiz de um domínio
/para ir para sua página inicial -
rotas.py mapeia a URL
/para uma função Python - A função Python encontra um modelo da web que vive no modelos/ pasta.
- Um modelo da web aparecerá no estático/ pasta para quaisquer arquivos de imagem, CSS ou JavaScript de que ele precisa ao renderizar para HTML
- O HTML renderizado é enviado de volta para rotas.py
- rotas.py envia o HTML de volta para o navegador
Começamos com uma solicitação emitida de um navegador da web. Um usuário digita um URL na barra de endereços. o pedido bate rotas.py, que possui um código que mapeia a URL para uma função. A função encontra um modelo no modelos/ pasta, o renderiza em HTML e o envia de volta ao navegador. A função pode, opcionalmente, buscar registros de um banco de dados e, em seguida, passar essas informações para um modelo da Web, mas como estamos lidando principalmente com páginas estáticas neste artigo, vamos pular a interação com um banco de dados por enquanto.
Agora que conhecemos a estrutura do projeto que configuramos, vamos começar a criar uma página inicial para nosso aplicativo da web.
Criando uma página inicial
Quando você escreve um aplicativo da Web com algumas páginas, rapidamente se torna irritante escrever o mesmo clichê HTML repetidamente para cada página. Além disso, e se você precisar adicionar um novo elemento ao seu aplicativo, como um novo arquivo CSS? Você teria que entrar em cada página e adicioná-la. Isso é demorado e sujeito a erros. Não seria bom se, em vez de escrever repetidamente o mesmo clichê HTML, você pudesse definir o layout da página apenas uma vez e, em seguida, usar esse layout para criar novas páginas com seu próprio conteúdo? Isso é exatamente o que os modelos da web fazem!
Os modelos da Web são simplesmente arquivos de texto que contêm variáveis e instruções de fluxo de controle (
if..else,foretc) e termine com um.htmlou.xmlextensão.
As variáveis são substituídas pelo seu conteúdo, quando o modelo da web é avaliado. Os modelos da Web eliminam a repetição, separam o conteúdo do design e facilitam a manutenção de seu aplicativo. Em outras palavras mais simples, os modelos da web são incríveis e você deve usá-los! Flask usa o mecanismo de modelo Jinja2; vamos ver como usá-lo.
Como primeiro passo, definiremos nosso layout de página em um esqueleto de documento HTML layout.html e colocá-lo dentro do modelos/ pasta:
app/templates/layout.html
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
{% block content %}
|
16 |
{% endblock %}
|
17 |
|
18 |
|
19 |
|
20 |
|
Este é simplesmente um arquivo HTML normal… mas o que está acontecendo com o {% block content %}{% endblock %} papel? Para responder a isso, vamos criar outro arquivo home.html:
app/templates/home.html
1 |
{% extends "layout.html" %}
|
2 |
{% block content %}
|
3 |
|
4 |
Welcome to the Flask app |
5 |
This is the home page for the Flask app |
6 |
|
7 |
{% endblock %}
|
O arquivo layout.html define um bloco vazio, chamado contentque um modelo filho pode preencher. O arquivo home.html é um modelo filho que herda a marcação de layout.html e preenche o bloco “conteúdo” com seu próprio texto. Em outras palavras, layout.html define todos os elementos comuns do seu site, enquanto cada modelo filho o personaliza com seu próprio conteúdo.
Tudo isso parece legal, mas como realmente vemos esta página? Como podemos digitar uma URL no navegador e “visitar” home.html? Vamos nos referir à figura acima. Acabamos de criar o modelo home.html e colocou no modelos/ pasta. Agora, precisamos mapear uma URL para que possamos visualizá-la no navegador. vamos abrir rotas.py e faça isso:
app/routes.py
1 |
from flask import Flask, render_template |
2 |
app = Flask(__name__) |
3 |
|
4 |
@app.route('/') |
5 |
def home(): |
6 |
return render_template('home.html') |
7 |
|
8 |
if __name__ == '__main__': |
9 |
app.run(debug=True) |
é isso para rotas.py. O que nós fizemos?
- Primeiro. importamos a classe Flask e uma função
render_template. - Em seguida, criamos uma nova instância da classe Flask.
- Em seguida, mapeamos o URL
/para a funçãohome(). Agora, quando alguém visita esta URL, a funçãohome()irá executar. - A função
home()usa a função Flaskrender_template()renderizar o home.html modelo que acabamos de criar a partir do modelos/ pasta para o navegador. - Finalmente, usamos
run()para executar nosso aplicativo em um servidor local. vamos definir odebugsinalizar paratruepara que possamos visualizar quaisquer mensagens de erro aplicáveis se algo der errado e para que o servidor local recarregue automaticamente depois que fizermos alterações no código.
Finalmente estamos prontos para ver os frutos do nosso trabalho. Retorne à linha de comando e digite:
Visite http://localhost:5000/ em seu navegador da Web favorito.
Quando visitamos http://localhost:5000/, rotas.py tinha código nele, que mapeou o URL / para a função Python home(). home() encontrei o modelo da web home.html no modelos/ pasta, renderizou-o em HTML e enviou-o de volta ao navegador, dando-nos a tela acima.
Muito bom, mas esta página inicial é um pouco chata, não é? Vamos melhorar a aparência adicionando um pouco de CSS. Crie um arquivo, main.cssdentro de static/css/e adicione estas regras:
static/css/main.css
1 |
body { |
2 |
margin: 0; |
3 |
padding: 0; |
4 |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
5 |
color: #444; |
6 |
}
|
7 |
/*
|
8 |
* Create dark grey header with a white logo
|
9 |
*/
|
10 |
|
11 |
header { |
12 |
background-color: #2B2B2B; |
13 |
height: 35px; |
14 |
width: 100%; |
15 |
opacity: .9; |
16 |
margin-bottom: 10px; |
17 |
}
|
18 |
header h1.logo { |
19 |
margin: 0; |
20 |
font-size: 1.7em; |
21 |
color: #fff; |
22 |
text-transform: uppercase; |
23 |
float: left; |
24 |
}
|
25 |
header h1.logo:hover { |
26 |
color: #fff; |
27 |
text-decoration: none; |
28 |
}
|
29 |
/*
|
30 |
* Center the body content
|
31 |
*/
|
32 |
|
33 |
.container { |
34 |
width: 940px; |
35 |
margin: 0 auto; |
36 |
}
|
37 |
div.jumbo { |
38 |
padding: 10px 0 30px 0; |
39 |
background-color: #eeeeee; |
40 |
-webkit-border-radius: 6px; |
41 |
-moz-border-radius: 6px; |
42 |
border-radius: 6px; |
43 |
}
|
44 |
h2 { |
45 |
font-size: 3em; |
46 |
margin-top: 40px; |
47 |
text-align: center; |
48 |
letter-spacing: -2px; |
49 |
}
|
50 |
h3 { |
51 |
font-size: 1.7em; |
52 |
font-weight: 100; |
53 |
margin-top: 30px; |
54 |
text-align: center; |
55 |
letter-spacing: -1px; |
56 |
color: #999; |
57 |
}
|
Adicione esta folha de estilo ao arquivo esqueleto layout.html para que o estilo se aplique a todos os seus modelos filhos adicionando esta linha ao seu
elemento:
1 |
|
Estamos usando a função Flask, url_forpara gerar um caminho de URL para main.css de estático pasta. Depois de adicionar esta linha, layout.html agora deve se parecer com:
app/templates/layout.html
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
{% block content %}
|
16 |
{% endblock %}
|
17 |
|
18 |
|
19 |
|
Vamos voltar ao navegador e atualizar a página para ver o resultado do CSS.
É mais assim! Agora, quando visitamos http://localhost:5000/, rotas.py ainda mapeia a URL / para a função Python home()e home() ainda encontra o modelo da web home.html no modelos/ pasta. Mas, como adicionamos o arquivo CSS main.csso modelo da web home.html olha em estático/ para encontrar esse ativo, antes de renderizar em HTML e ser enviado de volta ao navegador.
Conseguimos muito até agora. Começamos com a Fig. 1 entendendo como o Flask funciona e agora vimos como tudo funciona, criando uma página inicial para nosso aplicativo da web. Vamos seguir em frente e criar uma página Sobre.
Criando uma página sobre
Na seção anterior, criamos um modelo da web home.html estendendo o arquivo esqueleto layout.html. Em seguida, mapeamos o URL / para home.html no rotas.py para que possamos visitá-lo no navegador. Terminamos as coisas adicionando alguns estilos para torná-lo bonito. Vamos repetir esse processo novamente para criar uma página sobre para nosso aplicativo da web.
Começaremos criando um modelo da web, sobre.htmle colocando-o dentro do modelos/ pasta.
app/templates/about.html
1 |
{% extends "layout.html" %}
|
2 |
|
3 |
{% block content %}
|
4 |
About
|
5 |
This is an About page for the Intro to Flask article. Don't I look good? Oh stop, you're making me blush.
|
6 |
{% endblock %}
|
Assim como antes com home.htmlestendemo-nos de layout.htmle, em seguida, preencha o content bloquear com nosso conteúdo personalizado.
Para visitar esta página no navegador, precisamos mapear uma URL para ela. Abra rotas.py e adicione outro mapeamento:
1 |
from flask import Flask, render_template |
2 |
|
3 |
app = Flask(__name__) |
4 |
|
5 |
@app.route('/') |
6 |
def home(): |
7 |
return render_template('home.html') |
8 |
|
9 |
@app.route('/about') |
10 |
def about(): |
11 |
return render_template('about.html') |
12 |
|
13 |
if __name__ == '__main__': |
14 |
app.run(debug=True) |
Mapeamos a URL /about para a função about(). Agora podemos abrir o navegador e ir para http://localhost:5000/about e conferir nossa página recém-criada.
Adicionando Navegação
A maioria dos sites tem links para suas páginas principais no cabeçalho ou rodapé do documento. Esses links geralmente são visíveis em todas as páginas de um site. Vamos abrir o arquivo esqueleto, layout.html. e adicione esses links para que apareçam em todos os modelos filhos. Especificamente, vamos adicionar um
