Web Usando Flask em Python 3 - DigitalOcean

16/10/2022 23:21 Como fazer um aplicativo da Web usando Flask em Python 3 | DigitalOcean
CONTENTS
Prerequisites
Step 1 — Installing Flask
Step 2 — Creating a Base Application
Step 3 — Using HTML templates
Step 4 — Setting up the Database
Step 5 — Displaying All Posts
Step 6 — Displaying a Single Post
Step 7 — Modifying Posts
Conclusion
R E L AT E D
How To Setup uWSGI On Ubuntu 12.10

View
How To Create Nagios Plugins With Python On CentOS 6
View
// Tutorial //
Como fazer um aplicativo da Web usando Flask em
Python 3
Publicado em 16 de abril de 2020 · Atualizado em 16 de abril de 2020

https://www.digitalocean.com/community/tutorials/how-to-make-a-web-application-using-flask-in-python-3 1/41
Pitão Estruturas Python Projeto de Programação Desenvolvimento Frasco

SQLite
Por Abdelhadi Dyuri Inglês
Desenvolvedor e autor na DigitalOcean.
O autor selecionou o Free and Open Source Fund para receber uma doação como parte
do programa Write for DOnations .
Introdução
Flask é um framework web Python pequeno e leve que fornece ferramentas e recursos
úteis que facilitam a criação de aplicativos web em Python. Ele oferece flexibilidade aos
desenvolvedores e é uma estrutura mais acessível para novos desenvolvedores, pois
você pode criar um aplicativo da Web rapidamente usando apenas um único arquivo
Python. O Flask também é extensível e não força uma estrutura de diretório específica
ou requer um código clichê complicado antes de começar.
Como parte deste tutorial, você usará o kit de ferramentas Bootstrap para estilizar seu
aplicativo para que ele fique mais visualmente atraente. O Bootstrap ajudará você a
incorporar páginas da Web responsivas em seu aplicativo da Web para que também
funcione bem em navegadores móveis sem escrever seu próprio código HTML, CSS e
JavaScript para atingir esses objetivos. O kit de ferramentas permitirá que você se
concentre em aprender como o Flask funciona.
Flask usa o mecanismo de modelo Jinja para construir páginas HTML dinamicamente
usando conceitos Python familiares, como variáveis, loops, listas e assim por diante.
Você usará esses modelos como parte deste projeto.

Neste tutorial, você construirá um pequeno web blog usando Flask e SQLite em Python
3. Os usuários do aplicativo podem visualizar todas as postagens em seu banco de
dados e clicar no título de uma postagem para visualizar seu conteúdo com a
capacidade de adicionar um nova postagem no banco de dados e edite ou exclua uma
postagem existente.
Pré-requisitos
Antes de começar a seguir este guia, você precisará de:

Um ambiente de programação local do Python 3, siga o tutorial para sua
distribuição em Como instalar e configurar um ambiente de programação local
para a série Python 3 para sua máquina local. Neste tutorial, chamaremos nosso
diretório de projeto flask_blog .
Uma compreensão dos conceitos do Python 3, como tipos de dados , instruções
condicionais , loops for , funções e outros conceitos semelhantes. Se você não
estiver familiarizado com o Python, confira nossa série How To Code in Python 3 .
Passo 1 — Instalando o Flask
Nesta etapa, você ativará seu ambiente Python e instalará o Flask usando o
pip instalador de pacotes.
Se você ainda não ativou seu ambiente de programação, certifique-se de estar no

diretório do projeto ( flask_blog ) e use o seguinte comando para ativar o ambiente:
$ source env /bin/activate
cópia de
Depois que seu ambiente de programação estiver ativado, seu prompt agora terá um
env prefixo que pode ter a seguinte aparência:
(env)sammy@localhost:$
cópia de
Esse prefixo é uma indicação de que o ambiente env está ativo no momento, que pode
ter outro nome dependendo de como você o nomeou durante a criação.
Observação: você pode usar o Git , um sistema de controle de versão, para gerenciar e
acompanhar com eficácia o processo de desenvolvimento do seu projeto. Para aprender
a usar o Git, confira nosso artigo Introdução ao uso e ramificações da instalação do Git .
Se você estiver usando o Git, é uma boa ideia ignorar o env diretório recém-criado em
seu .gitignore arquivo para evitar o rastreamento de arquivos não relacionados ao
projeto.
Agora você instalará os pacotes Python e isolará o código do seu projeto da instalação
principal do sistema Python. Você fará isso usando pip e python .
Para instalar o Flask, execute o seguinte comando:
(env)sammy@localhost:$ pip install flask
cópia de
Quando a instalação estiver concluída, execute o seguinte comando para confirmar a
instalação:
(env)sammy@localhost:$ python -c "import flask; print(flask.__version__)"
cópia de
Você usa a python interface de linha de comando com a opção -c de executar o código
Python. Em seguida, você importa o flask pacote import flask; e imprime a versão do
Flask, que é fornecida por meio da flask.__version__ variável.
A saída será um número de versão semelhante ao seguinte:
Output
1.1.2
Você criou a pasta do projeto, um ambiente virtual e instalou o Flask. Agora você está
pronto para prosseguir com a configuração de seu aplicativo base.
Etapa 2 — Criando um aplicativo base
Agora que você configurou seu ambiente de programação, começará a usar o Flask.
Nesta etapa, você criará um pequeno aplicativo da Web dentro de um arquivo Python e
o executará para iniciar o servidor, que exibirá algumas informações no navegador.
Em seu flask_blog diretório, abra um arquivo nomeado hello.py para edição, use nano ou
seu editor de texto favorito:
(env)sammy@localhost:$ nano hello.py
cópia de
Este hello.py arquivo servirá como um exemplo mínimo de como lidar com solicitações
HTTP. Dentro dele, você importará o Flask objeto e criará uma função que retornará
uma resposta HTTP. Escreva o seguinte código dentro de hello.py :
frasco_blog/hello.py
from flask import Flask cópia de
app = Flask(__name__)
@app.route('/')
def hello():
return 'Hello, World!'
No bloco de código anterior, você primeiro importa o Flask objeto do flask pacote. Em
seguida, você o usa para criar sua instância do aplicativo Flask com o nome app . Você
passa a variável especial __name__ que contém o nome do módulo Python atual. Ele é
usado para informar à instância onde está localizada - você precisa disso porque o
Flask configura alguns caminhos nos bastidores.
Depois de criar a app instância, você a usa para lidar com solicitações da Web recebidas
e enviar respostas ao usuário. @app.route é um decorador que transforma uma função
Python regular em uma função de visualização Flask , que converte o valor de retorno
da função em uma resposta HTTP a ser exibida por um cliente HTTP, como um
navegador da web. Você passa o valor '/' para @app.route() para indicar que esta
função responderá às solicitações da web para o URL / , que é o URL principal.
A hello() função view retorna a string 'Hello, World!' como resposta.
Salve e feche o arquivo.
Para executar seu aplicativo da Web, primeiro você dirá ao Flask onde encontrar o
aplicativo (o hello.py arquivo no seu caso) com a FLASK_APP variável de ambiente:
(env)sammy@localhost:$ export FLASK_APP=hello
cópia de
Em seguida, execute-o no modo de desenvolvimento com a FLASK_ENV variável de
ambiente:
(env)sammy@localhost:$ export FLASK_ENV=development
cópia de
Por fim, execute o aplicativo usando o flask run comando:
(env)sammy@localhost:$ flask run
cópia de
Quando o aplicativo estiver em execução, a saída será algo assim:
Output
* Serving Flask app "hello" (lazy loading)
* Environment: development
* Debug mode: on
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger PIN: 813-894-335
A saída anterior tem várias informações, como:

O nome do aplicativo que você está executando.
O ambiente no qual o aplicativo está sendo executado.
Debug mode: on significa que o depurador Flask está em execução. Isso é útil ao
desenvolver porque nos fornece mensagens de erro detalhadas quando as coisas
dão errado, o que facilita a solução de problemas.
A aplicação está rodando localmente na URL http://127.0.0.1:5000/ , 127.0.0.1 é o
IP que representa o da sua máquina localhost e :5000 é o número da porta.
Abra um navegador e digite a URL http://127.0.0.1:5000/ , você receberá a string
Hello, World! como resposta, isso confirma que seu aplicativo está sendo executado
com sucesso.
Atenção O Flask usa um servidor web simples para servir nosso aplicativo em um
ambiente de desenvolvimento, o que também significa que o depurador do Flask está
sendo executado para facilitar a captura de erros. Este servidor de desenvolvimento não
deve ser usado em uma implantação de produção. Consulte a página Opções de
implantação na documentação do Flask para obter mais informações, você também
pode conferir este tutorial de implantação do Flask .
Agora você pode deixar o servidor de desenvolvimento em execução no terminal e abrir

outra janela do terminal. Mova para a pasta do projeto onde hello.py está localizado,
ative o ambiente virtual, defina as variáveis de ambiente FLASK_ENV e FLASK_APP , e
continue com as próximas etapas. (Esses comandos estão listados anteriormente nesta
etapa.)
Nota : Ao abrir um novo terminal, é importante lembrar de ativar o ambiente virtual e
configurar as variáveis de ambiente FLASK_ENV e FLASK_APP .
Enquanto o servidor de desenvolvimento de um aplicativo Flask já estiver em execução,
não é possível executar outro aplicativo Flask com o mesmo flask run comando. Isso
ocorre porque flask run usa o número da porta 5000 por padrão e, uma vez obtido, fica
indisponível para executar outro aplicativo, então você receberia um erro semelhante ao
seguinte:
Output
OSError: [Errno 98] Address already in use
Para resolver esse problema, pare o servidor que está sendo executado via CTRL+C ,
execute flask run novamente ou, se quiser executar os dois ao mesmo tempo, você
pode passar um número de porta diferente para o -p argumento, por exemplo, para
executar outro aplicativo na porta 5001 use o seguinte comando:
(env)sammy@localhost:$ flask run -p 5001
cópia de
Agora você tem um pequeno aplicativo da Web Flask. Você executou seu aplicativo e
exibiu informações no navegador da web. Em seguida, você usará arquivos HTML em
seu aplicativo.
Etapa 3 — Usando modelos HTML
Atualmente seu aplicativo exibe apenas uma mensagem simples sem qualquer HTML.
Os aplicativos da Web usam principalmente HTML para exibir informações para o
visitante, então agora você trabalhará na incorporação de arquivos HTML em seu
aplicativo, que podem ser exibidos no navegador da Web.
O Flask fornece uma render_template() função auxiliar que permite o uso do mecanismo
de modelo Jinja . Isso tornará o gerenciamento de HTML muito mais fácil escrevendo
seu código HTML em .html arquivos, bem como usando lógica em seu código HTML.
Você usará esses arquivos HTML ( templates ) para construir todas as páginas do seu
aplicativo, como a página principal onde você exibirá as postagens atuais do blog, a
página da postagem do blog, a página onde o usuário pode adicionar um novo postar, e
assim por diante.
Nesta etapa, você criará seu aplicativo Flask principal em um novo arquivo.
Primeiro, em seu flask_blog diretório, use nano ou seu editor favorito para criar e editar
seu app.py arquivo. Isso conterá todo o código que você usará para criar o aplicativo de
blog:
(env)sammy@localhost:$ nano app.py cópia de
Nesse novo arquivo, você importará o Flask objeto para criar uma instância do aplicativo
Flask como fez anteriormente. Você também importará a render_template() função
auxiliar que permite renderizar arquivos de modelo HTML que existem na
templates pasta que você está prestes a criar. O arquivo terá uma função de
visualização única que será responsável por tratar as requisições para a / rota principal.
Adicione o seguinte conteúdo:
frasco_blog/app.py
from flask import Flask, render_template
cópia de
@app.route('/')
def index():
return render_template('index.html')
A index() função view retorna o resultado da chamada render_template() com

index.html como argumento, isso diz render_template() para procurar um arquivo
chamado index.html na pasta templates . A pasta e o arquivo ainda não existem, você
receberá um erro se executar o aplicativo neste momento. Mesmo assim, você o
executará para estar familiarizado com essa exceção comumente encontrada. Em
seguida, você o corrigirá criando a pasta e o arquivo necessários.
Salve e saia do arquivo.
Pare o servidor de desenvolvimento em seu outro terminal que executa o
hello aplicativo com CTRL+C .
Antes de executar o aplicativo, certifique-se de especificar corretamente o valor da

FLASK_APP variável de ambiente, pois você não está mais usando o aplicativo hello :
(env)sammy@localhost:$ export FLASK_APP=app

cópia de
(env)sammy@localhost:$ flask run
Abrir a URL http://127.0.0.1:5000/ em seu navegador resultará na página do depurador

informando que o index.html modelo não foi encontrado. A linha principal no código que
foi responsável por esse erro será destacada. Neste caso, é a linha return
render_template('index.html') .
Se você clicar nessa linha, o depurador revelará mais código para que você tenha mais
contexto para ajudá-lo a resolver o problema.
Para corrigir esse erro, crie um diretório chamado templates dentro do seu
flask_blog diretório. Em seguida, dentro dele, abra um arquivo chamado index.html para
edição:
(env)sammy@localhost:$ mkdir templates
cópia de
(env)sammy@localhost:$ nano templates/index.html
Em seguida, adicione o seguinte código HTML dentro de index.html :

frasco_blog/templates/index.html
<!DOCTYPE html>
cópia de
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FlaskBlog</title>
</head>
<body>
<h1>Welcome to FlaskBlog</h1>
</body>
</html>
Salve o arquivo e use seu navegador para navegar http://127.0.0.1:5000/ novamente ou

atualize a página. Desta vez o navegador deve exibir o texto Welcome to FlaskBlog em
uma <h1> tag.

Além da templates pasta, os aplicativos da Web do Flask também costumam ter uma
static pasta para hospedar arquivos estáticos, como arquivos CSS, arquivos JavaScript
e imagens que o aplicativo usa.
Você pode criar um style.css arquivo de folha de estilo para adicionar CSS ao seu
aplicativo. Primeiro, crie um diretório chamado static dentro do seu flask_blog diretório
principal:
(env)sammy@localhost:$ mkdir static
cópia de
Em seguida, crie outro diretório chamado css dentro do static diretório para hospedar
os .css arquivos. Isso normalmente é feito para organizar arquivos estáticos em pastas
dedicadas, como tal, os arquivos JavaScript geralmente ficam dentro de um diretório
chamado js , as imagens são colocadas em um diretório chamado images (ou img ) e
assim por diante. O comando a seguir criará o css diretório dentro do static diretório:
(env)sammy@localhost:$ mkdir static/css
cópia de
Em seguida, abra um style.css arquivo dentro do css diretório para edição:
(env)sammy@localhost:$ nano static/css/style.css
cópia de
Adicione a seguinte regra CSS ao seu style.css arquivo:
frasco_blog/static/css/style.css
h1 {
cópia de
border: 2px #eee solid;
color: brown;
text-align: center;
padding: 10px;
O código CSS adicionará uma borda, mudará a cor para marrom, centralizará o texto e
adicionará um pouco de preenchimento às <h1> tags.
Em seguida, abra o index.html arquivo de modelo para edição:
cópia de
Você adicionará um link ao style.css arquivo dentro da <head> seção do

index.html arquivo de modelo:
. . .
cópia de
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">

<title>FlaskBlog</title>
</head>
. . .
Aqui você usa a url_for() função auxiliar para gerar o local apropriado do arquivo. O
primeiro argumento especifica que você está vinculando a um arquivo estático e o
segundo argumento é o caminho do arquivo dentro do diretório estático.
Ao atualizar a página de índice do seu aplicativo, você notará que o texto Welcome to
FlaskBlog agora está em marrom, centralizado e dentro de uma borda.
Você pode usar a linguagem CSS para estilizar o aplicativo e torná-lo mais atraente
usando seu próprio design. No entanto, se você não for um web designer ou se não
estiver familiarizado com CSS, poderá usar o kit de ferramentas Bootstrap , que fornece
componentes fáceis de usar para estilizar seu aplicativo. Neste projeto, usaremos o
Bootstrap.
Você pode ter adivinhado que fazer outro modelo HTML significaria repetir a maior
parte do código HTML que você já escreveu no index.html modelo. Você pode evitar a
repetição desnecessária de código com a ajuda de um arquivo de modelo básico , do
qual todos os seus arquivos HTML herdarão. Consulte Herança de modelo em Jinja para
obter mais informações.
Para fazer um template base, primeiro crie um arquivo chamado base.html dentro do seu
templates diretório:
(env)sammy@localhost:$ nano templates/base.html

cópia de
Digite o seguinte código em seu base.html modelo:
frasco_blog/templates/base.html
<!doctype html>
cópia de
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/c
<title> {% block title %} {% endblock %} </title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href=" {{ url_for('index')}} ">FlaskBlog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-targe

<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
<div class="container">
{% block content %} {% endblock %}
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.m
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.
</body>
</html>
Salve e feche o arquivo quando terminar de editá-lo.

A maior parte do código no bloco anterior é HTML padrão e código necessário para
Bootstrap. As <meta> tags fornecem informações para o navegador da Web, a <link> tag
vincula os arquivos CSS do Bootstrap e as <script> tags são links para o código
JavaScript que permite alguns recursos adicionais do Bootstrap, confira a
documentação do Bootstrap para saber mais.
No entanto, as seguintes partes destacadas são específicas para o mecanismo de
modelo Jinja:
{% block title %} {% endblock %} : um bloco que serve como um espaço reservado
para um título, você o usará posteriormente em outros modelos para fornecer um
título personalizado para cada página em seu aplicativo sem reescrever a

<head> seção inteira a cada vez.
{{ url_for('index')}} : uma chamada de função que retornará a URL para a
index() função de visualização. Isso é diferente da url_for() chamada anterior que
você usou para vincular um arquivo CSS estático, porque leva apenas um
argumento, que é o nome da função de exibição, e vincula à rota associada à
função em vez de um arquivo estático.
{% block content %} {% endblock %} : Outro bloco que será substituído por
conteúdo dependendo do template filho (templates que herdam de base.html ) que
o substituirá.
Agora que você tem um modelo base, pode aproveitá-lo usando herança. Abra o
index.html arquivo:

cópia de
Em seguida, substitua seu conteúdo pelo seguinte:
{% extends 'base.html' %}
cópia de
{% block content %}
<h1>{% block title %} Welcome to FlaskBlog {% endblock %}</h1>
{% endblock %}
Nesta nova versão do index.html modelo, você usa a {% extends %} tag para herdar do
base.html modelo. Em seguida, você o estende substituindo o content bloco no modelo
base pelo que está dentro do content bloco no bloco de código anterior.
Este content bloco contém uma <h1> tag com o texto Welcome to FlaskBlog dentro de um
title bloco, que por sua vez substitui o title bloco original no base.html template pelo
texto Welcome to FlaskBlog . Dessa forma, você evita repetir o mesmo texto duas vezes,
pois ele funciona tanto como título da página quanto como cabeçalho que aparece
abaixo da barra de navegação herdada do modelo base.
A herança de template também lhe dá a habilidade de reutilizar o código HTML que
você tem em outros templates ( base.html neste caso) sem ter que repeti-lo toda vez
que for necessário.
Salve e feche o arquivo e atualize a página de índice em seu navegador. Você verá sua
página com uma barra de navegação e um título estilizado.
Você usou modelos HTML e arquivos estáticos no Flask. Você também usou o Bootstrap
para começar a refinar a aparência da sua página e um modelo base para evitar
repetição de código. Na próxima etapa, você configurará um banco de dados que
armazenará os dados do seu aplicativo.
Passo 4 — Configurando o banco de dados
Nesta etapa, você configurará um banco de dados para armazenar dados, ou seja, as
postagens do blog do seu aplicativo. Você também preencherá o banco de dados com
algumas entradas de exemplo.
Você usará um arquivo de banco de dados SQLite para armazenar seus dados porque o
sqlite3 módulo, que usaremos para interagir com o banco de dados, está prontamente
disponível na biblioteca padrão do Python. Para obter mais informações sobre SQLite,
confira este tutorial .
Primeiro, porque os dados no SQLite são armazenados em tabelas e colunas, e como
seus dados consistem principalmente em postagens de blog, primeiro você precisa criar
uma tabela chamada posts com as colunas necessárias. Você criará um .sql arquivo
que contém comandos SQL para criar a posts tabela com algumas colunas. Você usará
esse arquivo para criar o banco de dados.
Abra um arquivo chamado schema.sql dentro do seu flask_blog diretório:
(env)sammy@localhost:$ nano schema.sql
cópia de
Digite os seguintes comandos SQL dentro deste arquivo:
frasco_blog/schema.sql
DROP TABLE IF EXISTS posts;
CREATE TABLE posts (
id INTEGER PRIMARY KEY AUTOINCREMENT,
created TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
title TEXT NOT NULL,
content TEXT NOT NULL
);

O primeiro comando SQL é DROP TABLE IF EXISTS posts; , isso exclui todas as tabelas já
existentes nomeadas posts para que você não tenha um comportamento confuso.
Observe que isso excluirá todo o conteúdo que você tem no banco de dados sempre
que você usar esses comandos SQL, portanto, certifique-se de não escrever nenhum
conteúdo importante no aplicativo da Web até terminar este tutorial e experimentar o
resultado final. Em seguida, CREATE TABLE posts é usado para criar a posts tabela com as
seguintes colunas:
id : um número inteiro que representa uma chave primária , isso receberá um valor
exclusivo do banco de dados para cada entrada (que é uma postagem de blog).
created : a hora em que a postagem do blog foi criada. NOT NULL significa que esta
coluna não deve estar vazia e o DEFAULT valor é o CURRENT_TIMESTAMP valor, que é o
momento em que a postagem foi adicionada ao banco de dados. Assim como id ,
você não precisa especificar um valor para esta coluna, pois ela será preenchida
automaticamente.
title : o título da postagem.
content : O conteúdo da postagem.
Agora que você tem um esquema SQL no schema.sql arquivo, você o usará para criar o
banco de dados usando um arquivo Python que gerará um .db arquivo de banco de
dados SQLite. Abra um arquivo chamado init_db.py dentro do flask_blog diretório
usando seu editor preferido:
(env)sammy@localhost:$ nano init_db.py
cópia de
E então adicione o seguinte código.
frasco_blog/init_db.py
import sqlite3
cópia de
connection = sqlite3.connect('database.db')
with open('schema.sql') as f:
connection.executescript(f.read())
cur = connection.cursor()
cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",
('First Post', 'Content for the first post')
cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",
('Second Post', 'Content for the second post')
connection.commit()
connection.close()
Você primeiro importa o sqlite3 módulo e, em seguida, abre uma conexão com um
arquivo de banco de dados chamado database.db , que será criado assim que você
executar o arquivo Python. Então você usa a open() função para abrir o
schema.sql arquivo. Em seguida, você executa seu conteúdo usando o
executescript() método que executa várias instruções SQL de uma só vez, o que criará
a posts tabela. Você cria um objeto Cursor que permite usar seu execute() método para
executar duas INSERT instruções SQL para adicionar duas postagens de blog à sua
posts tabela. Finalmente, você confirma as alterações e fecha a conexão.
Salve e feche o arquivo e execute-o no terminal usando o python comando:

(env)sammy@localhost:$ python init_db.py
cópia de
Assim que o arquivo terminar a execução, um novo arquivo chamado
database.db aparecerá em seu flask_blog diretório. Isso significa que você configurou
seu banco de dados com sucesso.
Na próxima etapa, você recuperará as postagens inseridas em seu banco de dados e as
exibirá na página inicial do seu aplicativo.
Etapa 5 — Exibindo todas as postagens
Agora que você configurou seu banco de dados, agora você pode modificar a
index() função de visualização para exibir todas as postagens que você possui em seu
banco de dados.
Abra o app.py arquivo para fazer as seguintes modificações:
Para sua primeira modificação, você importará o sqlite3 módulo na parte superior do
arquivo:
frasco_blog/app.py
import sqlite3
cópia de
. . .
Em seguida, você criará uma função que cria uma conexão de banco de dados e a
retorna. Adicione-o diretamente após as importações:
frasco_blog/app.py
. . .
cópia de
def get_db_connection():
conn = sqlite3.connect('database.db')
conn.row_factory = sqlite3.Row
return conn
. . .
Essa get_db_connection() função abre uma conexão com o database.db arquivo de banco
de dados e, em seguida, define o row_factory atributo como sqlite3.Row para que você
possa ter acesso baseado em nome às colunas. Isso significa que a conexão com o
banco de dados retornará linhas que se comportam como dicionários Python comuns.
Por fim, a função retorna o conn objeto de conexão que você usará para acessar o
banco de dados.
Depois de definir a get_db_connection() função, modifique a index() função para se
parecer com o seguinte:
frasco_blog/app.py
. . .
cópia de
@app.route('/')
def index():
conn = get_db_connection()
posts = conn.execute('SELECT * FROM posts').fetchall()
conn.close()
return render_template('index.html' , posts=posts )
Nesta nova versão da index() função, você primeiro abre uma conexão de banco de
dados usando a get_db_connection() função definida anteriormente. Em seguida, você
executa uma consulta SQL para selecionar todas as entradas da posts tabela. Você
implementa o fetchall() método para buscar todas as linhas do resultado da consulta,
isso retornará uma lista dos posts que você inseriu no banco de dados no passo
anterior.
Você fecha a conexão com o banco de dados usando o close() método e retorna o
resultado da renderização do index.html modelo. Você também passa o posts objeto
como argumento, que contém os resultados obtidos do banco de dados, isso permitirá
que você acesse os posts do blog no index.html template.
Com essas modificações em vigor, salve e feche o app.py arquivo.
Agora que você passou as postagens que buscou do banco de dados para o
index.html modelo, você pode usar um for loop para exibir cada postagem em sua
página de índice.
Abra o index.html arquivo:
cópia de
Em seguida, modifique-o para ficar da seguinte forma:
cópia de
{% block content %}
{% for post in posts %}
<a href="#" >
<h2>{{ post['title'] }}</h2 >
</a >
<span class="badge badge-primary">{{ post['created'] }}</span >
<hr >
{% endfor %}
{% endblock %}
Aqui, a sintaxe {% for post in posts %} é um loop Jinja for , que é semelhante a um
for loop Python, exceto que deve ser fechado posteriormente com a {% endfor
%} sintaxe. Você usa essa sintaxe para fazer um loop sobre cada item na posts lista que
foi passada pela index() função na linha return render_template('index.html',
posts=posts) . Dentro desse for loop, você exibe o título da postagem em um
<h2> cabeçalho dentro de uma <a> tag (mais tarde você usará essa tag para vincular a
cada postagem individualmente).
Você exibe o título usando um delimitador de variável literal ( {{ ... }} ). Lembre-se que
post será um objeto tipo dicionário, então você pode acessar o título do post com
post['title'] . Você também exibe a data de criação da postagem usando o mesmo
método.
Quando terminar de editar o arquivo, salve-o e feche-o. Em seguida, navegue até a

página de índice em seu navegador. Você verá as duas postagens que adicionou ao
banco de dados em sua página.
Agora que você modificou a index() função de visualização para exibir todas as
postagens que você tem no banco de dados na página inicial do seu aplicativo, você
passará a exibir cada postagem em uma única página e permitir que os usuários
vinculem a cada postagem individual.
Passo 6 — Exibindo um único post
Nesta etapa, você criará uma nova rota do Flask com uma função de visualização e um
novo modelo HTML para exibir uma postagem de blog individual por seu ID.
Ao final desta etapa, a URL http://127.0.0.1:5000/1 será uma página que exibe o
primeiro post (porque possui o ID 1 ). A URL exibirá a postagem com o número
associado, se existir. http://127.0.0.1:5000/ ID ID
Aberto app.py para edição:
Como você precisará obter uma postagem de blog por seu ID do banco de dados em
vários locais posteriormente neste projeto, você criará uma função autônoma chamada
get_post() . Você pode chamá-lo passando um ID e receber de volta a postagem do
blog associada à ID fornecida ou fazer o Flask responder com uma 404 Not
Found mensagem se a postagem do blog não existir.
Para responder com uma 404 página, você precisa importar a abort() função da
Werkzeug biblioteca, que foi instalada junto com o Flask, no topo do arquivo:
frasco_blog/app.py
import sqlite3
cópia de
from werkzeug.exceptions import abort
. . .
Em seguida, adicione a get_post() função logo após a get_db_connection() função que

você criou na etapa anterior:
frasco_blog/app.py
. . .
cópia de
def get_db_connection():
conn = sqlite3.connect('database.db')
conn.row_factory = sqlite3.Row
return conn
def get_post(post_id):
post = conn.execute('SELECT * FROM posts WHERE id = ?',
(post_id,)).fetchone()
conn.close()
if post is None:
abort(404)
return post
. . .
Essa nova função tem um post_id argumento que determina qual postagem do blog
retornar.
Dentro da função, você usa a get_db_connection() função para abrir uma conexão de
banco de dados e executar uma consulta SQL para obter a postagem do blog associada
ao post_id valor fornecido. Você adiciona o fetchone() método para obter o resultado e
armazena-o na post variável, em seguida, fecha a conexão. Se a post variável tiver o
valor None , significando que nenhum resultado foi encontrado no banco de dados, você
usa a abort() função que importou anteriormente para responder com um 404 código de
erro e a função terminará a execução. Se, no entanto, um post foi encontrado, você
retorna o valor da post variável.
Em seguida, adicione a seguinte função de visualização no final do app.py arquivo:
frasco_blog/app.py
. . .
cópia de
@app.route('/<int:post_id>')
def post(post_id):
post = get_post(post_id)
return render_template('post.html', post=post)
Nesta nova função de visualização, você adiciona uma regra de variável <int:post_id>
para especificar que a parte após a barra ( / ) é um inteiro positivo (marcado com o
int conversor) que você precisa acessar em sua função de visualização. O Flask
reconhece isso e passa seu valor para o post_id argumento de palavra-chave da sua
post() função de visualização. Em seguida, você usa a get_post() função para obter a
postagem do blog associada ao ID especificado e armazenar o resultado na
post variável, que você passa para um post.html modelo que você criará em breve.
Salve o app.py arquivo e abra um novo post.html arquivo de modelo para edição:
(env)sammy@localhost:$ nano templates/post.html
cópia de
Digite o seguinte código neste novo post.html arquivo. Isso será semelhante ao
index.html arquivo, exceto que exibirá apenas uma única postagem, além de exibir
também o conteúdo da postagem:
frasco_blog/templates/post.html
cópia de
{% block content %}
<h2>{% block title %} {{ post['title'] }} {% endblock %}</h2>
<span class="badge badge-primary">{{ post['created'] }}</span>
<p>{{ post['content'] }}</p>
{% endblock %}
Você adiciona o title bloco que definiu no base.html modelo para fazer com que o título
da página reflita o título do post que é exibido em um <h2> título ao mesmo tempo.
Agora você pode navegar para as seguintes URLs para ver as duas postagens que você
tem em seu banco de dados, juntamente com uma página que informa ao usuário que a
postagem de blog solicitada não foi encontrada (já que não há postagem com um
número de ID de 3 até agora):
http://127.0.0.1:5000/1
http://127.0.0.1:5000/2
http://127.0.0.1:5000/3
Voltando à página de índice, você fará com que cada título do post se vincule à sua
respectiva página. Você fará isso usando a url_for() função. Primeiro, abra o
index.html modelo para edição:

cópia de
Em seguida, altere o valor do href atributo de # para {{ url_for('post',
post_id=post['id']) }} para que o for loop fique exatamente como segue:
cópia de
<a href=" {{ url_for('post', post_id=post['id']) }} ">
<h2>{{ post['title'] }}</h2>
</a>
<hr>
{% endfor %}
Aqui, você passa 'post' para a url_for() função como um primeiro argumento. Este é o
nome da post() função view e como ela aceita um post_id argumento, você dá a ela o
valor post['id'] . A url_for() função retornará a URL adequada para cada postagem
com base em seu ID.
Os links na página de índice agora funcionarão conforme o esperado. Com isso, você
terminou de construir a parte do aplicativo responsável por exibir as postagens do blog
em seu banco de dados. Em seguida, você adicionará a capacidade de criar, editar e
excluir postagens de blog ao seu aplicativo.
Etapa 7 — Modificando postagens
Agora que você terminou de exibir as postagens do blog que estão presentes no banco
de dados no aplicativo da Web, você precisa permitir que os usuários do seu aplicativo
escrevam novas postagens no blog e as adicionem ao banco de dados, editem as
existentes e excluam as postagens desnecessárias. postagens no blog.
Criando uma nova postagem
Até este ponto, você tem um aplicativo que exibe as postagens em seu banco de dados,
mas não oferece nenhuma maneira de adicionar uma nova postagem, a menos que você
se conecte diretamente ao banco de dados SQLite e adicione uma manualmente. Nesta
seção, você criará uma página na qual poderá criar uma postagem fornecendo seu título
e conteúdo.
Abra o app.py arquivo para edição:

Primeiro, você importará o seguinte do framework Flask:
O objeto global request para acessar os dados de solicitação de entrada que serão
enviados por meio de um formulário HTML.
A url_for() função para gerar URLs.
A flash() função para piscar uma mensagem quando uma solicitação é
processada.
A redirect() função para redirecionar o cliente para um local diferente.
Adicione as importações ao seu arquivo como o seguinte:
frasco_blog/app.py
import sqlite3
cópia de
from flask import Flask, render_template , request, url_for, flash, redirect
from werkzeug.exceptions import abort
. . .
A flash() função armazena mensagens em flash na sessão do navegador do cliente, o

que requer a configuração de uma chave secreta . Essa chave secreta é usada para
proteger sessões, que permitem ao Flask lembrar informações de uma solicitação para
outra, como mover da nova página de postagem para a página de índice. O usuário
pode acessar as informações armazenadas na sessão, mas não pode modificá-las a
menos que tenha a chave secreta, portanto, você nunca deve permitir que ninguém
acesse sua chave secreta. Consulte a documentação do Flask para obter mais
informações.
Para definir uma chave secreta , você adicionará uma SECRET_KEY configuração ao seu
aplicativo por meio do app.config objeto. Adicione-o diretamente seguindo a
app definição antes de definir a index() função de visualização:
frasco_blog/app.py
. . .
cópia de
app.config['SECRET_KEY'] = 'your secret key'
@app.route('/')
def index():
posts = conn.execute('SELECT * FROM posts').fetchall()
conn.close()
return render_template('index.html', posts=posts)
. . .
Lembre-se de que a chave secreta deve ser uma longa string aleatória.
Depois de definir uma chave secreta, você criará uma função de visualização que
renderizará um modelo que exibe um formulário que você pode preencher para criar
uma nova postagem no blog. Adicione esta nova função na parte inferior do arquivo:
frasco_blog/app.py
. . .
cópia de
@app.route('/create', methods=('GET', 'POST'))
def create():
return render_template('create.html')
Isso cria uma /create rota que aceita solicitações GET e POST. As solicitações GET são
aceitas por padrão. Para aceitar também requisições POST, que são enviadas pelo
navegador ao enviar formulários, você passará uma tupla com os tipos de requisições
aceitas para o methods argumento do @app.route() decorador.
Para criar o modelo, abra um arquivo chamado create.html dentro de sua
templates pasta:
(env)sammy@localhost:$ nano templates/create.html

cópia de
Adicione o seguinte código dentro deste novo arquivo:
frasco_blog/templates/create.html
cópia de
{% block content %}
<h1>{% block title %} Create a New Post {% endblock %}</h1>
<form method="post">
<div class="form-group">
<label for="title">Title</label>
<input type="text" name="title"
placeholder="Post title" class="form-control"
value="{{ request.form['title'] }}"></input>
</div>
<label for="content">Content</label>
<textarea name="content" placeholder="Post content"
class="form-control">{{ request.form['content'] }}</textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
{% endblock %}
A maior parte deste código é HTML padrão. Ele exibirá uma caixa de entrada para o
título da postagem, uma área de texto para o conteúdo da postagem e um botão para
enviar o formulário.
O valor da entrada do título do post é {{ request.form['title'] }} e a área de texto tem
o valor {{ request.form['content'] }} , isso é feito para que os dados inseridos não
sejam perdidos se algo der errado. Por exemplo, se você escrever um post longo e
esquecer de dar um título, uma mensagem será exibida informando que o título é
obrigatório. Isso acontecerá sem perder a postagem que você escreveu, pois ela será
armazenada no request objeto global ao qual você tem acesso em seus modelos.
Agora, com o servidor de desenvolvimento rodando, use seu navegador para navegar
até a /create rota:
http://127.0.0.1:5000/create
Você verá uma página Criar uma nova postagem com uma caixa para um título e
conteúdo.
Este formulário envia uma solicitação POST para sua create() função de visualização.
No entanto, ainda não há código para lidar com uma solicitação POST na função, então
nada acontece depois de preencher o formulário e enviá-lo.

Você lidará com a solicitação POST recebida quando um formulário for enviado. Você
fará isso dentro da create() função view. Você pode manipular separadamente a
solicitação POST verificando o valor de request.method . Quando seu valor é definido
'POST' como significa que a solicitação é uma solicitação POST, você prosseguirá para
extrair os dados enviados, validá-los e inseri-los em seu banco de dados.
Abra o app.py arquivo para edição:
Modifique a create() função de visualização para que fique exatamente como segue:
frasco_blog/app.py
. . .
cópia de
@app.route('/create', methods=('GET', 'POST'))
def create():
if request.method == 'POST':
title = request.form['title']
content = request.form['content']
if not title:
flash('Title is required!')
else:
conn.execute('INSERT INTO posts (title, content) VALUES (?, ?)',
(title, content))
conn.commit()
conn.close()
return redirect(url_for('index'))
return render_template('create.html')
Na if instrução, você garante que o código a seguir seja executado apenas quando a
solicitação for uma solicitação POST por meio da comparação request.method == 'POST' .
Em seguida, você extrai o título e o conteúdo enviados do request.form objeto que
fornece acesso aos dados do formulário na solicitação. Se o título não for fornecido, a
condição if not title será cumprida, exibindo uma mensagem ao usuário informando
que o título é obrigatório. Se, por outro lado, o título for fornecido, você abre uma
conexão com a get_db_connection() função e insere o título e o conteúdo recebido na
posts tabela.
Em seguida, você confirma as alterações no banco de dados e fecha a conexão. Depois

de adicionar a postagem do blog ao banco de dados, você redireciona o cliente para a
página de índice usando a redirect() função passando a URL gerada pela
url_for() função com o valor 'index' como argumento.

Agora, navegue até a /create rota usando seu navegador da web:
http://127.0.0.1:5000/create
Preencha o formulário com um título de sua escolha e algum conteúdo. Depois de enviar
o formulário, você verá a nova postagem listada na página de índice.
Por fim, você exibirá mensagens em flash e adicionará um link à barra de navegação no
base.html modelo para ter acesso fácil a esta nova página. Abra o arquivo de modelo:
(env)sammy@localhost:$ nano templates/base.html

cópia de
Edite o arquivo adicionando uma nova <li> tag seguindo o About link dentro da
<nav> tag. Em seguida, adicione um novo for loop diretamente acima do content bloco
para exibir as mensagens piscadas abaixo da barra de navegação. Essas mensagens
estão disponíveis na get_flashed_messages() função especial que o Flask fornece:
frasco_blog/templates/base.html
<nav class="navbar navbar-expand-md navbar-light bg-light">
cópia de
<a class="navbar-brand" href="{{ url_for('index')}}">FlaskBlog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#

<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="{{url_for('create')}}">New Post</a >
</li >
</ul>
</div>
</nav>
<div class="container">
{% for message in get_flashed_messages() %}
<div class="alert alert-danger">{{ message }}</div >
{% endfor %}
{% block content %} {% endblock %}
</div>
Salve e feche o arquivo. A barra de navegação agora terá um New Post item vinculado à
/create rota.
Editando uma postagem
Para que um blog esteja atualizado, você precisará editar suas postagens existentes.
Esta seção irá guiá-lo através da criação de uma nova página em seu aplicativo para
simplificar o processo de edição de uma postagem.
Primeiro, você adicionará uma nova rota ao app.py arquivo. Sua função de visualização
receberá o ID do post que precisa ser editado, a URL estará no formato com a variável
sendo o ID do post. Abra o arquivo para edição: / post_id /edit post_id app.py
Em seguida, adicione a seguinte edit() função de visualização no final do arquivo. Editar
um post existente é semelhante a criar um novo, então esta função de visualização será
semelhante à create() função de visualização:
frasco_blog/app.py
. . .
cópia de
@app.route('/<int:id>/edit', methods=('GET', 'POST'))
def edit(id):
post = get_post(id)
if request.method == 'POST':
title = request.form['title']
content = request.form['content']
if not title:
flash('Title is required!')
else:
conn.execute('UPDATE posts SET title = ?, content = ?'
' WHERE id = ?',
(title, content, id))

conn.commit()
conn.close()
return render_template('edit.html', post=post)
A postagem que você edita é determinada pela URL e o Flask passará o número de ID
para a edit() função por meio do id argumento. Você adiciona esse valor à
get_post() função para buscar a postagem associada ao ID fornecido do banco de

dados. Os novos dados virão em uma solicitação POST, que é tratada dentro da if
request.method == 'POST' condição.
Assim como quando você cria um novo post, primeiro você extrai os dados do
request.form objeto e depois exibe uma mensagem se o título tiver um valor vazio, caso
contrário, você abre uma conexão com o banco de dados. Então você atualiza a
posts tabela definindo um novo título e um novo conteúdo onde o ID do post no banco
de dados é igual ao ID que estava na URL.
No caso de uma solicitação GET, você renderiza um edit.html template passando a
post variável que contém o valor retornado da get_post() função. Você usará isso para
exibir o título e o conteúdo existentes na página de edição.
Salve e feche o arquivo e crie um novo edit.html modelo:
(env)sammy@localhost:$ nano templates/edit.html
cópia de
Escreva o seguinte código dentro deste novo arquivo:
frasco_blog/templates/edit.html
cópia de
{% block content %}
<h1>{% block title %} Edit "{{ post['title'] }}" {% endblock %}</h1>
<form method="post">
<label for="title">Title</label>
<input type="text" name="title" placeholder="Post title"
class="form-control"
value="{{ request.form['title'] or post['title'] }}">
</input>
</div>
<label for="content">Content</label>
<textarea name="content" placeholder="Post content"
class="form-control">{{ request.form['content'] or post['content']

</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<hr>
{% endblock %}

Esse código segue o mesmo padrão, exceto pela sintaxe {{ request.form['title'] or
post['title'] }} e . {{ request.form['content'] or post['content'] }} Isso exibe os
dados armazenados na solicitação, se existir, caso contrário, exibe os dados da
post variável que foi passada para o modelo que contém os dados atuais do banco de
dados.
Agora, navegue até o seguinte URL para editar a primeira postagem:
http://127.0.0.1:5000/1/edit
Você verá uma página Editar “Primeira postagem” .
Edite a postagem e envie o formulário e verifique se a postagem foi atualizada.

Agora você precisa adicionar um link que aponte para a página de edição de cada
postagem na página de índice. Abra o index.html arquivo de modelo:
cópia de
Edite o arquivo para ficar exatamente como o seguinte:
cópia de
{% block content %}
<a href="{{ url_for('post', post_id=post['id']) }}">
<h2>{{ post['title'] }}</h2>
</a>
<a href="{{ url_for('edit', id=post['id']) }}" >
<span class="badge badge-warning">Edit</span >
</a >
<hr>
{% endfor %}
{% endblock %}

Aqui você adiciona uma <a> tag para vincular à edit() função de visualização, passando
o post['id'] valor para vincular à página de edição de cada post com o Edit link.
Excluindo uma postagem
Às vezes, uma postagem não precisa mais estar disponível publicamente, e é por isso
que a funcionalidade de excluir uma postagem é crucial. Nesta etapa, você adicionará a
funcionalidade de exclusão ao seu aplicativo.
Primeiro, você adicionará uma nova rota que aceita solicitações POST, semelhante à
função view. Sua nova função de visualização receberá o ID da postagem a ser excluída
da URL. Abra o arquivo: / ID /delete edit() delete() app.py
Adicione a seguinte função de visualização na parte inferior do arquivo:
frasco_blog/app.py
# ....
cópia de
@app.route('/<int:id>/delete', methods=('POST',))
def delete(id):
post = get_post(id)
conn.execute('DELETE FROM posts WHERE id = ?', (id,))
conn.commit()
conn.close()
flash('"{}" was successfully deleted!'.format(post['title']))
Esta função de visualização aceita apenas solicitações POST. Isso significa que navegar
para a rota em seu navegador retornará um erro porque os navegadores da Web são
padronizados para solicitações GET. / ID /delete
No entanto, você pode acessar essa rota através de um formulário que envia uma
solicitação POST passando o ID da postagem que deseja excluir. A função receberá o
valor do ID e o utilizará para obter a postagem do banco de dados com a
get_post() função.
Em seguida, você abre uma conexão de banco de dados e executa um DELETE

FROM comando SQL para excluir a postagem. Você confirma a alteração no banco de
dados e fecha a conexão enquanto exibe uma mensagem para informar ao usuário que
a postagem foi excluída com sucesso e redirecioná-los para a página de índice.
Observe que você não renderiza um arquivo de modelo, porque você apenas adicionará
um Delete botão à página de edição.
Abra o edit.html arquivo de modelo:
(env)sammy@localhost:$ nano templates/edit.html
cópia de
Em seguida, adicione a seguinte <form> tag após a <hr> tag e diretamente antes da {%
endblock %} linha:
frasco_blog/templates/edit.html
<hr>
cópia de
<form action="{{ url_for('delete', id=post['id']) }}" method="POST">
<input type="submit" value ="Delete Post"
class="btn btn-danger btn-sm "
onclick="return confirm('Are you sure you want to delete this post?')">
</form>
{% endblock %}
Você usa o confirm() método para exibir uma mensagem de confirmação antes de
enviar a solicitação.
Agora navegue novamente para a página de edição de uma postagem do blog e tente
excluí-la:
http://127.0.0.1:5000/ 1 /edit
Ao final desta etapa, o código-fonte do seu projeto será semelhante ao código desta
página .
Com isso, os usuários do seu aplicativo agora podem escrever novas postagens no blog
e adicioná-las ao banco de dados, editar e excluir postagens existentes.
Conclusão
Este tutorial apresentou conceitos essenciais da estrutura Flask Python. Você aprendeu
como fazer um pequeno aplicativo da web, executá-lo em um servidor de
desenvolvimento e permitir que o usuário forneça dados personalizados por meio de
parâmetros de URL e formulários da web. Você também usou o mecanismo de modelo
Jinja para reutilizar arquivos HTML e usar lógica neles. No final deste tutorial, agora
você tem um blog da Web totalmente funcional que interage com um banco de dados
SQLite para criar, exibir, editar e excluir postagens de blog usando a linguagem Python e
consultas SQL. Se você quiser saber mais sobre como trabalhar com Flask e SQLite,
confira este tutorial sobre Como usar relacionamentos de banco de dados um para
muitos com Flask e SQLite .
Você pode desenvolver ainda mais este aplicativo adicionando autenticação de usuário
para que apenas usuários registrados possam criar e modificar postagens de blog, você
também pode adicionar comentários e tags para cada postagem de blog e adicionar
uploads de arquivos para dar aos usuários a capacidade de incluir imagens na
postagem. Consulte a documentação do Flask para obter mais informações.
O Flask tem muitas extensões do Flask feitas pela comunidade . Veja a seguir uma lista
de extensões que você pode usar para facilitar seu processo de desenvolvimento:
Flask-Login : gerencia a sessão do usuário e lida com login e logout e lembrando
usuários logados.
Flask-SQLAlchemy : simplifica o uso do Flask com SQLAlchemy , um kit de
ferramentas Python SQL e Mapeador Relacional de Objetos para interagir com
bancos de dados SQL.
Flask-Mail : ajuda na tarefa de enviar mensagens de e-mail em seu aplicativo Flask.
Quer aprender mais? Junte-se à Comunidade
DigitalOcean!
Junte-se à nossa comunidade DigitalOcean de mais de um milhão de

desenvolvedores de graça! Obtenha ajuda e compartilhe conhecimento em nossa
seção de Perguntas e Respostas, encontre tutoriais e ferramentas que ajudarão
você a crescer como desenvolvedor e dimensionar seu projeto ou negócio e se
inscrever em tópicos de interesse.
Inscrever-se >
Inscrever se ->
Sobre os autores
Abdelhadi Dyouri Autor

Kathryn Hancox Editor

Ainda está procurando uma resposta?
Faça uma pergunta Procurar mais ajuda
Isto foi útil? Sim Não
Comentários
10 comentários
implantar está de volta! Participe da conferência Estamos Blogue Documentos Obter Vendas
virtual da DigitalOcean para construtores globais. contratando suporte
g
16/10/2022 23:21
p g
Como fazer um aplicativo da Web usando Flask em Python 3 | DigitalOcean
p
Inscreva-se hoje ->
Deixe um comentário...
Conversas técnicas Caminhos de aprendizagem Documentos do produto Impacto so

Esta caixa de texto usa como padrão Markdown para formatar sua resposta.
Você pode digitar !ref nesta área de texto para pesquisar rapidamente nosso conjunto
completo de tutoriais, documentação e ofertas de mercado e inserir o link!
Faça login ou inscreva-se para comentar
Leandro • 13 de setembro de 2020
Excelente tutorial! Não é comum que um tutorial publicado seja executado
exatamente como as instruções sugerem, mas tudo correu conforme o
planejado (com exceção de executá-lo no Windows 10 em oposição ao Linux).
Certifique-se de se inscrever apenas para deixar este comentário, mas este
guia merece. Muito obrigado!
Mostrar respostas Responder
cjaurigu • 17 de agosto de 2020

Este é um ótimo tutorial! Isso definitivamente me ajudou a entender o básico
do desenvolvimento web usando o Flask! Você tem mais artigos/recursos que
você recomendaria para um iniciante?
vyomj • 23 de novembro de 2020

Há uma pequena parte que o tutorial não cobriu. As postagens do blog não
renderizam novas linhas
dblanding • 30 de setembro de 2020

Esse tutorial é ÓTIMO! Tudo funciona como deveria e está bem explicado (com
exceção de como usar 'set' em vez de 'export' para definir variáveis de
ambiente no Windows).
ninamir • 16 de setembro de 2020

obrigado por um tutorial tão fácil de seguir e todas as suas explicações
brilhantes.
CuteSeaGreenCrab • 28 de agosto de 2022

Este tutorial é incrível! Isso me ajudou a entender o básico com tanta facilidade
e funciona conforme o esperado em cada etapa, conforme explicado com
capturas de tela. Obrigado por tomar o tempo para colocar isso em conjunto.
Responder
xxweltew • 17 de março de 2022

Este deve ser o melhor tutorial que eu já li. Adorando quanto esforço você
colocou nisso - desde explicar cuidadosamente os conceitos e como todo o
código funciona, até mesmo destacar visualmente o código que devemos
modificar em cada trecho. Me inscrevi só para poder deixar um comentário,
pois este artigo merece muito. Incrível, simplesmente incrível <3
Responder

Este comentário foi apagado
Responder

Responder

Responder
Carregar mais comentários
Esta obra está licenciada sob uma Licença Creative Commons Atribuição-NãoComercial-
CompartilhaIgual 4.0 Internacional.
Try DigitalOcean for free
Click below to sign up and get $$200 of credit to try our products over 60 days!
Sign up ->
Popular Topics
Ubuntu
Linux Basics
JavaScript
React
Python
Security
Apache
MySQL
Databases
Docker
Kubernetes
Ebooks
Browse all topic tags
All tutorials ->
Questions
Q&A
Ask a question
DigitalOcean Product Docs
DigitalOcean Support
Events
Tech Talks
Hacktoberfest
Deploy
Get involved
Community Newsletter
Hollie's Hub for Good

Write for DOnations
Community tools and integrations
Hatch Startup program
RECEBA NOSSA NEWSLETTER QUINZENAL

Inscreva-se para Infraestrutura
como Newsletter.
HOLLIE'S HUB PARA O BEM

Trabalhando para melhorar a
saúde e a educação, reduzir a
desigualdade e estimular o
crescimento econômico?
Gostaríamos de ajudar.
TORNE-SE UM COLABORADOR
Você é pago; doamos para
organizações sem fins lucrativos
de tecnologia.
Destaque na Comunidade Curso Kubernetes Aprenda Python 3 Aprendizado de máquina em Python

Introdução ao Go Introdução ao Kubernetes
Produtos DigitalOcean Máquinas virtuais Bancos de dados gerenciados Kubernetes gerenciado
Armazenamento em bloco Armazenamento de objetos Mercado VPC Balanceadores de carga
Bem-vindo à nuvem do desenvolvedor
A DigitalOcean simplifica o lançamento na nuvem

e a escalabilidade à medida que você cresce –
esteja você executando uma máquina virtual ou
dez mil.
Saber mais
Companhia Produtos Comunidade Soluções

Sobre Visão geral dos Tutoriais Site de hospedagem
Liderança produtos Perguntas e Hospedagem VPS
Blogue Gotas respostas Aplicativos da Web e
Carreiras Kubernetes Truques de CSS para dispositivos
móveis
Clientes Plataforma de Escreva para Desenvolvimento de

Parceiros aplicativos doações jogos
Programa de Funções Pesquisa de Transmissão
referência Bancos de dados correntes VPN
Imprensa gerenciados Programa de Plataformas SaaS
Espaços inicialização de
Jurídico hachura Hospedagem em
Plataforma de Mercado implantar pela nuvem para
Confiança Balanceadores de DigitalOcean Blockchain
Relações com carga Loja de brindes
Investidores Armazenamento em Programa de
IMPACTO DO bloco Pesquisa
Ferramentas e Código aberto
integrações
API Código de Conduta
Preços Inscrição no boletim
informativo
Documentação Encontros
Notas de lançamento
Tempo de atividade
Contato
Apoiar
Vendas
Denunciar abuso
Status do sistema
Compartilhe suas ideias
© 2022 Digital Ocean, LLC. Todos os

direitos reservados.

Web Usando Flask em Python 3 - DigitalOcean

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Usando Flask em Python 3 - DigitalOcean

Uploaded by

Copyright:

Available Formats

16/10/2022 23:21 Como fazer um aplicativo da Web usando Flask em Python 3 | DigitalOcean

How To Setup uWSGI On Ubuntu 12.10

Como fazer um aplicativo da Web usando Flask em

Publicado em 16 de abril de 2020 · Atualizado em 16 de abril de 2020

Pitão Estruturas Python Projeto de Programação Desenvolvimento Frasco

Você usará esses modelos como parte deste projeto.

Antes de começar a seguir este guia, você precisará de:

Se você ainda não ativou seu ambiente de programação, certifique-se de estar no

return 'Hello, World!'

* Serving Flask app "hello" (lazy loading)

* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

* Restarting with stat

* Debugger PIN: 813-894-335

A saída anterior tem várias informações, como:

Agora você pode deixar o servidor de desenvolvimento em execução no terminal e abrir

OSError: [Errno 98] Address already in use

A index() função view retorna o resultado da chamada render_template() com

Antes de executar o aplicativo, certifique-se de especificar corretamente o valor da

(env)sammy@localhost:$ export FLASK_APP=app

Abrir a URL http://127.0.0.1:5000/ em seu navegador resultará na página do depurador

Em seguida, adicione o seguinte código HTML dentro de index.html :

Salve o arquivo e use seu navegador para navegar http://127.0.0.1:5000/ novamente ou

uma <h1> tag.

Você adicionará um link ao style.css arquivo dentro da <head> seção do

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

(env)sammy@localhost:$ nano templates/base.html

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/c

<title> {% block title %} {% endblock %} </title>

<nav class="navbar navbar-expand-md navbar-light bg-light">

<a class="navbar-brand" href=" {{ url_for('index')}} ">FlaskBlog</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-targe

<div class="collapse navbar-collapse" id="navbarNav">

<li class="nav-item active">

<a class="nav-link" href="#">About</a>

{% block content %} {% endblock %}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q

Salve e feche o arquivo quando terminar de editá-lo.

título personalizado para cada página em seu aplicativo sem reescrever a

(env)sammy@localhost:$ nano templates/index.html

<h1>{% block title %} Welcome to FlaskBlog {% endblock %}</h1>

CREATE TABLE posts (

id INTEGER PRIMARY KEY AUTOINCREMENT,

created TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,

title TEXT NOT NULL,

content TEXT NOT NULL

Salve e feche o arquivo.

cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",

('First Post', 'Content for the first post')

cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",

('Second Post', 'Content for the second post')

Salve e feche o arquivo e execute-o no terminal usando o python comando:

posts = conn.execute('SELECT * FROM posts').fetchall()

return render_template('index.html' , posts=posts )

<h1>{% block title %} Welcome to FlaskBlog {% endblock %}</h1>

{% for post in posts %}

<a href="#" >

<h2>{{ post['title'] }}</h2 >

<span class="badge badge-primary">{{ post['created'] }}</span >