Flask 在 Visual Studio Code 上的使用和 Flask Jinja 模板

在本文中，我们将介绍如何在 Visual Studio Code 上使用 Flask 框架，以及如何使用 Flask Jinja 模板来构建动态网页。

阅读更多：Flask 教程

Flask 在 Visual Studio Code 上的安装和配置

首先，我们需要下载并安装 Visual Studio Code。请前往官方网站下载最新版本的 Visual Studio Code，并按照安装向导进行安装。

安装完成后，我们需要安装 Python 扩展，来支持在 Visual Studio Code 上使用 Flask。打开 Visual Studio Code，点击左侧的扩展图标，搜索并安装 Python 扩展。

安装完成后，我们需要创建一个新的 Python 虚拟环境，以便在项目中使用 Flask。在终端中执行以下命令：

python3 -m venv venv

然后，我们激活虚拟环境：

在 Windows 上，执行以下命令：venv\Scripts\activate
在 macOS/Linux 上，执行以下命令：source venv/bin/activate

接下来，我们需要安装 Flask。执行以下命令：

pip install flask

现在我们已经完成了在 Visual Studio Code 上使用 Flask 的安装和配置。

创建 Flask 应用

在 Visual Studio Code 中，创建一个新的文件夹作为我们的 Flask 项目根目录。在根目录中，创建一个名为 app.py 的文件，并在其中编写以下代码：

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello, Flask!'

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

以上代码创建了一个简单的 Flask 应用，当访问根路径时，返回一个简单的字符串。

运行 Flask 应用

在 Visual Studio Code 中，使用快捷键 Ctrl + `打开终端。在终端中，执行以下命令来启动 Flask 应用：

python app.py

Flask 应用将在本地的 http://127.0.0.1:5000/ 上运行。在浏览器中打开该链接，您将看到显示的字符串 “Hello, Flask!”。

Flask Jinja 模板

Flask 提供了强大的模板引擎 Jinja，用于生成动态网页。下面，我们将介绍如何使用 Flask Jinja 模板来构建动态网页。

首先，在项目根目录中创建一个名为 templates 的文件夹。在 templates 文件夹中，创建一个名为 index.html 的文件，并编写以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>Flask Jinja Template</title>
</head>
<body>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
</body>
</html>

以上代码定义了一个简单的 HTML 模板。模板中使用了 Jinja 的模板语法，通过 {{ variable }} 的方式来插入动态内容。

接下来，在 app.py 文件中修改代码如下：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    title = 'Welcome to Flask'
    content = 'This is an example of using Flask Jinja template'
    return render_template('index.html', title=title, content=content)

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

以上代码中，我们增加了一个路由函数 index()，并在其中使用 render_template() 函数来渲染模板。render_template() 函数接收模板名称和动态内容作为参数，在渲染过程中将动态内容插入到模板中。

重新启动 Flask 应用并在浏览器中打开 http://127.0.0.1:5000/，您将看到渲染后的动态网页，页面标题为 “Welcome to Flask”，正文内容为 “This is an example of using Flask Jinja template”。