Tornado Web服务器中如何访问HTML文件关联的外部CSS文件？

问题原因 #

Tornado服务未配置静态资源处理规则，浏览器发起的css、图片等静态资源请求没有对应的响应逻辑，返回404状态码，因此资源无法加载。

解决步骤 #

• 首先在项目根目录创建名为static的文件夹，将design.css、a.png等静态资源移入该文件夹，HTML模板文件可保留在根目录。
• 修改Tornado服务初始化配置，新增模板路径、静态资源路径参数：

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)
        ],
        template_path = ".", # 模板文件存放路径，"."代表当前根目录
        static_path = "./static" # 静态资源存放路径
    )

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

• 修改demo.html中的静态资源引用路径，加上/static/前缀：

<link rel="stylesheet" href="/static/design.css">
<img src="/static/a.png" width="80px" height="100px" class="center">

补充说明 #

如果不需要单独划分静态资源目录，希望所有文件都放在根目录下直接使用，可以在路由列表中新增静态资源匹配规则，无需修改资源引用路径：

if __name__=="__main__":
    app=tornado.web.Application(
        [
            (r"/", basicRequestHandler),
            (r"/upload", staticRequestHandler),
            # 新增行：匹配所有css、png格式的资源请求，直接从根目录返回
            (r"/(.*\.css|.*\.png)", tornado.web.StaticFileHandler, {"path": "."})
        ],
        template_path = "."
    )

该方式仅适用于本地测试，生产环境使用会存在源码泄露风险，不推荐。

内容的提问来源于stack exchange，提问作者noobmaster