首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

详解flask入门模板引擎

Posted in Python onJuly 18, 2018

模板引擎

说明：模板文件就是按照一定的规则书写的展示效果的HTML文件 模板引擎就是负责按照指定规则进行替换的工具

模板引擎选择jinja2

一、渲染模板的方法

1、将渲染的模板进行返回

render_template()

2、渲染字符串返回

render_templates_string()

实例

@app.route('/')
def index():
  #将模板内容响应给用户
  return render_template('index.html')
  #渲染一内容响应给用户
  return render_template_string('<h1 style="color:green;font-size:18px;">原谅色</h1>')

二、模板的语法

模板中只存在俩种语法

1、变量

{{ var }}

#像模板文件中传参
return render_template('index.html',title='首恶')
{{ title }}

2、标签

{% 标签名 %}

注意：

在模板中使用字典中的键 需要像使用对象得方式来调用

{{data.key}}

如果在模板中给定的变量不存在 则插入的是空字符串 不会报错

三、过滤器

过滤器使用管道符 | 来使用的

1、{{ var|abs }} 返回一个数值的绝对值

2、default 设置默认值

只有当给定的变量不存在时 则执行默认值

当设置default的boolean的时候 会执行默认值

<li>{{ data.bool|default('我是默认值',boolean=True) }}</li>

3、first: 取出变量中的第一个字符

4、last: 取出变量中的最后一个字符

5、format： 字符的格式化

<li>{{ '我叫%s 我今年%d岁了 我的存款为 %.2f'|format('罗铁汉',38,23) }}</li>

6、length: 返回变量值的长度

7、join: 拼接成字符串

<li>{{ [1,2,3,4]|join('') }}</li>
<li>{{ [1,2,3,4]|join('x') }}</li>

8、safe: 不转义标签 原样显示

9、lower 转为小写

10、upper 转为大写

11、replace 替换

<li>{{ data.string|replace('a','x') }}</li>

12、striptages 去除HTML标签

{{ data.html|striptags }}

四、标签

语法格式 ：{% 标签名 %}

(1) if

实例

{% if data.bool %}
    <li>{{ data.bool }}值为真</li>
{% elif True %}
    <li>{{ True }}职位真</li>
{% else %}
    <li>{{ data.bool }}值为假</li>
{% endif %}

(2) for 循环

实例

{% for i in data.xxxx %}
{# 错误的迭代方法TypeError: 'bool' object is not iterable #}
{#  {% for i in data.bool %}#}
    <li>{{ i }}</li>
{% else %}
    <li>当迭代的变量不存在时 则执行else</li>
{% endfor %}

注意：

break continue 不能够在这里使用

迭代字典

{% for k,v in data.items() %}
   <li>{{ k }}=>{{ v }}</li>
{% endfor %}

获取当前迭代的状态

变量 描述
loop.index 获取当前迭代的索引 从1开始
loop.index0 获取当前迭代的索引 从0开始
loop.first 是否为第一次迭代
loop.last 是否为最后一次迭代
loop.length 迭代的长度

六、注释

{# 多行注释 #}

七、文件包含 include

相当于把一个文件 拷贝到当前的你的包含的位置

实例

{% include 'common/header.html' %}
<div>我是中间的内容</div>
{% include 'common/footer.html' %}

注意：

1、包含的公共的文件中 只存放 公共的代码 除此以外什么都不要存在

2、导入的时候 如果文件和在同一级别 直接导入就可以 如果包含在某个目录中 需要写出路径

{% include 'common/header.html' %}
{% include 'test.html' %}

八、宏 macro

概念： 类似python中的函数

实例

在macro.html中

{% macro input(name,type='text',value='') %}
  <input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{% endmacro %}

宏的调用

{{ input('text','username','') }}
{{ input() }} 
{{ input(type='password',name='userpass') }}

宏的导入

(1) import

{% import 'test.html' as test %}
{% import 'common/test.html' as test %}
<p>用户名： {{ test.input(type='password',name='userpass') }}</p>

(2) form import

{% from 'test.html' import input %}
{% from 'common/test.html' import input %}
<p>用户名： {{ input(type='password',name='userpass') }}</p>

注意：

  1. 宏的调用只能在定义的下方去调用 否则未定义
  2. 宏如果存在形参 且没有默认值 则可以调用(没意义)
  3. 形参的默认值 需要遵循默认值规则 有默认值的参数 放右侧
  4. 可以正常使用 关键字参数

九、继承 extends

语法：

  1. {% extends %} 继承某个模板
  2. {% block %} 挖坑和填坑
  3. {{ super() }} 调用被替换掉的代码

base.html

<!DOCTYPE html>
<html lang="en">
<head>
{% block header %}
  <meta charset="UTF-8">
  {% block meta %}
  {% endblock %}
  <title>{% block title%}首页{% endblock %}</title>
  <style>
    {% block style %}
      p{color:red;}
    {% endblock %}
  </style>
  {% block link %}
  {% endblock %}
  {% block script %}
  {% endblock %}
{% endblock %}
</head>
<body>
<header>头部</header>
{% block con %}
  我是中间的内容部分
{% endblock %}
<footer>尾部</footer>
</body>
</html>

index.html继承 base.html

{% extends 'common/base.html' %}
{% block title %}
我的首页
{% endblock %}
{% block style %}
  {{ super() }}
  p{color:green;}
{% endblock %}
{% block con %}
<p>我是首页的内容</p>
  我是首页的内容
{% endblock %}

注意：

如果当替换某个样式的时候 所有原来的样式 都消失了 去查看是否使用了super()

十、flask-bootstrap

安装

pip install flask-bootstrap

sudo pip3 install flask-bootstrap

使用

继承 bootstrap/base.html 基础模板 改造成适用于自己网站的base.html基础模板

自己的base.html

{% extends 'bootstrap/base.html' %}
{% block navbar %}
  <nav class="navbar navbar-inverse" style="border-radius: 0px;">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页 <span class="sr-only">(current)</span></a></li>
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >发帖子</a></li>

        </ul>

        <ul class="nav navbar-nav navbar-right">
          <form class="navbar-form navbar-left">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注册</a></li>
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登录</a></li>
          <li class="dropdown">
            <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
              aria-expanded="false">个人中心 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >个人信息</a></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改头像</a></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改密码</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >退出登录</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
{% endblock %}
{% block content %}
  <div class="container">
    {% block pagecontent %}
      网页的中间内容部分写在当前的位置
    {% endblock %}
  </div>
{% endblock %}

使用 index.html

{% extends 'common/base.html' %}
{% block title %}
首页
{% endblock %}

十一、错误页面的定制

manage.py

@app.errorhandler(404)
def page_not_found(e):
  return render_template('common/error.html',error=e,code=404)

@app.errorhandler(500)
def server_error(e):
  return render_template('common/error.html',error=e,code=500)
error.html
{% extends 'common/base.html' %}
{% block title %}
  {{ code }}错误
{% endblock %}
{% block pagecontent %}
  <div class="alert alert-danger" role="alert">{{ error }}</div>
{% endblock %}

十二、视图传递多个参数

(1) 原始传参

@app.route('/')
def index():
  return render_template('index.html',arg1=1,arg2=2...)

(2) 使用字典

@app.route('/')
def index():
  return render_template('index.html',arg={arg1:1,arg2:2...})
  kwarg={arg1:1,arg2:2...}
  return render_template('index.html',``)

(3) 使用全局变量g

@app.route('/')
def index():
  g.name = '张三'
  g.age = 18
  return render_template('index.html')

模板中

<ol>
    <li>{{ g.name }}</li>
    <li>{{ g.age }}</li>
  </ol>

(4) 使用 **locals()

@app.route('/')
def index():
  name = '张三'
  age = 18
  print(locals())
  return render_template('index.html',**locals())

模板中

<li>{{ name }}</li>
<li>{{ age }}</li>

十三、url_for 构造绝对的链接地址

@app.route('/test/')
def test():
  print(url_for('index',_external=True))
  return 'test'

十四、加载静态资源

静态资源：图片，css，js，视频，音频，，

实例

<img src="{{ url_for('static',filename='img/17.jpg') }}" alt="">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

详解flask入门模板引擎

- Author -

rottengeek

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
Python解析xml中dom元素的方法
Mar 12 Python
Python中shape计算矩阵的方法示例
Apr 21 Python
scrapy爬虫完整实例
Jan 25 Python
pandas计算最大连续间隔的方法
Jul 04 Python
如何利用Python开发一个简单的猜数字游戏
Sep 22 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
Dec 23 Python
Python实现将元组中的元素作为参数传入函数的操作
Jun 05 Python
python字典key不能是可以是啥类型
Aug 04 Python
jupyter notebook 写代码自动补全的实现
Nov 02 Python
python 实现Requests发送带cookies的请求
Feb 08 Python
Python实现批量将文件复制到新的目录中再修改名称
Apr 12 Python
Python开发简易五子棋小游戏
May 02 Python
Sanic框架基于类的视图用法示例
Jul 18 #Python
flask入门之表单的实现
Jul 18 #Python
Flask入门之上传文件到服务器的方法示例
Jul 18 #Python
flask入门之文件上传与邮件发送示例
Jul 18 #Python
Sanic框架流式传输操作示例
Jul 18 #Python
django 发送邮件和缓存的实现代码
Jul 18 #Python
python实现linux下抓包并存库功能
Jul 18 #Python
奥地利购物网站(28) 哥伦比亚购物网站(5) 阿联酋购物网站(26) 土耳其购物网站(10) 葡萄牙购物网站(13) 欧洲购物网站(15) 泰国购物网站(30) 南非购物网站(8) 荷兰购物网站(99) 芬兰购物网站(10)
You might like
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
PHP7匿名类用法分析
2016/09/26 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
非jQuery实现照片散落桌子上，单击放大的LightBox效果
2014/11/28 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
简述vue中的config配置
2018/01/23 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
对python多线程与global变量详解
2018/11/09 Python
python实现归并排序算法
2018/11/22 Python
Numpy对数组的操作：创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
详解Python绘图Turtle库
2019/10/12 Python
Python类及获取对象属性方法解析
2020/06/15 Python
Made in Design英国：设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
美国知名眼镜网站：Target Optical
2020/04/04 全球购物
UNIX文件系统分类
2014/11/11 面试题
精彩的推荐信范文
2013/11/26 职场文书
大专生简历的自我评价
2013/11/26 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
公司承诺书范文
2014/05/19 职场文书
国际贸易实训报告
2014/11/05 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android