如何将JavaScript或CSS文件加载到BottlePy模板中? [英] How to load a javascript or css file into a BottlePy template?
问题描述
我试图用BottlePy返回一个html模板.并且这很好.但是，如果我在tpl文件中插入这样的javascript文件:
<script type="text/javascript" src="js/main.js" charset="utf-8"></script>
我收到404错误. (无法加载资源:服务器的响应状态为404(未找到))
有人知道如何解决此问题吗?
这是我的脚本文件:
from bottle import route, run, view
@route('/')
@view('index')
def index():
return dict()
run(host='localhost', port=8080)
这是模板文件，位于"./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>
也许是开发服务器在其中查找我的js文件的"rootPath/js/main.js"吗?
文件的结构为:
app.py
-js
main.js
-views
index.tpl
谢谢.
首先，您需要开发服务器实际提供main.js服务，否则它将无法用于浏览器.
习惯上将所有.js和.css文件放在小型Web应用程序的static目录下，因此布局应如下所示:
app.py
- static/
main.js
- views/
index.tpl
绝不意味着这种精确的命名和布局是必需的，只是经常使用.
接下来，您应该为静态文件提供处理程序:
from bottle import static_file
# ...
@route('/static/:path#.+#', name='static')
def static(path):
return static_file(path, root='static')
这实际上会将您在static/下的文件提供给浏览器.
现在，到最后一件事.您将JavaScript指定为:
<script type="text/javascript" src="js/main.js" charset="utf-8"></script>
这意味着.js的路径是相对于当前页面的 .在开发服务器上，索引页(/)将在/js/main.js中查找.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 }
在index.tpl中，.js应引用为:
<script type="text/javascript" src="{{ get_url('static', path='main.js') }}" charset="utf-8"></script>
get_url查找具有name='static'的处理程序，并计算到该处理程序的正确路径.对于开发服务器，该值始终为/static/.您甚至可以在模板中对其进行硬编码，但是出于两个原因，我不建议这样做:
- 您将无法在根目录下将应用程序挂载到生产环境中；即，当您将其上传到porduction服务器时，可以将其放置在 http://example.com/(根)，但不在 http://example.com/myapp/下.
- 如果更改
/static/目录的位置，则必须在整个模板中进行搜索，然后在每个模板中对其进行修改.
I am trying to return a html template with BottlePy. And this works fine. But if I insert a javascript file like this in my tpl-file:
<script type="text/javascript" src="js/main.js" charset="utf-8"></script>
I get an 404 error. (Failed to load resource: the server responded with a status of 404 (Not Found))
Does anyone know how to fix this problem?
Here is my script file:
from bottle import route, run, view
@route('/')
@view('index')
def index():
return dict()
run(host='localhost', port=8080)
And that is the template file, located in "./views" subfolder.
<!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>
Maybe it is the "rootPath/js/main.js" from the development server where it looks for my js-file?
The structure of the files is:
app.py
-js
main.js
-views
index.tpl
Thanks.
Well, first, you need your dev server to actually serve main.js, otherwise it won't be available for the browser.
It's customary to put all .js and .css files under the static directory in small web apps, so your layout should look like this:
app.py
- static/
main.js
- views/
index.tpl
By no means this exact naming and layout is required, only often used.
Next, you should supply a handler for the static files:
from bottle import static_file
# ...
@route('/static/:path#.+#', name='static')
def static(path):
return static_file(path, root='static')
This will actuall serve your files under static/ to the browser.
Now, to the last thing. You specified your JavaScript as:
<script type="text/javascript" src="js/main.js" charset="utf-8"></script>
That means the path to .js is relative to the current page. On you development server, the index page (/) will look for .js in /js/main.js, and another page (say, /post/12) will look for it in /post/12/js/main.js, and will sure fail.
Instead, you need to use the get_url function to properly reference static files. Your handler should look like this:
from Bottle import get_url
# ...
@route('/')
@view('index')
def index():
return { 'get_url': get_url }
And in index.tpl, .js should be referenced as:
<script type="text/javascript" src="{{ get_url('static', path='main.js') }}" charset="utf-8"></script>
get_url finds a handler with name='static', and calculates the proper path to it. For dev server, this will always be /static/. You can probably even hard-code it in the template, but I don't recommend it for two reasons:
- You won't be able to mount your app anywhere but under root in production; i.e., when you upload it onto the porduction server, it can be placed under http://example.com/ (root), but not under http://example.com/myapp/.
- If you change the
/static/dir location, you'll have to search it all over your templates and modify it in every single template.
这篇关于如何将JavaScript或CSS文件加载到BottlePy模板中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
