Flask 框架学习

Flask 框架学习,第1张

flask 模板简介

模板是包含静态数据以及动态数据占位符的文件。使用特定数据呈现模板以生成最终文档。Flask 使用Jinja模板库来渲染模板。

在您的应用程序中,您将使用模板来呈现将显示在用户浏览器中的HTML 。
在 Flask 中,Jinja 被配置为自动转义HTML 模板中呈现的任何数据。这意味着呈现给用户输入是安全的;他们输入的任何可能与 HTML 混淆的字符,例如输入<并且>将使用在浏览器中看起来相同(不会被转译为html代码), 不会造成不良影响的安全值进行转义

示例: 一段html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML基础</title>
</head>

<body>
    <h1>我是标题</h1>
    <hr>
    <dl>
        <dt>历史</dt>
        <dd>秦汉</dd>
        <dd>隋唐</dd>
    </dl>
</body>

</html>

直接运行上面代码显示如下:

现在我们调用函数返回
from flask import Flask

app = Flask(__name__)


@app.route('/')
def index():
    return """
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML基础</title>
</head>

<body>
    <h1>我是标题</h1>
    <hr>
    <dl>
        <dt>历史</dt>
        <dd>秦汉</dd>
        <dd>隋唐</dd>
    </dl>
</body>

</html>
"""


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

可以看到前端是可以正常解析html的,但是代码看起来很臃肿,不利于前后端分离,给程序的开发带来了很大的影响。

解决办法:
在程序开发过程中我们应该将html代码剥离出来,通常我们会将代码放到templates目录中,在通过render_template()方法来渲染模板。

示例:
在项目目录下创建templates目录,templates目录下创建index.html

index.html文件中写入:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML基础</title>
</head>

<body>
    <h1>我是标题</h1>
    <hr>
    <dl>
        <dt>历史</dt>
        <dd>秦汉</dd>
        <dd>隋唐</dd>
    </dl>
</body>

</html>

在flask.py中写入:

from flask import Flask,render_template

app = Flask(__name__)


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


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

运行上述脚本,发现显示与之前相同:

原因: render_template()方法根据传的值会在默认模板目录templates下寻找匹配模板。

如果说我想要进一步的将html文件拆分,那么我们可以在templates目录下再创建一个子目录profile,里边创建一个模板文件user.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户中心</title>
</head>
<body>
    <h1>个人中心</h1>
</body>
</html>

这个时候如果我们想要调用user.html文件就必须添加完整的子文件路径,如下:

from flask import Flask,render_template

app = Flask(__name__)


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


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

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

考虑到有些用户可能会自定义模板保存路径,那么我们可以在初始化Flask时,传入template_folder参数来指定指定具体的路径,如下:

app = Flask(__name__, template_folder='./template_files')

此时你可以将所有模板文件放入template_files文件夹中,但是不建议自定义模板目录

注意:
在模板代码中尽量不要使用常规的HTML注释,如,因为Flask也会解析这种方式注释掉的代码,如果需要使用注释,使用{# 这是注释 #}格式的注释。

Flask 模板传参

1.直接传参
修改index.html 模板为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask</title>
</head>
<body>
    <h1>{{username}}</h1>
    <h2>{{age}}</h2>
    <h3>{{hobby}}</h3>
</body>
</html>

在Flask中传入参数;

from flask import Flask,render_template

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html', username='小度', age=18, hobby='羽毛球')

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

运行结果:

可以看到我们传入的参数已经成功的渲染到了页面。

2.字典传参
上面的示例我们仅仅传了几个参数,但是我们工作中吧可能会传入大量的参数,这个时候我们应该怎么处理呢?

将所有参数放在一个函数传参不是一个好的选择,会导致传参部分的代码很臃肿,此时可以进一步改进,使用字典进行包装,并且还可以加两个 * 号,来转换成关键字参数。

修改index.html的模板:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask</title>
</head>
<body>
    <h1>{{context.username}}</h1>
    <h2>{{context.age}}</h2>
    <h3>{{context.hobby}}</h3>
</body>
</html>

修改Flask传参代码:

from flask import Flask,render_template

app = Flask(__name__)


@app.route('/')
def index():
    context = {
        'username':'小度',
        'age':18,
        'hobby':'羽毛球'
    }
    return render_template('index.html', context=context)


@app.route('/profile/')
def profile():
    return render_template('profile/user.html')
    # 修改html保存路径,templates文件下的子路径,详细说明见前面

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

运行代码显示如下:

当然如果我们不想修改模板,即直接用username而不是context.username,此时我们应该用** 修饰context,代码如下:

from flask import Flask,render_template

app = Flask(__name__)


@app.route('/')
def index():
    context = {
        'username':'小度',
        'age':18,
        'hobby':'羽毛球'
    }
    return render_template('index.html', **context)

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

运行结果如下:

3. 嵌套字典取值
传入的参数是一个字典的我们已经学会了,那么如果我们在字典中在嵌套一个字典应该如果传参呢?
python 代码:

from flask import Flask,render_template

app = Flask(__name__)


@app.route('/')
def index():
    context = {
        'username':'小可爱',
        'age':18,
        'hobby':{
            'Basketball':'Basketball',
            'Football':'Football',
            'PingPong':'PingPong'
        }
    }
    return render_template('index.html', **context)

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

模板代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask</title>
</head>
<body>
    <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
    <h1>{{username}}</h1>
    <h2>{{age}}</h2>
    <h4>{{hobby.Basketball}}</h4>
    <h4>{{hobby['Football']}}</h4>
    <h4>{{hobby.PingPong}}</h4>
</body>
</html>

运行结果:

通过上面的示例我们可以看到,嵌套字典取值方法有两种:
法一:属性调用
例如:hobby.Basketball
法二:字典取值
例如:hobby['Football']

4.嵌套列表取值
**嵌套列表取值python代码:

from flask import Flask,render_template

app = Flask(__name__)


@app.route('/')
def index():
    context = {
        'username':'小度',
        'age':18,
        'hobby':{
            'Basketball':'Basketball',
            'Football':'Football',
            'PingPong':'PingPong'
        },
        'books':['Python','Java','PHP']
    }
    return render_template('index.html', **context)


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

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


模板代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask</title>
</head>
<body>
    <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
    <h1>{{username}}</h1>
    <h2>{{age}}</h2>
    <h4>{{hobby.Basketball}}</h4>
    <h4>{{hobby['Football']}}</h4>
    <h4>{{hobby.PingPong}}</h4>
    <h4>{{books.0}}</h4>
    <h4>{{books[1]}}</h4>
    <h4>{{books.2}}</h4>
</body>
</html>

运行结果:

通过上面的示例我们可以发现,列表的取值也有两种方法:

法一:下标属性取值
例如:books.0
法二:列表取值方法
例如:books[1]

注意:字典和列表的取值都有两种方法,建议使用属性取值方法,这在Flask中更合规。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1498042.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-25
下一篇 2022-06-25

发表评论

登录后才能评论

评论列表(0条)

保存