web-dev-qa-db-fra.com

Fichiers statiques de bouteille

J'ai essayé de lire les documents pour Bottle, cependant, je ne sais toujours pas comment fonctionne le service de fichiers statiques. J'ai un fichier index.tpl, Et il contient un fichier css, et cela fonctionne. Cependant, je lisais que Bottle ne sert pas automatiquement les fichiers CSS, ce qui ne peut pas être vrai si la page se charge correctement.

J'ai cependant rencontré des problèmes de vitesse lors de la demande de la page. Est-ce parce que je n'ai pas utilisé la return static_file(params go here)? Si quelqu'un pouvait clarifier comment ils fonctionnent et comment ils sont utilisés lors du chargement de la page, ce serait bien.

Code serveur:

from Bottle import route,run,template,request,static_file



@route('/')
def home():
    return template('Templates/index',name=request.environ.get('REMOTE_ADDR'))

run(Host='Work-PC',port=9999,debug=True)

Indice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="content-type"
 content="text/html; charset=ISO-8859-1">
  <title>index</title>
  <link type="text/css"
 href="cssfiles/mainpagecss.css"
 rel="stylesheet">
</head>
<body>
<table
 style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;"
 border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td>
      <h1><span class="headertext">
      <center>Network
Website</center>
      </span></h1>
      </td>
    </tr>
  </tbody>
</table>
%if name!='none':
    <p align="right">signed in as: {{name}}</p>
%else:
    pass
%end
<br>
<table style="text-align: left; width: 100%;" border="0" cellpadding="2"
 cellspacing="2">
  <tbody>
    <tr>
      <td>
      <table style="text-align: left; width: 100%;" border="0"
 cellpadding="2" cellspacing="2">
        <tbody>
          <tr>
            <td style="width: 15%; vertical-align: top;">
            <table style="text-align: left; width: 100%;" border="1"
 cellpadding="2" cellspacing="2">
              <tbody>
                <tr>
                  <td>Home<br>
                  <span class="important">Teamspeak Download</span><br>
                  <span class="important">Teamspeak Information</span></td>
                </tr>
              </tbody>
            </table>
            </td>
            <td style="vertical-align: top;">
            <table style="text-align: left; width: 100%;" border="1"
 cellpadding="2" cellspacing="2">
              <tbody>
                <tr>
                  <td>
                  <h1><span style="font-weight: bold;">Network Website</span></h1>
To find all of the needed information relating to the network's social
capabilities, please refer to the links in the side bar.</td>
                </tr>
              </tbody>
            </table>
            </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>
pythonpython-2.7bottle
24
IT Ninja

Comme indiqué dans la documentation, vous devez servir des fichiers statiques en utilisant la fonction static et css est un fichier statique. La fonction statique gère la sécurité et certaines autres fonctions que vous pouvez trouver à la source. L'argument path de la fonction statique doit pointer vers le répertoire où vous stockez le css des dossiers

3
cobie

Pour servir des fichiers statiques à l'aide de bottle, vous devrez utiliser la fonction static_file Fournie et ajouter quelques routes supplémentaires. Les itinéraires suivants dirigent les demandes de fichiers statiques et garantissent que seuls les fichiers avec l'extension de fichier correcte sont accessibles.

from bottle import get, static_file

# Static Routes
@get("/static/css/<filepath:re:.*\.css>")
def css(filepath):
    return static_file(filepath, root="static/css")

@get("/static/font/<filepath:re:.*\.(eot|otf|svg|ttf|woff|woff2?)>")
def font(filepath):
    return static_file(filepath, root="static/font")

@get("/static/img/<filepath:re:.*\.(jpg|png|gif|ico|svg)>")
def img(filepath):
    return static_file(filepath, root="static/img")

@get("/static/js/<filepath:re:.*\.js>")
def js(filepath):
    return static_file(filepath, root="static/js")

Maintenant dans votre html, vous pouvez référencer un fichier comme ceci:

<link type="text/css" href="/static/css/main.css" rel="stylesheet">

Disposition du répertoire:

`--static
|  `--css
|  `--fonts
|  `--img
|  `--js
71
Sanketh Katta

Je donne juste une réponse ici parce qu'un certain nombre de mes étudiants ont utilisé ce code dans un devoir et j'ai un peu de souci au sujet de la solution.

La manière standard de servir des fichiers statiques dans Bottle est dans le documentation :

from bottle import static_file
@route('/static/<filepath:path>')
def server_static(filepath):
    return static_file(filepath, root='/path/to/your/static/files')

de cette manière, tous les fichiers sous votre dossier statique sont servis à partir d'une URL commençant par/statique. Dans votre code HTML, vous devez faire référence au chemin URL complet de la ressource, par exemple:

<link rel='stylesheet' type='text/css' href='/static/css/style.css'>

La réponse de Sanketh fait en sorte que toute référence à une image, un fichier css, etc. n'importe où dans l'espace URL est servie à partir d'un dossier donné à l'intérieur du dossier statique. Ainsi /foo/bar/baz/picture.jpg et /picture.jpg seraient tous deux servis à partir de static/images/picture.jpg. Cela signifie que vous n'avez pas à vous soucier de trouver le bon chemin dans votre code HTML et que vous pouvez toujours utiliser des noms de fichiers relatifs (par exemple, juste src = "picture.jpg").

Le problème avec cette approche survient lorsque vous essayez de déployer votre application. Dans un environnement de production, vous souhaitez que les ressources statiques soient servies par un serveur Web comme nginx, et non par votre application Bottle. Pour cela, ils doivent tous être servis à partir d'une seule partie de l'espace URL, par exemple. /statique. Si votre code est jonché de noms de fichiers relatifs, il ne se traduira pas facilement dans ce modèle.

Donc, je vous conseille d'utiliser la solution à trois lignes du didacticiel de bouteille plutôt que la solution plus complexe répertoriée sur cette page. C'est un code plus simple (donc moins susceptible d'être bogué) et il vous permet de passer en toute transparence à un environnement de production sans modifications de code.

12
Steve Cassidy

Plutôt que d'utiliser la correspondance d'expressions régulières pour servir des fichiers comme dans la réponse de Sanketh, je préfère ne pas modifier mes modèles et fournir explicitement un chemin vers les fichiers statiques, comme dans:

<script src="{{ get_url('static', filename='js/bootstrap.min.js') }}"></script>

Vous pouvez le faire simplement en remplaçant le <filename> dans le décorateur de route statique avec l'un des types :path - ainsi:

@app.route('/static/<filename:path>', name='static')
def serve_static(filename):
    return static_file(filename, root=config.STATIC_PATH)

Le :path correspond à un chemin de fichier entier d'une manière non gourmande afin que vous n'ayez pas à vous soucier de changer de modèle lors du passage en production - conservez simplement tout dans la même structure de dossiers relative.

3
Aaron D

J'ai utilisé le modèle de Sanketh dans le passé mais au fil du temps, je l'ai condensé en une fonction agnostique d'extension. Il vous suffit d'ajouter des mappages de dossiers d'extension dans le dictionnaire ext_map. Il est par défaut statique/dossier si une extension n'est pas mappée explicitement.

import os.path    

# Static Routes
@get('/<filename>')
def serve_static_file(filename):
    ext = os.path.splitext(filename)[1][1:]
    ext_map = {'image':['png','gif','jpg','ico'],'js':['js']}
    sub_folder = next((k for k, v in ext_map.items() if ext in v),'')
    return static_file(filename, root='static/'+sub_folder)
1
phoxley