如何使用Flask包构建网页

最新推荐文章于 2024-05-13 15:55:07 发布

Sun_Sherry

最新推荐文章于 2024-05-13 15:55:07 发布

阅读量6.6k

点赞数 14

分类专栏： Python 文章标签： flask python 后端

本文链接：https://blog.csdn.net/yeshang_lady/article/details/122662048

版权

Python 专栏收录该内容

54 篇文章 17 订阅

订阅专栏

最近接到的任务是用Flask构建简单的算法成果展示网页，所以才来研究如何用flask构建网页。因为要求展示，对前端页面的美化不做要求。所以这篇博客的重点在于页面之间的跳转及前后端的数据传输。

1. Flask运行HTML代码

默认情况下，Flask是可以直接解析html代码的，所以可以在python代码中直接使用return语句返回html代码。具体如下：

from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
    return '<h1>Hello,World！</h1>'
if __name__ == "__main__":
    app.run(host='127.0.0.1', port=8080,debug=True)

运行代码，并在浏览器里打开http://127.0.0.1:8080，具体如下：
在这里插入图片描述
这样一个简单的网页就搭建完了。这种构建网页的方法虽然简单，但是可读性较差、效率低，非常笨拙，所以Flask中又提供了render_template函数。Flask中使用的是Jinja2的模板引擎，所以render_template不仅能渲染静态的html文件，也能传递参数给html，使一个html模板根据参数的不同显示不同的内容，非常灵活。具体示例如下：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Flask构建网页--test</title>
</head>
<body>
<div style='background-color:yellow;width:300px;height:300px'>
	<h1>你好啊</h1>
	<h3>Hello,world</h3>
	<p>你好啊</p>
</div>
</body>
</html>

python代码:

from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html')
if __name__ == "__main__":
    app.run(host='127.0.0.1', port=8080,debug=True)

运行上述python代码，并在浏览器中输入http://127.0.0.1:8080/ , 其运行结果如下：
在这里插入图片描述
这里要注意index.html文件的存放位置，在python代码的同一级目录下创建templates文件夹，将index.html文件放到该文件夹下(下同，将不再进行单独说明)。
正如刚刚提到的，Flask使用的Jinja2的模板引擎，关于Jinja2的基本语法可以参考博客：https://blog.csdn.net/yeshang_lady/article/details/122668361

2. Flask实现网页跳转

当搭建了多个网页之后，需要将各个网页之间联系起来，这时候就需要完成网页之间的跳转。若要完成网页的跳转，需要两个辅助函数url_for和redirect。

2.1 url_for和redirect

(1) url_for的用法
url_for()可以给指定的函数构造URL，它接受函数名作为第一个参数，也接受对应 URL 规则的变量部分的命名参数。未知变量部分会添加到 URL 末尾作为查询参数。

from flask import Flask,request,render_template,url_for,redirect
app=Flask(__name__)
@app.route('/')
def index():
    pass
@app.route('/login/<name>')
def login_fun():
    pass
with app.test_request_context():
    print(url_for('index')) #url_for接收的是函数名(字符串类型)
    print(url_for('login_fun',name='Tina'))

输出结果为：

/
/login/Tina

(2) redirect的用法
redirect()可以把用户重定向要其他地方去。假设有两个html文件及其网页，具体如下：
index.html

<html lang="en">
<head>
    <title>网页跳转--test</title>
</head>
<body>
<h3>Hello,world</h3>
</body>
</html>

在这里插入图片描述
login.html

<html>
</head>
	<title>输入页面</title>
</head>
<body>
<h3>请输入你的姓名和年龄</h3>
<form action='/submit_result' method='GET'>
<div style='height:30px'><span style='display:inline-block;margin-right:5px'>姓名:</span>
	<input type='text' name='name' />
</div>
<div style='height:30px'><span style='display:inline-block;margin-right:5px'>年龄:</span>
<input type='text' name='age' /></div>
<div><input type='submit' value='提交'>
</form>
</body>
</html>

在这里插入图片描述
运行下述python代码，在浏览器中输入http://127.0.0.1:5000之后直接进入了login页面(http://127.0.0.1:5000/login)。

from flask import Flask,request,render_template,url_for,redirect
app=Flask(__name__)

@app.route('/')
def index():
    return redirect(url_for('login_1'))

@app.route('/login')
def login_1():
    return render_template('login.html')

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

2.2 网页跳转

以下列3个页面为例，实现网页之间的跳转。
index.html

<html>
<head>
<title>网页跳转</title>
</head>
<body>
<h3>Flask如何实现网页跳转</h3>
<div><span style='display:inline-block;margin-right:5px'>用button实现网页跳转，请点击右侧的按钮:</span>
	<a href="{{url_for('welcome')}}"><input type='button' value='Click Me!!'/></a>
<div>
<div><span style='display:inline-block;margin-right:5px'>用链接实现网页跳转，请点击此链接:</span>
	<a href="{{url_for('to_404')}}" rel="external nofollow">Click Me!!</a>
<div>
</body>
</html>

hello.html

<html lang="en">
<head>
    <title>欢迎</title>
</head>
<body>
<h3>Hello,World!!</h3>
<a href="{{url_for('index')}}"><input type='button' value='返回上一级'/></a>
</body>
</html>

404.html

<html lang="en">
<head>
    <title>404错误</title>
</head>
<body>
<h1>您查找的页面不存在......</h1>
</body>
</html>

python代码

from flask import Flask,request,render_template,url_for,redirect
app=Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/welcome')
def welcome():
    return render_template('hello.html')

@app.route('/404')
def to_404():
    return render_template('404.html')

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

在这里插入图片描述

3. 后端数据传输到前端页面

当需要把后端传输到前端页面展示时，可以将要传入的数据放入render_template()函数中。具体示例如下：
index.html

<html lang="en">
<head>
    <title>My Webpage</title>
</head>
<body>
<table border="1" bgcolor="#ECF5FF">
<tr><td>用户名</td><td>课程名</td><td>分数</td></tr>
{% for item in users %}
<tr><td>{{item[0]}}</td><td>{{item[1]}}</td><td>{{item[2]}}</td></tr>
{% endfor %}
</table>
</body>
</html>

python代码

from flask import Flask,request,render_template
app=Flask(__name__)

@app.route('/')
def index():
    users=[['Tina','语文',69],['Joy','英语',100],['James','生物',90],['Tom','历史',83]]
    return render_template('index.html',users=users)

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

则代码运行结果如下：
在这里插入图片描述

4. 前端输入数据传到后端

当需要把前端网页上填入的数据传输到后端时，常用的方法时form表单提交(包括JS提交、ajax异步表单提交等)。这里仅以type=submit方式的form表单提交为例进行说明。具体如下：
login.html

<html>
</head>
	<title>输入页面</title>
</head>
<body>
<h3>请输入你的姓名和年龄</h3>
<form action='/submit_result' method='GET'>
<div style='height:30px'><span style='display:inline-block;margin-right:5px'>姓名:</span>
	<input type='text' name='name' />
</div>
<div style='height:30px'><span style='display:inline-block;margin-right:5px'>年龄:</span>
<input type='text' name='age' /></div>
<div><input type='submit' value='提交'>
</form>
</body>
</html>

python代码

from flask import Flask,request,render_template,url_for,redirect
app=Flask(__name__)

@app.route('/')
def index():
    return render_template('login.html')

@app.route('/submit_result',methods=['GET','POST'])
def submit():
    if request.method=='POST':
        name=request.form['name']
        age=request.form['age']
    elif request.method=='GET':
        name=request.args.get('name')
        age=request.args.get('age')
    if len(name)>0 and len(age)>0:
        return '<h3>提交成功!!</h3>'
    return '<h3>提交失败!!</h3>'

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