[Anne]新建一个Flask应用

最新推荐文章于 2025-08-05 15:24:31 发布

原创最新推荐文章于 2025-08-05 15:24:31 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flask #python

Anne 专栏收录该内容

4 篇文章

订阅专栏

本篇博客介绍了如何使用Flask初始化应用，创建首页路由，利用template渲染页面，替换前端模板，处理静态文件和配置路由，以及添加favicon。通过这些步骤，成功搭建了一个简单的报表平台Anne。

Flask是一个轻量级的python web框架，在这个系列中我们准备使用Flask来搭建一个简单的报表平台Anne
本篇博客的目标是启动一个Flask应用，并套用一个前端模板来进行Demo的展示

初始化应用

新建app.py添加

from flask import Flask

app = Flask("Anne")
app.run()

默认网址是http://127.0.0.1:5000
如果想要修改host和port可以在run的时候指定

HOST = "0.0.0.0"
PORT = 5000
app.run(HOST, PORT)

但这时候app没有任何一可访问的route，访问网址之后会报404
在这里插入图片描述
因此要添加首页的路由

@app.route("/")
def index():
    return "Hello Anne"

添加完成后就可以看到首页出现了
在这里插入图片描述
应用的初始化就完成了
完整代码如下

from flask import Flask

app = Flask("Anne")

@app.route("/")
def index():
    return "Hello Anne"

if __name__ == "__main__":
    HOST = "0.0.0.0"
    PORT = 5000
    app.run(HOST, PORT)

使用template

Flask可以使用template来对页面进行渲染
首先在app.py所在的目录下建立templates目录
在templates目录中添加index.html

<!DOCTYPE html>
<div>
    Hello Anne
</div>

修改index函数使用flask的render_template

from flask import render_template

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

这样首页就会根据index.html中内容的变化而变化了

替换template

前端页面的内容写起来很复杂，好在现在网上有很多现成的模板可以使用
由于Anne的定位是一个Dashboard的网站，因此选择模板
https://startbootstrap.com/previews/sb-admin
将模板下载下来后将其解压到templates目录下，发现网站报错

0.0.0.0 - - [01/Jan/2021 00:00:00] "GET / HTTP/1.1" 200 -
0.0.0.0 - - [01/Jan/2021 00:00:00] "GET /css/styles.css HTTP/1.1" 404 -
0.0.0.0 - - [01/Jan/2021 00:00:00] "GET /js/scripts.js HTTP/1.1" 404 -
0.0.0.0 - - [01/Jan/2021 00:00:00] "GET /assets/demo/chart-area-demo.js HTTP/1.1" 404 -
0.0.0.0 - - [01/Jan/2021 00:00:00] "GET /assets/demo/chart-bar-demo.js HTTP/1.1" 404 -
0.0.0.0 - - [01/Jan/2021 00:00:00] "GET /js/datatables-simple-demo.js HTTP/1.1" 404 -

在这里插入图片描述
这是因为Flask没能找到templates下的静态文件
常用的解决方案是在一级目录下新建一个static的文件夹，然后将css文件移入改文件夹下，同时修改html的link，使用url_for，以css为例

<link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet" />

全部修改完成后首页就好了
在这里插入图片描述
点击页面链接，发现所有跳转都不生效，原因是相关路由没有配置
使用和index相同的方法配置路由即可

添加favicon

刷新页面，发现网站报错

"GET /favicon.ico HTTP/1.1" 404

favicon是显示在浏览器地址栏，收藏夹等地方用来展示网站的图标
找到一张图片将其命名为favicon，放入static目录，并建立路由就能解决这个报错
我这里是一张png图片

@app.route('/favicon.ico')
def favicon():
    return redirect(url_for('static', filename='assets/img/favicon.png'))

至此，一个简单的Flask应用就新建好了