Tutorial: Servir arquivos estáticos e usar a herança de modelo com o Flask no Visual Studio

Artigo
02/04/2025

Este artigo apresenta a Etapa 3 da série de tutoriais Trabalhar com a estrutura web do Flask no Visual Studio.

As etapas anteriores nesta série de tutoriais criam um aplicativo Flask mínimo com uma única página de HTML autocontido. Os aplicativos Web modernos normalmente são compostos por muitas páginas e usam recursos compartilhados, como arquivos CSS e JavaScript, para fornecer estilo e comportamento consistentes. Na Etapa 3, você trabalha com modelos de item do Visual Studio para adicionar conteúdo ao seu projeto do Flask e expandir os recursos do aplicativo.

Na Etapa 3 do tutorial, você aprenderá a:

Usar modelos de item do Visual Studio para adicionar rapidamente novos arquivos com código clichê
Servir arquivos estáticos do código Flask
Adicionar mais páginas ao aplicativo Flask
Usar herança de modelo para criar um cabeçalho e navegação entre páginas

Pré-requisitos

Uma solução do Visual Studio e um projeto de aplicativo Flask criado na Etapa 1: Criar projeto Flask e atualizado na Etapa 2: Refatorar projeto Flask.

Explorar modelos de itens no Visual Studio

À medida que você desenvolve um aplicativo Flask, normalmente você adiciona muito mais arquivos Python, HTML, CSS e JavaScript. Para cada tipo de arquivo (bem como para outros arquivos, como web.config, que podem ser necessários para a implantação), o Visual Studio fornece modelos de itens convenientes para você começar. Você pode usar esses modelos para adicionar rapidamente novos arquivos de diferentes tipos com código clichê.

Para exibir os modelos disponíveis, acesse do Gerenciador de Soluções no Visual Studio e abra sua estrutura de projeto.
Clique com o botão direito do mouse na pasta na qual você deseja criar um novo arquivo e selecione Adicionar>Novo Item. A caixa de diálogo Adicionar Novo Item é aberta:
Para usar um modelo, selecione o modelo desejado, insira um nome para o arquivo e selecione Adicionar.

O Visual Studio adiciona o arquivo ao seu projeto atual e marca as alterações para o controle do código-fonte.

Entender como o Visual Studio identifica modelos de item

O arquivo de projeto do Visual Studio (.pyproj) contém um identificador de tipo de projeto que marca o arquivo como um projeto python. O Visual Studio usa esse identificador de tipo para reconhecer e mostrar apenas os modelos de item adequados para o tipo de projeto. O Visual Studio segue essa abordagem para fornecer um conjunto avançado de modelos de item para muitos tipos de projeto sem solicitar que você os classifique todas as vezes.

Servir arquivos estáticos a partir do seu aplicativo

Em um aplicativo Web criado com Python (usando qualquer estrutura), seus arquivos Python sempre são executados no servidor do host da Web e nunca são transmitidos para o computador de um usuário. Outros arquivos, como CSS e JavaScript, são usados apenas pelo navegador, portanto, o servidor host simplesmente os entrega as-is quando solicitados. Esses tipos de arquivos são chamados de arquivos "estáticos" e o Flask pode entregá-los automaticamente sem que você precise escrever nenhum código. Em arquivos HTML, por exemplo, você pode se referir a arquivos estáticos usando um caminho relativo no projeto. O primeiro procedimento nesta seção mostra como usar um arquivo CSS estático com um modelo de página existente.

Quando você precisa entregar um arquivo estático a partir do código, como por meio de uma implementação de endpoint de API, o Flask fornece um método conveniente. Você pode consultar arquivos usando caminhos relativos em uma pasta chamada estáticos na raiz do projeto. O segundo procedimento nesta seção demonstra como trabalhar com um arquivo de dados estáticos simples do código.

Em ambos os procedimentos, você pode organizar os arquivos na pasta estático de acordo com sua preferência.

Usar um arquivo CSS estático em um modelo

Siga estas etapas para usar um arquivo estático em um modelo:

No Gerenciador de Soluções, clique com o botão direito do mouse na pasta HelloFlask no projeto, selecione Adicionar>Nova pasta e nomeie a pasta static.
Clique com o botão direito do mouse na pasta estático e selecione Adicionar>Novo Item.
Na caixa de diálogo Adicionar Novo Item, selecione o modelo folha de estilos, nomeie o arquivo site.cse selecione Adicionar.

O Visual Studio adiciona o arquivo site.css ao projeto e abre o arquivo no editor. Aqui está um exemplo da estrutura de projeto do Flask atualizada:
Substitua o conteúdo do arquivo site.css pelos seguintes estilos:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Substitua o conteúdo do arquivo HelloFlask/templates/index.html pela seguinte marcação:
```
<html>
   <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   <body>
      <span class="message">{{ message }}</span>{{ content }}
   </body>
</html>
```
Esse código substitui o elemento HTML <strong> da Etapa 2 na série de tutoriais por um elemento <span> que faz referência à classe de estilo message. Usar uma classe de estilo dessa forma oferece mais flexibilidade no estilo do elemento HTML.
Salve as alterações do projeto selecionando Arquivo>Salvar Tudo ou use o atalho de teclado Ctrl+Shift+S. (Esta etapa não é necessária porque, à medida que você desenvolve seu projeto, o Visual Studio salva seus arquivos automaticamente.)
Execute o projeto e observe os resultados. Quando terminar, interrompa o aplicativo.
(Opcional) Você pode confirmar suas alterações no controle do código-fonte e atualizar seu repositório remoto. Para obter mais informações, confira Confirmar alterações no controle do código-fonte na Etapa 2 desta série de tutoriais.

Servir arquivo estático a partir do código

O Flask fornece uma função chamada send_static_file que você pode chamar do código para se referir a qualquer arquivo dentro da pasta estática do projeto. O processo a seguir cria um endpoint de API simples que retorna um arquivo de dados estático:

Na pasta estático, crie um arquivo de dados JSON estático chamado data.json. Você pode usar o modelo de arquivo Texto como base para o arquivo.
Substitua o conteúdo do arquivo JSON pelo código a seguir que fornece alguns dados de exemplo para demonstrar o mecanismo:
```
{
   "01": {
      "note" : "Sample data to demonstrate the mechanism."
   }
}
```
No arquivo HelloFlask/views.py, adicione uma função com o ponto de extremidade /api/data da rota que retorna o arquivo de dados estáticos usando o método send_static_file:
```
@app.route('/api/data')
def get_data():
  return app.send_static_file('data.json')
```
Salve as alterações do projeto e execute o projeto novamente. Navegue até o endpoint da rota /api/data e confirme se o aplicativo retorna o arquivo estático.
Quando terminar, interrompa o aplicativo.

Organizar arquivos e pastas estáticos

Você pode adicionar outros arquivos CSS, JavaScript e HTML na pasta estático de acordo com as necessidades do projeto. Uma maneira típica de organizar arquivos estáticos é criar subpastas chamadas fontes, scriptse de conteúdo (para folhas de estilo e quaisquer outros arquivos).

Usar rotas de URL e parâmetros de consulta nas APIs

Você pode lidar com variáveis de URL e parâmetros de consulta com APIs quando trabalha com o Flask. Para obter mais informações, confira Usar rotas de URL variável e parâmetros de consulta na Etapa 1 desta série de tutoriais.

Adicionar página ao aplicativo Flask

Adicionar outra página ao aplicativo Flask envolve as seguintes tarefas:

Adicionar uma função Python que define a visualização
Adicionar um modelo para a marcação HTML da página
Atualizar as rotas de URL no arquivo views.py do projeto Flask

Siga estas etapas para adicionar uma página "Sobre" (/about) ao projeto BasicProject Flask e adicionar links para essa página a partir da página inicial.

No Gerenciador de Soluções, clique com o botão direito do mouse na pasta HelloFlask/templates no seu projeto e selecione Adicionar>Novo Item.

Dica

Se você não vir o comando Novo Item no menu Adicionar, pare o aplicativo Flask para que o Visual Studio saia do modo de depuração, conforme necessário.
Na caixa de diálogo Adicionar Novo Item, selecione o modelo Página HTML, nomeie o arquivo about.html e selecione Adicionar.

Substitua o conteúdo do arquivo about.html pela seguinte marcação HTML:

<html>
   <head>
      <title>{{ title }}</title>
      <link rel="stylesheet" type="text/css" href="/static/site.css" />
   </head>
   <body>
      <div><a href="home">Home</a></div>
      {{ content }}
   </body>
</html>

Em uma etapa subsequente, você substitui o link explícito para a home page por uma barra de navegação.

No arquivo HelloFlask/views.py, adicione uma função chamada about que usa o modelo:

@app.route('/about')
def about():
   return render_template(
      "about.html",
      title = "About HelloFlask",
      content = "Example app page for Flask.")

No arquivo HelloFlask/templates/index.html, adicione a seguinte marcação como a primeira instrução no elemento <body>:
```
<div><a href="about">About</a></div>
```
Essa marcação adiciona um link à página /about do aplicativo Flask. Em uma etapa posterior, você substituirá esse link por uma barra de navegação.
Salve as alterações do projeto e execute o projeto novamente. Navegue até a página /about e verifique a navegação entre as várias páginas do aplicativo.
Quando terminar, interrompa o aplicativo.

Nomeie sua função de página

O Flask não impõe restrições ou requisitos ao nome da função de página. O decorador @app.route determina as URLs para as quais o Flask chama a função para gerar uma resposta. Os desenvolvedores normalmente correspondem o nome da função da página com a rota, mas esse tipo de correspondência não é necessário.

Usar a herança de modelo para cabeçalho e navegação

Em vez de links de navegação explícitos em cada página, muitos aplicativos Web têm um cabeçalho de identidade visual e uma barra de navegação que fornece os links de página mais importantes, menus pop-up e assim por diante. Para garantir a consistência dentro do aplicativo, o cabeçalho e a barra de navegação devem ser iguais em todas as páginas, mas você não precisa repetir o mesmo código em cada modelo de página. Você pode definir as partes comuns de todas as suas páginas em um único arquivo.

O sistema de modelagem do Flask (Jinja por padrão) fornece duas maneiras de reutilizar elementos específicos em vários modelos:

Includes corresponde a outros modelos de página que você insere em um local específico no modelo de referência com a sintaxe {% include <template_path> %}. Você também pode usar uma variável se quiser alterar o caminho dinamicamente no código. Normalmente, as inclusões são usadas no corpo de uma página para incluir o template compartilhado em um local específico na página.
Inheritance usa a sintaxe {% extends <template_path> %} no início de um modelo de página para especificar um modelo de base compartilhado no qual o modelo de referência se baseará. A herança é usada normalmente para definir um layout compartilhado, uma barra de navegação e outras estruturas para as páginas de um aplicativo. Essa abordagem requer que os modelos de referência adicionem ou modifiquem apenas áreas específicas do modelo base chamado blocos.

Para ambas as abordagens, o valor <template_path> é relativo à pasta de modelos do aplicativo (../ ou ./ também são permitidos).

Um modelo base delinea blocos usando as marcas {% block <block_name> %} e {% endblock %}. Se um modelo de referência usar marcas com o mesmo nome de bloco, o conteúdo do bloco no modelo de referência substituirá o bloco correspondente no modelo base.

As etapas a seguir demonstram a herança do modelo:

No Gerenciador de Soluções, clique com o botão direito do mouse na pasta HelloFlask/templates, e crie um novo arquivo a partir do modelo de Página HTML com o nome layout.html.

Substitua o conteúdo do arquivo layout.html pela seguinte marcação HTML:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>{{ title }}</title>
   <link rel="stylesheet" type="text/css" href="/static/site.css" />
</head>

<body>
   <div class="navbar">
      <a href="/" class="navbar-brand">Hello Flask</a>
      <a href="{{ url_for('home') }}" class="navbar-item">Home</a>
      <a href="{{ url_for('about') }}" class="navbar-item">About</a>
   </div>

   <div class="body-content">
      {% block content %}
      {% endblock %}
      <hr/>
      <footer>
         <p>&copy; 2024</p>
      </footer>
   </div>
</body>
</html>

Esse modelo contém um bloco chamado content, que identifica todo o conteúdo que as páginas de referência precisam substituir.

No arquivo HelloFlask/static/site.css, adicione os seguintes estilos ao final do arquivo:

.navbar {
   background-color: lightslategray;
   font-size: 1em;
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   color: white;
   padding: 8px 5px 8px 5px;
}

.navbar a {
   text-decoration: none;
   color: inherit;
}

.navbar-brand {
   font-size: 1.2em;
   font-weight: 600;
}

.navbar-item {
   font-variant: small-caps;
   margin-left: 30px;
}

.body-content {
   padding: 5px;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Essas definições de estilo geram um resultado interessante para este exercício. Este passo a passo não demonstra design responsivo.

Substitua o conteúdo do arquivo HelloFlask/templates/index.html pela seguinte marcação:
```
{% extends "layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
O modelo index agora refere-se ao modelo base e substitui o bloco de content. Você pode ver que, usando a herança, esse modelo é simplificado.
Substitua o conteúdo do arquivo HelloFlask/templates/about.html pela seguinte marcação, de modo que o modelo de about também se refere ao modelo base e substitui o bloco content:
```
{% extends "layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Execute o aplicativo novamente e observe os resultados. Use os links da barra de navegação para alternar entre as páginas do aplicativo.
Quando terminar, interrompa o aplicativo e salve as alterações do projeto.
Como você fez alterações substanciais no aplicativo, é um bom momento para salvar suas alterações em um repositório Git. Para obter mais informações, confira Confirmar alterações no controle do código-fonte na Etapa 2 desta série de tutoriais.

Revisão do tutorial

Parabéns por concluir este tutorial sobre o Flask no Visual Studio.

Neste tutorial, você aprendeu a:

Criar um projeto do Flask com várias páginas
Usar modelos para criar exibições de página diferentes
Servir arquivos estáticos, adicionar páginas e usar herança de modelos

Documentação do Designer de Modelo Jinja (jinja.pocoo.org)
url_for na documentação do objeto de aplicação Flask (flask.pocoo.org)
Código-fonte do Tutorial no GitHub (Microsoft/python-sample-vs-learning-flask)

Compartilhar via

Tutorial: Servir arquivos estáticos e usar a herança de modelo com o Flask no Visual Studio

Pré-requisitos

Explorar modelos de itens no Visual Studio

Entender como o Visual Studio identifica modelos de item

Servir arquivos estáticos a partir do seu aplicativo

Usar um arquivo CSS estático em um modelo

Servir arquivo estático a partir do código

Organizar arquivos e pastas estáticos

Usar rotas de URL e parâmetros de consulta nas APIs

Adicionar página ao aplicativo Flask

Nomeie sua função de página

Usar a herança de modelo para cabeçalho e navegação

Revisão do tutorial

Comentários

Recursos adicionais

Compartilhar via

Tutorial: Servir arquivos estáticos e usar a herança de modelo com o Flask no Visual Studio

Pré-requisitos

Explorar modelos de itens no Visual Studio

Entender como o Visual Studio identifica modelos de item

Servir arquivos estáticos a partir do seu aplicativo

Usar um arquivo CSS estático em um modelo

Servir arquivo estático a partir do código

Organizar arquivos e pastas estáticos

Usar rotas de URL e parâmetros de consulta nas APIs

Adicionar página ao aplicativo Flask

Nomeie sua função de página

Usar a herança de modelo para cabeçalho e navegação

Revisão do tutorial

Conteúdo relacionado

Comentários

Recursos adicionais