Flask 模板语言

淩亂°似流年 2022-11-26 07:53 180阅读 0赞

### Flask 模板语言 ###

*  jinja2基本用法
 *  过滤器
 *  图片加载
 *  继承

# jinja2基本用法 #

#导入flask模块
    from flask import Flask
    # 加载html用的模块
    from flask import render_template
    # Flask初始化
    app=Flask(__name__)
    @app.route('/index1')
    def index():
        name="张三"
        age=18
        hobbys=["篮球","rap","唱歌","跳舞"]
        print(locals()) #{'name': '张三', 'age': 18, 'hobbys': ['篮球', 'rap', '唱歌', '跳舞'], 'address': {'广东省': '广州', '北京': '北京', '上海': '上海'}}
        return render_template("index.html",**locals())
    if __name__ == '__main__':
        # host表示域名,默认为localhost(127.0.0.1)
        # port表示端口 默认为5000
        # debug表示调试 默认为False True可自动热启动
        app.run(host="127.0.0.1",port="2022",debug=True)

templates/index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <body>
    {#{
       { 变量 }}#}
    <p>我的名字是{
       { name }}</p>
    <p>我的年龄是{
       { age }}岁</p>
    <p>我的爱好:
        {#{% python基本语法 %}#}
        {% for hobby in hobbys %}
            {#    loop.index  下标#}
            {
       { hobby }}--->{
       { loop.index }}
        {% endfor %}
    </p>
    <p>地址:
        {% for key,value in address.items() %}
            {
       { key }} ---->{
       { value }}
        {% endfor %}
    </p>
    </body>
    </html>

![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20200811100357606.png][https_img-blog.csdnimg.cn_20200811100357606.png]

# 过滤器 #

def myadd(x):
        return x+10
    def myadd2(x,y):
        return x+y
    app.add_template_filter(myadd,'myadd')
    app.add_template_filter(myadd2,'myadd2')
    @app.route('/index2')
    def index2():
        name = "张三"
        age = 18
        hobbys = ["篮球", "rap", "唱歌", "跳舞"]
        js='<a href="#">点我</a>'
        num=12
        return render_template("index2.html",**locals())

templates/index2.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>过滤器</title>
    </head>
    <p>
    <p>我的名字是{
       { name }}</p>
    <p>我的年龄是{
       { age }}岁</p>
    <p>我的爱好:
        {% for hobby in hobbys %}
            {
       { hobby }}
        {% endfor %}
    </p>
    <h1>统计长度</h1>
    <p>名字的长度:{
       { name|length }}</p>
    <p>爱好的长度:{
       { hobbys|length }}</p>
    <h1>执行js</h1>
    {
       { js }}
    {
       { js|safe }}
    <h1>自定义的过滤器</h1>
    <p>{
       { num|myadd }}</p>
    <p>{
       { num|myadd2(10) }}</p>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70]

# 图片加载 #

templates/index2.html

![在这里插入图片描述][20200811102708370.png]

# 继承 #

app.py

....
    #新加代码
    @app.route('/news')
    def news():
        return render_template("news.html")
    ....

templates/base.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}{% endblock %}</title>
    </head>
    <body>
        <div style="height: 100px;background-color: bisque">
            头部
        </div>
        <div style="height: 1000px;background-color: aliceblue">
            <div style="height: 1000px;width: 20%;float: left;background-color: beige">
                <ul>
                    <li><a href="#">链接1</a></li>
                    <li><a href="#">链接2</a></li>
                    <li><a href="#">链接3</a></li>
                    <li><a href="#">链接4</a></li>
                </ul>
            </div>
            <div style="height: 1000px;width: 80%;float: left">
                {% block right %}{% endblock %}
            </div>
        </div>
    {#    {% include "footer.html" %}#}
    </body>
    </html>

templates/news.html

{% extends "base.html" %}
    {% block title %}用户管理{% endblock %}
    {% block right %}
        用户管理详情...
    {% endblock %}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70 1]

[https_img-blog.csdnimg.cn_20200811100357606.png]: /images/20221124/f8ae8c7f3b4f4716a3f8aa3b3269bdfd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70]: /images/20221124/f650221c8edf4064b3ae7d9300e8c7ef.png
[20200811102708370.png]: /images/20221124/3ea79531c74a4eaa9fe5773a11aad6db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70 1]: /images/20221124/5611dbe18fe643db9b0e8b16fe398cae.png