flask中调用静态文件步骤

最新推荐文章于 2025-05-02 08:50:17 发布

luco2008

最新推荐文章于 2025-05-02 08:50:17 发布

阅读量667

点赞数 1

CC 4.0 BY-SA版权

分类专栏： python

本文链接：https://blog.youkuaiyun.com/luco2008/article/details/102750817

python 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用Flask框架快速搭建一个包含静态资源和模板的简易Web应用，包括创建主程序、设置路由、引入JavaScript文件及实现按钮点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. test_flask.py主程序

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

2. 在test_flask.py同目录下新建static目录，在static目录下新建js目录，在js目录下新建hello.js

function sayHello() {
    alert("Hello World!")
}

3. 在test_flask.py同目录下新建templates目录，在目录下新建index.html

<html>

   <head>
      <script type = "text/javascript"
         src = "{{ url_for('static', filename = 'js/hello.js') }}" ></script>
   </head>
    <body>
        <input type="button" onclick="sayHello()" value="Say Hello">
    </body>
</html>

4. 运行test_flask.py程序