¿Cómo cargar un archivo javascript o css en una plantilla BottlePy?

Estoy tratando de devolver una plantilla html con BottlePy. Y esto funciona bien Pero si inserto un archivo javascript como este en mi archivo tpl:¿Cómo cargar un archivo javascript o css en una plantilla BottlePy?

<script type="text/javascript" src="js/main.js" charset="utf-8"></script>

Recibo un error 404. (Error al cargar los recursos: el servidor responde con el estado 404 (no encontrado))

¿Alguien sabe cómo solucionar este problema?

Aquí está mi archivo de script:

from bottle import route, run, view 

@route('/') 
@view('index') 
def index(): 
    return dict() 
run(host='localhost', port=8080)

Y ese es el archivo de plantilla, que se encuentra en la subcarpeta "./views".

<!DOCTYPE html> 
<html lang="de"> 
    <head> 
     <meta charset="utf-8" /> 
     <script type="text/javascript" src="js/main.js" charset="utf-8"></script> 
    </head> 
    <body> 
    </body> 
</html>

Tal vez es el "ROOTPATH / JS/main.js" en el servidor de desarrollo en el que busca mi js-archivo?

La estructura de los archivos es:

app.py 
-js 
main.js 
-views 
index.tpl

Gracias.

Fuente

2011-08-08 eltorrero

has necesitado algún tipo de depuración, como la impresión fuera de su ruta raíz y el contenido de la carpeta js? –

Bueno, primero, necesita que su servidor de desarrollo realmente sirva main.js, de lo contrario no estará disponible para el navegador.

Se acostumbra a poner todos .js y .css archivos en el directorio static en pequeñas aplicaciones web, por lo que su diseño debe tener este aspecto:

app.py 
- static/ 
    main.js 
- views/ 
    index.tpl

De ninguna manera esta denominación exacta y el diseño se requiere, a menudo sólo usado.

A continuación, se debe suministrar un controlador para los archivos estáticos:

from bottle import static_file 

# ... 

@route('/static/:path#.+#', name='static') 
def static(path): 
    return static_file(path, root='static')

Esto servirá Actuall sus archivos bajo static/ al navegador.

Ahora, para lo último. Ha especificado el JavaScript como:

<script type="text/javascript" src="js/main.js" charset="utf-8"></script>

Eso significa que el camino hacia la .js es relativa a la página actual. En que el servidor de desarrollo, la página de índice (/) buscará .js en /js/main.js, y otra página (por ejemplo, /post/12) buscará en /post/12/js/main.js, y seguro de fallar.

En su lugar, debe utilizar la función get_url para hacer una referencia adecuada de los archivos estáticos.Su manejador debe tener este aspecto:

from Bottle import get_url 

# ... 

@route('/') 
@view('index') 
def index(): 
    return { 'get_url': get_url }

Y en index.tpl, .js se debe hacer referencia como:

<script type="text/javascript" src="{{ get_url('static', path='main.js') }}" charset="utf-8"></script>

get_url encuentra un controlador con name='static', y calcula la ruta que le es propia. Para el servidor de desarrollo, esto siempre será /static/. Probablemente incluso pueda codificarlo en la plantilla, pero no lo recomiendo por dos razones:

No podrá instalar su aplicación en ningún lugar excepto en la raíz de producción; es decir, cuando lo carga en el servidor de producción, puede colocarse en http://example.com/ (raíz), pero no en http://example.com/myapp/.
Si cambia la ubicación del directorio /static/, tendrá que buscarlo en todas sus plantillas y modificarlo en cada plantilla.

Fuente

2011-08-08 10:15:03 Helgi

puede consultar esta pregunta http://stackoverflow.com/questions/9505256/static-files-in-bottle-py – Anuj

@Anuj: He respondido su pregunta. – Helgi

gracias por responder .. – Anuj

Creo que está poniendo el archivo main.js en la ubicación incorrecta.

Tenga en cuenta que esta ruta del archivo debe ser relativa a la URL solicitada, no relativa a la ruta a su plantilla. Así que ponerlo en una carpeta como template/js/main.js no funcionará.

Fuente

2011-08-08 06:47:19 Paulpro

Mira la pregunta editada para más detalles, por favor. – eltorrero

Aquí es un enfoque de trabajo de añadir archivos estáticos como CSS/JS en proyecto web Botella. Estoy usando Bootstrap y Python 3.6.

Estructura del proyecto

project 
│ app.py 
│ bottle.py 
│ 
├───static 
│ └───asset 
│  ├───css 
│  │  bootstrap-theme.css 
│  │  bootstrap-theme.css.map 
│  │  bootstrap-theme.min.css 
│  │  bootstrap-theme.min.css.map 
│  │  bootstrap.css 
│  │  bootstrap.css.map 
│  │  bootstrap.min.css 
│  │  bootstrap.min.css.map 
│  │  custom.css 
│  │ 
│  ├───fonts 
│  │  glyphicons-halflings-regular.eot 
│  │  glyphicons-halflings-regular.svg 
│  │  glyphicons-halflings-regular.ttf 
│  │  glyphicons-halflings-regular.woff 
│  │  glyphicons-halflings-regular.woff2 
│  │ 
│  └───js 
│    bootstrap.js 
│    bootstrap.min.js 
│    jquery.min.js 
│    npm.js 
│ 
└───views 
     index.tpl

app.py

from bottle import Bottle, run, \ 
    template, debug, static_file 

import os, sys 

dirname = os.path.dirname(sys.argv[0]) 

app = Bottle() 
debug(True) 

@app.route('/static/<filename:re:.*\.css>') 
def send_css(filename): 
    return static_file(filename, root=dirname+'/static/asset/css') 

@app.route('/static/<filename:re:.*\.js>') 
def send_js(filename): 
    return static_file(filename, root=dirname+'/static/asset/js') 

@app.route('/') 
def index(): 
    data = {"developer_name":"Ahmedur Rahman Shovon", 
      "developer_organization":"Datamate Web Solutions"} 
    return template('index', data = data) 

run(app, host='localhost', port = 8080)

index.tpl

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content="Bottle web project template"> 
    <meta name="author" content="datamate"> 
    <link rel="icon" href="/static/favicon.ico">   
    <title>Project</title> 
    <link rel="stylesheet" type="text/css" href="/static/bootstrap.min.css"> 
    <script type="text/javascript" src="/static/jquery.min.js"></script> 
    <script type="text/javascript" src="/static/bootstrap.min.js"></script> 
</head> 
<body> 
    <!-- Static navbar --> 
    <nav class="navbar navbar-default navbar-static-top"> 
     <div class="container"> 
      <div class="row"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#">Project</a> 
       </div> 
       <div id="navbar" class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a href="../navbar/">Home</a></li> 
         <li><a href="./">Github</a></li> 
         <li><a href="../navbar-fixed-top/">Stackoverflow</a></li> 
        </ul> 
       </div><!--/.nav-collapse --> 
      </div> 
     </div> 
    </nav> 
    <div class="container"> 
     <div class="row"> 
      <div class="jumbotron"> 
      <h2>Welcome from {{data["developer_name"]}}</h2> 
       <p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p> 
      </div> 
     </div> 
     <!--./row--> 
     <div class="row"> 
      <hr> 
      <footer> 
       <p>&copy; 2017 {{data["developer_organization"]}}.</p> 
      </footer>   
     </div> 
    </div> 
    <!-- /container --> 
</body> 
</html>

salida

Fuente

2017-08-18 16:44:02 arsho

¿Cómo cargar un archivo javascript o css en una plantilla BottlePy?

Respuesta

Cuestiones relacionadas