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

发布于 2024-11-28 07:03:49 字数 907 浏览 1 评论 0原文

我正在尝试使用 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>

也许它是来自开发服务器的“rootPath/js/main.js”，它在其中查找我的js文件？

文件的结构是：

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

谢谢。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长发绾君心 2024-12-05 07:03:49

好吧，首先，您需要您的开发服务器实际提供 main.js 服务，否则浏览器将无法使用它。

在小型 Web 应用程序中，习惯上将所有 .js 和 .css 文件放在 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/。您甚至可以在模板中对它进行硬编码，但我不推荐它，原因有两个：

您将无法将您的应用程序安装在生产环境中的根目录下之外的任何地方；即，当您将其上传到生产服务器时，可以将其放置在 http://example.com/ 下（root ），但不在 http://example.com/myapp/ 下。
如果更改 /static/ 目录位置，则必须在整个模板中搜索它并在每个模板中修改它。

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.

回复收藏 0 原文

留蓝 2024-12-05 07:03:49

这是在 Bottle Web 项目中添加 CSS/JS 等静态文件的工作方法。我正在使用 Bootstrap 和 Python 3.6。

项目结构

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>© 2017 {{data["developer_organization"]}}.</p>
            </footer>           
        </div>
    </div> 
    <!-- /container -->
</body>
</html>

输出

Here is a working approach of adding static files like CSS/JS in Bottle web project. I am using Bootstrap and Python 3.6.

Project structure

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>© 2017 {{data["developer_organization"]}}.</p>
            </footer>           
        </div>
    </div> 
    <!-- /container -->
</body>
</html>

Output

回复收藏 0 原文