通过编码学习 Flask

2025-06-07

通过编码学习 Flask

你好,程序员们,

本文旨在帮助初学者使用Flask (一个著名的Python库)编写他们的第一个应用程序。FlaskFlask是一个用 Python 编写的轻量级 Web 应用程序框架,适合新手使用。Flask 有时也被归类为微框架,它提供了一个轻量级的代码库,可以轻松扩展为 API、简单的 Web 应用程序或复杂的电商平台。

感谢阅读! - 内容由App Generator提供


安装 Python

Python 可以从官方网站下载。选择适合你操作系统的安装程序,下载并点击几次。在终端窗口中
输入以下内容,你会看到类似以下内容:python --version

$ python --version
Python 3.7.2
Enter fullscreen mode Exit fullscreen mode

安装 Flask

这里我们有两个选择。使用虚拟环境或全局安装 Flask。我选择简单选项:

$ pip install Flask
$ pip freeze | grep Flask 
Enter fullscreen mode Exit fullscreen mode

第一个命令安装 Flask,第二个命令将打印版本。


✨ 下一步:确定项目结构

Flask 将 Web 应用程序的组织方式交给你。整个应用程序可以保存在一个文件中,也可以拆分成多个文件或包。前两个选项是:

  • 单模块结构,所有文件保存在同一目录中。此结构适用于小型项目或学习项目。

Flask - 单模块结构

  • 基本包结构 - 如果您的项目不再小,也许建议使用这个项目结构。

Flask - 应用程序包结构

我们现在可以看到一个更有条理的目录结构,其中每个文件代表:

  • run.py- 应用启动器
  • requirements.txt- 包含项目所需模块的文件
  • app / __init__.py-我们的应用程序的构造函数

✨ 添加代码并运行应用程序

我将选择包结构并创建一些文件来编写应用程序。最小项目结构需要两个文件:

<ROOT> / run.py
       / app /
       / app / __init__.py
Enter fullscreen mode Exit fullscreen mode

内容run.py

from app import app

if __name__ == "__main__":
    app.run()
Enter fullscreen mode Exit fullscreen mode

内容__init__.py

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello Coder, you are up!'
Enter fullscreen mode Exit fullscreen mode

✨ 设置环境

在运行应用程序之前,您必须设置变量FLASK_APP,以告知 Flask 应该首先执行什么

  • 针对 Unix 进行设置:export FLASK_APP=run.py
  • 为 Windows CMD 设置set FLASK_APP=hello.py
  • 设置 Windows Powershell$env:FLASK_APP = "run.py"

导航到保存的目录run.py,然后输入flask run
通过您喜欢的浏览器访问,localhost:5000您应该会看到应用程序正在运行。

Flask App - 第一个屏幕


✨ 整合设计

为了使应用程序更具吸引力,我将整合由Creative-Tim - Material Kit精心制作的流行设计


✨ 我们项目的新结构

集成新设计是一项相当容易的任务,步骤如下:

  • 复制目录下的 UI 套件资产app / static / assets
  • templates在目录下添加index.html

Flask App - 最终结构


✨ 更新文件,以呈现模板

  • 应用程序__init__.py
from flask import Flask, render_template
app = Flask(__name__)

@app.route('/hello')
def hello():
    return 'Hello Coder, you are up!'

@app.route('/')
def index():
    return render_template( 'layouts/default.html',
                            title='Flask - Learn by Coding',
                            description='Simple Flask tutorial for beginners.',
                            content=render_template('pages/index.html') ) 
Enter fullscreen mode Exit fullscreen mode

上面的代码执行以下操作:

  • 加载默认布局
  • 在模板中注入三个变量: page titledescriptioncontent

✨ 布局页面的结构

布局页面


✨ 索引页的结构

索引页


感谢阅读!如需更多资源,请访问:

文章来源:https://dev.to/sm0ke/flask-learn-by-coding-1o8o
PREV
免费管理仪表盘 - 由自由职业者 Stisla 编写
NEXT
Flask Dashboard - 简单的开源启动器