如何访问链接到在 tornado Web 服务器中使用的 html 的外部 css 文件？答案

【问题标题】：How to access external css file linked to html which is used in tornado web server?如何访问链接到在 tornado Web 服务器中使用的 html 的外部 css 文件？
【发布时间】：2021-12-14 06:35:40
【问题描述】：

我是 tornado 的新手，我正在从事一项非常基本的 tornado web 部署工作。我正在尝试渲染一个使用外部 css 的 HTML 文件。但我无法加载css。我正在使用 VScode，所有文件都在我的资源管理器文件夹中。这就是我尝试访问 html 和 css 的方式：

import tornado.web
import tornado.ioloop

class basicRequestHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("index.html")

class staticRequestHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("demo.html")

if __name__=="__main__":
    app=tornado.web.Application([
        (r"/", basicRequestHandler),
        (r"/upload", staticRequestHandler)
    ])

    app.listen(8881)
    print("listening on port 8881")
    tornado.ioloop.IOLoop.current().start()

我的 demo.html 文件包含名为 design.css 的外部 css，我试图像这样访问它：


<!DOCTYPE html>
<html lang="en">
<head>    
    <link rel="stylesheet" href="design.css"> <!--here-->
</head>

<body>
    <div class="drag-area">
            <img src="a.png" width="80px" height="100px" class="center">
                
            <h4 style="text-align: center; color: white; font-size: xx-large;" class="default">Drag and drop files here</h4>

            <h4 style="text-align: center; color: white; font-size: xx-large;">OR</h4>

            <input type="file" id="myfile" name="myfile" multiple class="button">

        </div>
        <br>
        <br>
        <button onClick="window.location.reload();">Refresh Page</button>
    </div>
    <br>
    
    
</body>
<button type="submit">UPLOAD</button>
</html>

我所有的文件（design.css、demo.html 等）都在我在 vscode 中导入的同一个文件夹中。

请帮忙。

【问题讨论】：

标签： python html css tornado

【解决方案1】：

欢迎来到这里。你需要一个静态文件处理程序，就像这里一样

import os

import tornado.web
import tornado.httpserver
import tornado.ioloop
import threading, Queue

print('start Webserver')
SERVER_PORT = 9090

currenPath = os.path.dirname(os.path.abspath(__file__))
resourcesPath = currenPath + '/ressources'

class IndexPageHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("index.html")

class webApplication(tornado.web.Application):
    def __init__(self):
        handlers = [
            (r'/', IndexPageHandler),
            (r'/(.*)', tornado.web.StaticFileHandler, {'path': resourcesPath})
        ]

        settings = {
            'static_path': resourcesPath,
            'template_path': 'templates'
        }
        tornado.web.Application.__init__(self, handlers, **settings)

if __name__ == '__main__':
    ws_app = webApplication()
    server = tornado.httpserver.HTTPServer(ws_app)
    server.listen(SERVER_PORT);
    print('Listening on ',SERVER_PORT)
    tornado.ioloop.IOLoop.instance().start()

【讨论】：

对不起，你能解释一下吗？我没有得到模板路径的用途。另外，我应该在我的主文件夹中创建一个新文件夹 ressources 并将我的 css 文件放在那里吗？
在这种情况下你不需要它，但你可以按照龙卷风的模板规则离开 html 页面。这很可能是你要搜索的下一个东西。

【解决方案2】：

如果是简单的css，最好有HTML。如果是 SPA，最好有压缩文件，以免出现问题。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。