当前位置：首页 > news >正文

Flask小项目教程（含MySQL与前端部分）

news 2025/7/3 16:44:12

- 1. 环境配置
- 2. 快速搭建Flask应用程序

1. 环境配置

首先我们在项目的根目录下创建一个 Python 虚拟环境，打开命令行输入以下指令：

python -m venv venv

启动虚拟环境：

.\venv\Scripts\Activate.ps1

如果遇到报错：.\venv\Scripts\Activate.ps1 : File ...\venv\Scripts\Activate.ps1 cannot be loaded because running scripts is disabled on this system.，说明可能是系统禁止运行脚本，打开 PowerShell 查看一下系统当前的执行策略：

get-executionpolicy

如果为 Restricted 说明此系统不载入任何配置文件，不运行任何脚本。我们需要修改一下执行策略，以管理员身份打开 PowerShell，使用以下指令修改执行策略：

Set-ExecutionPolicy Unrestricted  # 设置全局的执行策略
Set-ExecutionPolicy -Scope CurrentUser Unrestricted  # 设置当前用户的执行策略

接下来我们安装 Flask：

pip install flask

2. 快速搭建Flask应用程序

我们先看一下如何创建 URL 与函数的对应关系：

from flask import Flaskapp = Flask(__name__)  # 实例化Flask类的对象@app.route("/index")
def index():return "<h1>Hello World!</h1>"if __name__ == "__main__":app.run()

其中的 @app.route 作用是创建了网址 /index 与 index 函数的对应关系。现在我们运行程序，能看到终端的输出： * Running on http://127.0.0.1:5000，然后我们访问 http://127.0.0.1:5000/index 即可看到 Hello World!。

注意我们返回的字符串中有 <h1></h1> 标签，这是 HTML 标签，整个项目的逻辑是用户（浏览器）访问 URL 时向 Web 应用（此处就是 Flask）发送请求，然后 Web 应用向浏览器返回一个字符串，浏览器是具备解析 <h1> 这类 HTML 标签的能力的。前端部分的学习可以在 Web 专栏中找到。

Tips：PyCharm 输入 main 即可自动补全出 if __name__ == "__main__":，VS Code 则需要进行配置，点击左下角的齿轮，选择 User Snippets（用户代码片段），然后在弹出的下拉选框中选择 python，这时会出来一个配置文件 python.json，然后向该文件中添加 "Print to console" 项，修改后如下：

{"Print to console": {"prefix": "main","body": ["if __name__ == '__main__':","    ${1:pass}","",],"description": "python--main"}
}

Flask 框架为了让我们写 HTML 标签更方便，支持将这些内容写到一个单独的文件中，render_template 函数可以渲染 HTML 文件，默认是从项目根目录下的 templates 目录中开始寻找文件，我们创建 templates 目录并创建一个 index.html 如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Index</title>
</head>
<body><h1>Hello World!</h1>
</body>
</html>

现在就可以将之前的字符串改为渲染一个 HTML 文件了：

from flask import Flask, render_templateapp = Flask(__name__)  # 实例化Flask类的对象@app.route("/index")
def index():return render_template("index.html")if __name__ == "__main__":app.run()

假设我们在页面中需要引入一张本地的图片，在 Flask 中要求我们需要将图片这类静态文件（还有视频、音频、CSS、JS 等）放在项目根目录中的 static 目录下，假设我们有一张图片放在 static/image 目录下，那么就可以直接用相对路径调用该图片了：

<!DOCTYPE html>
<html lang="en">
...
<body><h1>Hello World!</h1><img src="/static/image/background.jpg" />
</body>
</html>

Flask小项目教程（含MySQL与前端部分）

CONTENTS

1. 环境配置

2. 快速搭建Flask应用程序

相关文章：

Flask小项目教程（含MySQL与前端部分）

Eureka

STM32G070RBT6-MCU温度测量（ADC）

数据结构之带头双向循环链表

adb详细教程（四）-使用adb启动应用、关闭应用、清空应用数据、获取设备已安装应用列表

【Spring Boot】日志文件

图像处理与计算机视觉--第五章-图像分割-Canny算子

LabVIEW开发教学实验室自动化INL和DNL测试系统

数据结构：数组与链表

unity 控制玩家物体

指数分布优化器(EDO)(含MATLAB代码)

Java 时间的加减处理

基于A4988/DRV8825的四路步进电机驱动器

万字总结网络原理

【AI视野·今日CV 计算机视觉论文速览第262期】Fri, 6 Oct 2023

一文搞懂Jenkins持续集成解决的是什么问题

微信小程序去除默认滚动条展示

3.02 创建订单操作详细-订单创建与回滚 (创建订单操作详细)

需求放缓、价格战升级、利润率持续恶化对小鹏汽车造成了严重影响

《算法通关之路》chapter19解题技巧和面试技巧

51c自动驾驶~合集58

React Native 开发环境搭建（全平台详解）

DAY 47

【第二十一章 SDIO接口(SDIO)】

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

Nginx server_name 配置说明

自然语言处理——Transformer

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

视觉slam十四讲实践部分记录——ch2、ch3

A2A JS SDK 完整教程：快速入门指南