如何将javascript或css文件加载到BottlePy模板中?

elt*_*ero 13 javascript python templates url-for bottle

我想用BottlePy返回一个html模板.这很好用.但是如果我在我的tpl文件中插入这样的javascript文件:

<script type="text/javascript" src="js/main.js" charset="utf-8"></script>
Run Code Online (Sandbox Code Playgroud)

我收到404错误. (无法加载资源:服务器响应状态为404(未找到))

有谁知道如何解决这个问题?

这是我的脚本文件:

from bottle import route, run, view

@route('/')
@view('index')
def index():
    return dict()
run(host='localhost', port=8080)
Run Code Online (Sandbox Code Playgroud)

这是模板文件,位于"./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>
Run Code Online (Sandbox Code Playgroud)

也许它是从开发服务器查找我的js文件的"rootPath/js/main.js"?

文件的结构是:

app.py
-js
 main.js
-views
 index.tpl
Run Code Online (Sandbox Code Playgroud)

谢谢.

Hel*_*lgi 28

好吧,首先,您需要您的开发服务器实际服务main.js,否则它将无法用于浏览器.

这是习惯把所有.js.css文件下static的小型Web应用程序目录,这样你的布局应该是这样的:

  app.py
- static/
    main.js
- views/
    index.tpl
Run Code Online (Sandbox Code Playgroud)

绝不是这种确切的命名和布局,只是经常使用.

接下来,您应该为静态文件提供处理程序:

from bottle import static_file

# ...

@route('/static/:path#.+#', name='static')
def static(path):
    return static_file(path, root='static')
Run Code Online (Sandbox Code Playgroud)

这将实际为static/浏览器下的文件提供服务.

现在,到最后一件事.您将JavaScript指定为:

<script type="text/javascript" src="js/main.js" charset="utf-8"></script>
Run Code Online (Sandbox Code Playgroud)

这意味着对路径.js相对于当前页面.在你开发服务器,索引页(/)将寻找.js/js/main.js和另一页(比如/post/12)将在寻找它/post/12/js/main.js,并且将肯定失败.

相反,您需要使用该get_url函数来正确引用静态文件.您的处理程序应如下所示:

from Bottle import get_url

# ...

@route('/')
@view('index')
def index():
    return { 'get_url': get_url } 
Run Code Online (Sandbox Code Playgroud)

index.tpl,.js应该被引用为:

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

get_url找到一个处理程序name='static',并计算它的正确路径.对于开发服务器,这将永远是/static/.您甚至可以在模板中对其进行硬编码,但我不推荐它有两个原因:

  • 您将无法将应用程序安装在生产中的任何位置,但在根目录下; 也就是说,当你将它上传到porduction服务器上时,它可以放在http://example.com/(root)下,但不能放在http://example.com/myapp/下.
  • 如果更改/static/目录位置,则必须在模板上搜索所有模板并在每个模板中进行修改.