[Follow Study] Day5:flask开发中的jinja2模板引擎学习笔记(二)

一、flask jinja2语法

1、flask manager runserver

前面给大家说了flask-script是我们在开发过程中经常会用到的,首先我们先用manager.add_command添加一个runserver命令,方便我们后面做调试。

from flask import Flask
from flask-script import Manager, Server

app=Flask(__name__)
manager=Manager(app)

@app.route('/')
    def index():
        return render_template('index.html', title="hello world")

manager.add_command('runserver',
     Server(
        host='127.0.0.1',
        port='5000',
        use_debugger=True,
        use_reloader=True
    )
)

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

然后我们在命令行下运行sample.py文件,注意这个时候运行的时候需要附加参数。

python sample.py runserver

这个时候我们就可以看到我们的项目重新启动,具体如下图:

Paste_Image.png

2、flask jinja2变量

在flask jinja2模板中,功能是很强大的,支持变量,支持if语句,支持for循环,总之一句话,强大的超出你的想象!印象中好像那个php框架也是使用的jinja2作为模板引擎的。

flask jinja2设置变量

语法:

{% set var = 值 %}

比如我们要做一个导航,在jinja2模板引擎中可以这样写,首先我们先进行赋值操作。

{% set nav=[
    {"name":"Home","href":url_for('.index')},
    {"name":"project","href":url_for('.project')},
    {"name":"service","href":url_for('.service')},
    {"name":"about","href":url_for('.about')}
]
%}

3、flask jinja2 for循环

在上面我们对导航的内容进行了赋值,接下来,我们需要通过for循环语句,把这些内容一样遍历出来。

{% for item in nav%}
    <a href="{{ item.href }}">{{ item.name }}</a>
{% endfor %}

这个时候我们重新刷新我们的页面就可以看到我们的导航已经完美出来了,而且点击相应的链接都能够跳转到相应的页面。

Paste_Image.png

4、flask jinja2 loop用法

看完了上面的内容是不是觉得页面有点单调?我们一般看到的导航,两个item之间都有一个|,下面我们就通过loop来加上这个功能,loop最常用的操作是对for循环的指针进行判断操作,常见的用途,比如循环多少位然后加入广告位置等,这里以|为例给大家介绍jinja2的loop操作。

{% for item in nav%}
    {% if loop.index != 1 %}
        |
    {% endif %}
    <a href="{{ item.href }}">{{ item.name }}</a>
{% endfor %}

其中这里的if语句就是判断循环的指针是否是第一个,如果是的话,那么先输出一个|,然后再输出a标签,这时候我们可以刷新一下首页:

Paste_Image.png

5、jinja2 if语句

jinja2中的if语句和for循环语句用法上差不多一样,都是双标签语句,有开始就应该有闭合:

{% if 判断语句%}
    省略
{% else %}
    省略
{% endif %}

二、jinja2模板继承、包含、宏

jinja2模板优点很多,其中很大的一个优点是可以通过模板的继承来简化模板页面,这个功能可以让你丰富的页面以及其优美的代码展现。

1、jinja2模板继承

jinja2模板继承的核心是区块的继承,区块需要命名,区块的名字在模板中是唯一的,下面是一个母模板的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
        <meta charset="UTF-8">
        {% block title%}{% endblock title %}
    {% endblock head%}
</head>
<body>
    {% block content %}{% endblock content %}
</body>
    {% block footer %}
        <p>CopyRight 2017 Powered by 小虾 公众号:虾扯蛋人生</p>
    {% endblock footer %}
</html>

上面就是一个简单的母模板文件,其中的block可以简单的理解就是占位,继承模板文件中用这个来填充,下面是一个index.html的模板。

{% extends 'base.html' %}

上面就是在index.html简单地继承base.html,这个时候,我们刷新首页就可以看到我们的页面已经继承了,不过由于headtitlecontent没有输入占位内容,所以我们只能看到母模板base.html基本内容:

Paste_Image.png

下面我们对index.html内其他内容进行填充,然后再进行。

{% extends 'base.html' %}
{% block head %}
{% block title %}
<title>{{ title }}</title>
{% endblock title %}
{% endblock head %}

{% block content %}
{{ body }}
{% endblock content %}

这个时候我们刷新页面就可以看到相应的内容。

Paste_Image.png

上面我们也看到footer继承的是base.html页面,但是我们的index.html可能有一些特殊的内容,比如我们要加自己的友情链接,这个时候可以用下面的方法来实现。

{% extends 'base.html' %}
{% block head %}
{% block title %}
<title>{{ title }}</title>
{% endblock title %}
{% endblock head %}

{% block content %}
{{ body }}
{% endblock content %}

{% block footer%}
<p>hello,这是友情链接位置</p>
<hr>
{{ super() }}
{% endblock footer%}

上面的{{ super() }}的意思是调用base.html底部链接,如果没有这个的话,我们的footer blcok会直接被覆盖,加上这个super的话就是新加,super()放在上面的话,那base的内容就在上面,super()放在下面的话就在下面,下面是具体的效果:

Paste_Image.png

继承的块如果想要重复使用的话,可以通过`self.模块名``来调用,比如我们要调用title这个模块,可以通过下面的代码来实现重复调用。

{{ self.title() }}

2、jinja2模板包含

在我们做前端的时候,有时候会出现某一区块的内容,几乎在部分的页面出现,但是不是在全部出现,如果在全部出现的可以用继承,碰到部分的话就通过包含来引入,哪里需要在哪里引入。

使用的语法是include '模板文件',下面给大家以具体的例子来说明。

{% extends 'base.html' %}
{% include 'includes/header.html' %}
{% block content %}
{{ body }}
{% endblock content %}

{% block footer%}
<p>hello,这是友情链接位置</p>
<hr>
{{ super() }}
{% include 'includes/footer.html' %}
{% endblock footer%}

这个时候我们刷新一下页面:

Paste_Image.png

3、jinja2模板宏

jinja2模板宏,通俗地我们可以这里理解,就是在模板中使用函数,jinja2宏一般解决的问题是经常会出现的内容,频率没有继承和包含高,比如input语句。下面是一个使用宏的代码:

{% extends 'base.html' %}
{% include 'includes/header.html' %}
{% macro input(name,value='',type='text') %}
<input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{% endmacro%}
{% block content %}
{{ body }}
<p>{{ input('username') }}</p>
<p>{{ input('password', type='password') }}</p>
{% endblock content %}

{% block footer%}
<p>hello,这是友情链接位置</p>
<hr>
{{ super() }}
{% include 'includes/footer.html' %}
{% endblock footer%}

这个时候我们刷新页面就可以看到我们的表单出来了。

Paste_Image.png

另外我们可以把宏放在一个单独的宏文件,然后在需要引入的时候直接引入,同时为了避免引入的宏文件名字重复,我们可以通过import as这样的语法来引入。

三、学习心得

最近几天学习下来,还是一个感悟,要多动手,有时候看是理解的,但是在写代码的时候可能就会经常性的卡壳,每次的卡壳就是一次新的进步,认真理解了确实很难忘记的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容