如何使用Flask包构建网页

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

1. Flask运行HTML代码

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

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

运行代码,并在浏览器里打开http://127.0.0.1:8080,具体如下:

如何使用Flask包构建网页
这样一个简单的网页就搭建完了。这种构建网页的方法虽然简单,但是可读性较差、效率低,非常笨拙,所以Flask中又提供了render_template函数。Flask中使用的是Jinja2的模板引擎,所以render_template不仅能渲染静态的html文件,也能传递参数给html,使一个html模板根据参数的不同显示不同的内容,非常灵活。具体示例如下:
index.html
DOCTYPE html>
<html lang="en">
<head>
    <title>Flask构建网页--testtitle>
head>
<body>
<div style='background-color:yellow;width:300px;height:300px'>
    <h1>你好啊h1>
    <h3>Hello,worldh3>
    <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/ , 其运行结果如下:

如何使用Flask包构建网页
这里要注意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/')
def login_fun():
    pass
with app.test_request_context():
    print(url_for('index'))
    print(url_for('login_fun',name='Tina'))

输出结果为:

/
/login/Tina

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

<html lang="en">
<head>
    <title>网页跳转--testtitle>
head>
<body>
<h3>Hello,worldh3>
body>
html>

如何使用Flask包构建网页
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>

如何使用Flask包构建网页
运行下述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)

如何使用Flask包构建网页
3. 后端数据传输到前端页面

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

<html lang="en">
<head>
    <title>My Webpagetitle>
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)

则代码运行结果如下:

如何使用Flask包构建网页
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 '提交成功!!'
    return '提交失败!!'

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

如何使用Flask包构建网页
参考
  1. https://zhuanlan.zhihu.com/p/73278003
  2. https://www.cnblogs.com/konghui/p/10555062.html
  3. https://blog.csdn.net/qq_42780289/article/details/91129147

Original: https://blog.csdn.net/yeshang_lady/article/details/122662048
Author: Sun_Sherry
Title: 如何使用Flask包构建网页

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/746303/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球