详解flask入门模板引擎

模板引擎

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

模板引擎选择jinja2

一、渲染模板的方法

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

render_template()

2、渲染字符串返回

render_templates_string()

实例

@app.route('/')
def index():
  #将模板内容响应给用户
  return render_template('index.html')
  #渲染一内容响应给用户
  return render_template_string('
原谅色
')

二、模板的语法

模板中只存在俩种语法

1、变量

{{ var }}

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

2、标签

{% 标签名 %}

注意：

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

{{data.key}}

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

三、过滤器

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

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

2、default 设置默认值

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

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

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

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

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

5、format： 字符的格式化

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

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

7、join: 拼接成字符串

{{ [1,2,3,4]|join('') }}
{{ [1,2,3,4]|join('x') }}

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

9、lower 转为小写

10、upper 转为大写

11、replace 替换

{{ data.string|replace('a','x') }}

12、striptages 去除HTML标签

{{ data.html|striptags }}

四、标签

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

(1) if

实例

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

(2) for 循环

实例

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

注意：

break continue 不能够在这里使用

迭代字典

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

获取当前迭代的状态

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

六、注释

{# 多行注释 #}

七、文件包含 include

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

实例

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

注意：

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

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

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

八、宏 macro

概念： 类似python中的函数

实例

在macro.html中

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

宏的调用

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

宏的导入

(1) import

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

(2) form import

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

注意：

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

九、继承 extends

语法：

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

base.html

{% block header %}
  
  {% block meta %}
  {% endblock %}
  
  
  {% block link %}
  {% endblock %}
  {% block script %}
  {% endblock %}
{% endblock %}


头部
{% block con %}
  我是中间的内容部分
{% endblock %}
尾部

index.html继承 base.html

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

    

      
      

        
          Toggle navigation
          
          
          
        
        
      

      
      

        

          
首页 (current)
          
发帖子

        

        

          

          

            
          
          Submit
        
          
注册
          
登录
          

            个人中心 
            

              
个人信息
              
修改头像
              
修改密码
              

              
Separated link
              

              
退出登录
            
          
        
      

    

  
{% endblock %}
{% block content %}
  

    {% block pagecontent %}
      网页的中间内容部分写在当前的位置
    {% endblock %}
  
{% 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 %}
  
{{ error }}
{% 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')

模板中

  

    
{{ g.name }}
    
{{ g.age }}
  

(4) 使用 **locals()

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

模板中

{{ name }}
{{ age }}

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

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

十四、加载静态资源

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

实例

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