El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com gestionar fitxers estàtics en una aplicació Flask. Els fitxers estàtics inclouen imatges, fulls d'estil CSS, fitxers JavaScript, i qualsevol altre tipus de fitxer que no canviï dinàmicament.

Conceptes Clau

Fitxers Estàtics: Fitxers que no canvien dinàmicament i són servits directament al client.
Directori static: El directori predeterminat on Flask busca fitxers estàtics.
URL per a Fitxers Estàtics: La manera com Flask genera URLs per accedir als fitxers estàtics.

Estructura del Directori

Per defecte, Flask espera que els fitxers estàtics es trobin en un directori anomenat static dins del directori principal de l'aplicació. La estructura típica d'una aplicació Flask amb fitxers estàtics és la següent:

/my_flask_app
    /static
        /css
            styles.css
        /js
            scripts.js
        /images
            logo.png
    /templates
        index.html
    app.py

Accés als Fitxers Estàtics

Flask proporciona una manera senzilla d'accedir als fitxers estàtics utilitzant la funció url_for. Aquesta funció genera la URL correcta per a un fitxer estàtic.

Exemple de Codi

A continuació, es mostra un exemple de com servir fitxers estàtics en una aplicació Flask:

app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Flask App</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <h1>Welcome to My Flask App</h1>
    <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo">
    <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
</body>
</html>

En aquest exemple, utilitzem la funció url_for per generar les URLs dels fitxers CSS, JavaScript i imatges.

Exercici Pràctic

Objectiu

Crear una aplicació Flask que serveixi una pàgina HTML amb un full d'estil CSS i una imatge.

Passos

Crea l'estructura de directoris següent:

/my_flask_app
    /static
        /css
            styles.css
        /images
            logo.png
    /templates
        index.html
    app.py

Escriu el codi per a app.py:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

Escriu el codi per a templates/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Flask App</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <h1>Welcome to My Flask App</h1>
    <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo">
</body>
</html>

Escriu el codi per a static/css/styles.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    padding: 50px;
}

h1 {
    color: #333;
}

img {
    width: 200px;
    height: auto;
}

Afegeix una imatge anomenada logo.png al directori static/images.

Solució

Després de completar els passos anteriors, executa l'aplicació Flask amb python app.py i obre el navegador a http://127.0.0.1:5000/. Hauries de veure una pàgina amb un títol, una imatge i un estil aplicat des del fitxer CSS.

Resum

En aquesta secció, hem après com gestionar fitxers estàtics en una aplicació Flask. Hem vist com organitzar els fitxers estàtics en el directori static, com generar URLs per a aquests fitxers utilitzant url_for, i hem creat una aplicació pràctica per reforçar aquests conceptes. Ara estem preparats per avançar cap a la gestió de formularis i entrada d'usuari en el següent mòdul.

Treballant amb Fitxers Estàtics

Conceptes Clau

Estructura del Directori

Accés als Fitxers Estàtics

Exemple de Codi

Exercici Pràctic

Objectiu

Passos

Solució

Resum

Curs de Desenvolupament Web amb Flask

Mòdul 1: Introducció a Flask

Mòdul 2: Conceptes Bàsics de Flask

Mòdul 3: Formularis i Entrada d'Usuari

Mòdul 4: Integració de Bases de Dades

Mòdul 5: Autenticació d'Usuaris

Mòdul 6: Conceptes Avançats de Flask

Mòdul 7: APIs RESTful amb Flask

Mòdul 8: Desplegament i Producció

Mòdul 9: Proves i Millors Pràctiques

Mòdul 10: Extensions i Ecosistema de Flask