### 如何在VSCode中使用Flask框架构建包含前端的可执行Python应用程序 要在VSCode中使用Flask框架创建一个包含前端的可执行Python应用程序，需要完成以下几部分内容：环境配置、项目结构搭建、后端代码编写以及前端页面设计。 #### 1. 环境配置 首先，确保已经安装了Python 3.7.7或更高版本，并且安装了VSCode编辑器。接下来，在VSCode中安装必要的扩展，如“Python”扩展和“Jinja”扩展，以支持Python开发和模板语法高亮显示[^1]。此外，还需要通过命令行工具（如终端）安装Flask库： ```bash pip install Flask ``` #### 2. 项目结构搭建 一个典型的Flask项目通常具有以下结构： ``` flask_app/ │ ├── app.py # 后端主程序文件 ├── templates/ # 存放HTML模板文件 │ └── index.html # 前端页面文件 └── static/ # 存放静态资源文件（CSS、JS等） ├── style.css # 样式文件 └── script.js # 脚本文件 ``` #### 3. 后端代码编写 在`app.py`中编写Flask应用的基本逻辑。以下是一个简单的示例代码： ```python 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) ``` 上述代码定义了一个根路由`/`，当访问该路由时会渲染`templates`目录下的`index.html`文件[^1]。 #### 4. 前端页面设计 在`templates/index.html`中创建一个简单的HTML页面。例如： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flask App</title> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> </head> <body> <h1>Welcome to the Flask Application!</h1> <p>This is a simple example of a Flask application with a front-end.</p> <script src="{{ url_for('static', filename='script.js') }}"></script> </body> </html> ``` 此页面引用了`static`目录中的`style.css`样式文件和`script.js`脚本文件。可以通过`url_for`函数动态生成静态资源的路径[^4]。 #### 5. 静态资源管理 在`static/style.css`中添加一些基本样式： ```css body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; } ``` 在`static/script.js`中添加简单的JavaScript功能： ```javascript console.log("Flask App is running!"); ``` #### 6. 运行应用程序 在VSCode的终端中，导航到项目根目录并运行以下命令启动Flask应用： ```bash python app.py ``` 默认情况下，Flask会在本地地址`http://127.0.0.1:5000/`上运行。打开浏览器访问该地址即可看到前端页面[^1]。 ---