Flask入门指南:Python Web开发基础教学

安装 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>
    

    作者:菜鸟驿站2020

    物联沃分享整理
    物联沃-IOTWORD物联网 » Flask入门指南:Python Web开发基础教学

    发表回复