Jak załadować plik javascript lub css do szablonu BottlePy?

Próbuję zwrócić szablon html z BottlePy. I to działa dobrze. Ale jeśli wstawię plik javascript podobny do tego w moim tpl-file:Jak załadować plik javascript lub css do szablonu BottlePy?

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

Otrzymuję błąd 404. (Nie udało się załadować zasób: serwer odpowiedział ze statusem 404 (nie znaleziono))

Czy ktoś wie jak rozwiązać ten problem?

Oto mój skrypt:

from bottle import route, run, view 

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

I to jest plik szablonu, znajduje się w podkatalogu "./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>

Może to jest "ROOTPATH / js/main.js" z serwera rozwoju, gdzie szuka mojego JS-pliku?

Struktura plików jest:

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

Dzięki.

Źródło

2011-08-08 eltorrero

próbowałeś jakiś debugowania, jak drukowanie ścieżkę korzeni i zawartość folderu js? –

Po pierwsze, potrzebujesz serwera deweloperskiego, aby faktycznie służyć main.js, w przeciwnym razie nie będzie dostępny dla przeglądarki.

Jest zwyczajem, aby umieścić wszystkie .js i .css plików w katalogu w małych aplikacji internetowych static, więc powinien wyglądać tak:

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

W żadnym wypadku dokładnie ten nazewnictwa i układ jest wymagane, tylko często używany.

Następnie należy dostarczyć do obsługi plików statycznych:

from bottle import static_file 

# ... 

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

Będzie actuall służyć plików pod static/ do przeglądarki.

Teraz do ostatniej rzeczy. Określono JavaScript jako:

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

To oznacza ścieżkę do .js jest względną do bieżącej strony. Na twoim serwerze programistycznym strona indeksu (/) będzie szukała .js w /js/main.js, a inna strona (na przykład /post/12) będzie szukała go w /post/12/js/main.js i na pewno się nie powiedzie.

Zamiast tego należy użyć funkcji get_url, aby prawidłowo odnieść się do plików statycznych.Twój handler powinien wyglądać następująco:

from Bottle import get_url 

# ... 

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

I index.tpl, .js powinny być oznaczone jako:

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

get_url znajdzie obsługi z name='static' i oblicza właściwą ścieżkę do niego. W przypadku serwera dev zawsze będzie to /static/. Można chyba nawet ciężko to kod w szablonie, ale nie polecam go z dwóch powodów:

nie będziesz w stanie zamontować swoją aplikację w dowolnym miejscu, ale pod korzeń w produkcji; tj. po przesłaniu go na serwer porducyjny można go umieścić pod numerem http://example.com/ (root), ale nie pod numerem http://example.com/myapp/.
Jeśli zmienisz lokalizację katalogu /static/, będziesz musiał przeszukać wszystkie szablony i zmodyfikować je w każdym szablonie.

Źródło

2011-08-08 10:15:03 Helgi

możesz sprawdzić to pytanie http://stackoverflow.com/questions/9505256/static-files-in-bottle-py – Anuj

@Anuj: Odpowiedziałem na twoje pytanie. – Helgi

dzięki za odpowiedź .. – Anuj

Myślę, że umieszczasz plik main.js w niewłaściwym miejscu.

Należy zauważyć, że ta ścieżka pliku musi być względna do żądanego adresu URL, a nie względem ścieżki do szablonu. W związku z tym umieszczenie go w folderze takim jak template/js/main.js nie będzie działać.

Źródło

2011-08-08 06:47:19 Paulpro

Popatrz na edytowane pytanie, aby uzyskać więcej informacji. – eltorrero

Oto działająca metoda dodawania plików statycznych, takich jak CSS/JS w projekcie WWW Butelka. Używam Bootstrap i Python 3.6.

Struktura projektu

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>

Wyjście

Źródło

2017-08-18 16:44:02 arsho

Jak załadować plik javascript lub css do szablonu BottlePy?

Odpowiedz

Powiązane problemy