Python 之 Flask 入门学习

news2025/5/18 22:51:41

安装 Flask

在开始使用 Flask 之前，需要先安装它。可以通过 pip 命令来安装 Flask：

pip install Flask

创建第一个 Flask 应用

创建一个简单的 Flask 应用，只需要几行代码。以下是一个最基本的 Flask 应用示例：

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'

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

将上述代码保存为 app.py，然后在终端中运行：

python app.py

运行后，访问 http://127.0.0.1:5000/，将会看到页面上显示 “Hello, World!”。

路由和视图函数

在 Flask 中，路由是通过 @app.route() 装饰器来定义的。路由决定了当用户访问某个 URL 时，应该执行哪个视图函数。例如：

@app.route('/about')
def about():
    return 'This is the about page.'

访问 http://127.0.0.1:5000/about 将会显示 “This is the about page.”。

模板渲染

Flask 使用 Jinja2 模板引擎来渲染 HTML 页面。可以通过 render_template 函数来渲染模板。首先，在项目目录下创建一个 templates 文件夹，并在其中创建一个 index.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
</head>
<body>
    <h1>{{ message }}</h1>
</body>
</html>

然后在 Flask 应用中使用 render_template 来渲染这个模板：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html', message='Hello, Flask!')

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

访问 http://127.0.0.1:5000/ 将会看到页面上显示 “Hello, Flask!”。

处理表单数据

Flask 可以轻松处理表单数据。以下是一个简单的表单处理示例：

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/form', methods=['GET', 'POST'])
def form():
    if request.method == 'POST':
        name = request.form['name']
        return f'Hello, {name}!'
    return render_template('form.html')

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

在 templates 文件夹中创建一个 form.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form</title>
</head>
<body>
    <form method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <button type="submit">Submit</button>
    </form>
</body>
</html>

访问 http://127.0.0.1:5000/form，填写表单并提交后，将会看到页面上显示 “Hello, [你输入的名字]!”。

静态文件

Flask 允许在 static 文件夹中存放静态文件，如 CSS、JavaScript 和图片。可以通过 url_for 函数来引用这些静态文件。例如：

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

部署 Flask 应用

Flask 应用可以通过多种方式部署，例如使用 Gunicorn 或 uWSGI。以下是一个使用 Gunicorn 部署的示例：

gunicorn app:app

这将启动一个生产环境的 Flask 应用。

通过以上步骤，可以快速入门 Flask 并开始构建自己的 Web 应用。

实践项目

项目结构如下图
在这里插入图片描述
web_flask.py 源码

from flask import Flask, request, render_template, send_from_directory
import os, json

# 创建实例,设置静态资源目录，设置默认模板目录
app = Flask(__name__ ,static_folder='static' ,template_folder='templates')

# 添加额外的静态目录和对应的URL路径，访问静态资源http://127.0.0.1:5100/upload/test.txt
@app.route('/upload/<path:filename>')
def publicFiles(filename):
    return send_from_directory('upload', filename)


# 访问首页http://127.0.0.1:5100
@app.route('/')
def myIndex():
    # return "我是首页"
    return render_template('index.html')


# 获取GET请求参数http://127.0.0.1:5100/welcome?userName=我的名字 
@app.route('/welcome', methods=["GET"])
def getparam():
    userName = request.values.get("userName")
    return render_template('hello.html', name=userName)


# 接收上传文件
@app.route("/upfile", methods=["POST", "GET"])
def upfile():
    file = request.files.get("filename")
    if file is None: #表示没有发送文件
        return {
            'message': "文件上传失败"
        }

    file_name = file.filename.replace(" ","") #删除空格
    file.save(os.path.dirname(__file__)+'/upload/'+ file_name)  #保存文件
    str = f"获取上传文件的名称为：{file_name}"
    print(str)

    res =  {
        'code': 200,
        'messsge': "文件上传成功",
        'fileName': file_name,
        'url': 'http://127.0.0.1:5100/upload/' + file_name
    }
    restr = json.dumps(res, ensure_ascii=False) #防止中文显示为Unicode编码
    return restr


if __name__ == '__main__':
    app.run(host='127.0.0.1', port=5100)

访问首页的效果图

在这里插入图片描述

index.html 模板源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>上传文件</title>
	</head>
	<body>
		<form action="http://127.0.0.1:5100/upfile" method="post" enctype="multipart/form-data">
		    <input type="file" name="filename" /><br>
		    <input type="submit" value="上传" />
			<input type="reset" value="取消" />
		</form>
		
		<!-- <script>
			var form = document.getElementsByTagName('form')[0];
			form.onsubmit = function(){
				var xhr = new XMLHttpRequest();
				xhr.open('post','http://127.0.0.1:5100/upfile');
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4){
						if(xhr.status == 200){}
					}
				}
			}
		</script> -->
	</body>
</html>

展示get请求参数

hello.html 模板源码

<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
    <link href="../static/favicon.ico" rel="icon">
</head>
<body>
    <h1>Hello, {{ name }}!</h1>
</body>
</html>