Partilhar via

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

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

As etapas anteriores desta série de tutoriais criam um aplicativo Flask mínimo com uma única página de HTML independente. Os aplicativos Web modernos geralmente 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 Flask e expandir os recursos do aplicativo.

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

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

Pré-requisitos

Explore modelos de itens no Visual Studio

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

  1. Para exibir os modelos disponíveis, vá para Gerenciador de Soluções no Visual Studio e abra a estrutura do projeto.

  2. Clique com o botão direito do rato na pasta na qual pretende criar um novo ficheiro e selecione Adicionar>Novo Item. A caixa de diálogo Adicionar Novo Item abre:

  3. 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. Visual Studio usa esse identificador de tipo para reconhecer e mostrar apenas os modelos de item que são 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 pedir que você os classifique sempre.

Servir ficheiros estáticos a partir da sua aplicação

Em um aplicativo web construído 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, então o servidor host simplesmente os entrega as-is quando são solicitados. Esses tipos de arquivos são referidos como arquivos "estáticos", e o Flask pode entregá-los automaticamente sem que você precise escrever qualquer código. Dentro de arquivos HTML, por exemplo, você pode fazer referência 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 ponto final de API, o Flask fornece um método conveniente. Você pode fazer referência a arquivos usando caminhos relativos dentro de uma pasta chamada estático na raiz do projeto. O segundo procedimento nesta seção demonstra como trabalhar com um arquivo de dados estático simples do código.

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

Usar arquivo CSS estático em um modelo

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

  1. No Gerenciador de Soluções , clique com o botão direito do mouse na pasta HelloFlask no projeto, selecione Adicionar>Nova pastae nomeie a pasta static.

  2. Clique com o botão direito do mouse na pasta estática e selecione Adicionar>Novo Item.

  3. Na caixa de diálogo Adicionar Novo Item, selecione o modelo de 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 atualizada do projeto Flask:

    Captura de tela que mostra a estrutura de arquivos estáticos no Gerenciador de Soluções.

  4. Substitua o conteúdo do ficheiro de site.css pelos seguintes estilos:

    .message {
    font-weight: 600;
    color: blue;
}

  5. 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 da série de tutoriais por um elemento <span> que faz referência à classe de estilo message. Usar uma classe de estilo dessa maneira oferece mais flexibilidade no estilo do elemento HTML.

  6. 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.)

  7. Execute o projeto e observe os resultados. Quando terminar, pare o aplicativo.

  8. (Opcional) Você pode confirmar suas alterações no controle do código-fonte e atualizar seu repositório remoto. Para obter mais informações, consulte 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 seguinte cria um endpoint de API simples que retorna um ficheiro de dados estático.

  1. Na pasta estática, crie um arquivo de dados JSON estático chamado data.json. Você pode usar o modelo de arquivo Text como base para o arquivo.

  2. 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."
   }
}

  3. No arquivo HelloFlask/views.py, adicione uma função com o endpoint /api/data 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')

  4. Salve as alterações do projeto e execute o projeto novamente. Navegue até o ponto de extremidade de rota /api/data e confirme se o aplicativo retorna o arquivo estático:

    Captura de tela que mostra a exibição de página do aplicativo atualizada para a rota inicial de barra e a saída de arquivo estático para a rota de dados de barra da API.

  5. Quando terminar, pare o aplicativo.

Organizar arquivos e pastas estáticos

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

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

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

Adicionar página à aplicação 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
  • Atualize 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 links para essa página a partir da página inicial:

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

    Dica

    Se não vir o comando New Item no menu Adicionar, certifique-se de parar a sua aplicação Flask para que o Visual Studio saia do modo de depuração, conforme necessário.

  2. Na caixa de diálogo Adicionar Novo Item, selecione o modelo de Página HTML, nomeie o arquivo about.htmle selecione Adicionar.

  3. Substitua o conteúdo do arquivo about.html com a 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 página inicial por uma barra de navegação.

  4. 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.")

  5. No arquivoindex.html HelloFlask/templates/, adicione a seguinte marcação como a primeira instrução no elemento <body>:

    <div><a href="about">About</a></div>

    Esta marcação de código adiciona um link para a página /about do aplicativo Flask. Em uma etapa posterior, substitua esse link por uma barra de navegação.

  6. 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.

  7. Quando terminar, pare o aplicativo.

Nomeie sua função de página

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

Usar 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 marca 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 os mesmos em todas as páginas, mas você não precisa repetir o mesmo código em todos os modelos de página. Você pode definir as partes comuns de todas as suas páginas em um único arquivo.

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

  • Inclui são 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. As inclusões geralmente são usadas no corpo de uma página para inserir o modelo partilhado em um local específico da página.

  • Herança usa a sintaxe {% extends <template_path> %} no início de um modelo de página para especificar um modelo base partilhado em que o modelo de referência é baseado. A herança é normalmente usada para definir um layout partilhado, barra de navegação e outras estruturas das páginas de uma aplicação. Essa abordagem requer modelos de referência para adicionar ou modificar apenas áreas específicas do modelo base chamadas blocos .

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

Um modelo base delineia blocos usando as tags {% block <block_name> %} e {% endblock %}. Se um modelo de referência usar tags 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:

  1. 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 Página HTML com o nome layout.html.

  2. Substitua o conteúdo do arquivo layout.html com a 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>

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

  3. 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;
}

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

  4. 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 se refere ao modelo base e substitui o bloco content. Você pode ver que, usando herança, esse modelo é simplificado.

  5. Substitua o conteúdo do arquivoabout.html HelloFlask/templates/ pela seguinte marcação, para que o modelo about também se refira ao modelo base e substitua o bloco content:

    {% extends "layout.html" %}
{% block content %}
{{ content }}
{% endblock %}

  6. Execute o aplicativo novamente e observe os resultados. Use os links da barra de navegação para alternar entre as páginas do aplicativo.

    Captura de tela que mostra o aplicativo Flask revisado que usa herança de modelo para renderizar um cabeçalho e uma barra de navegação em todas as páginas.

  7. Quando terminar, pare o aplicativo e salve as alterações do projeto.

  8. 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, consulte 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 como:

  • Criar um projeto Flask com várias páginas
  • Utilizar modelos para criar diferentes vistas de página
  • Servir arquivos estáticos, adicionar páginas e usar herança de modelo

Conteúdo relacionado

  • Last updated on