详解flask入门模板引擎

程序员文章站 2022-05-14 16:02:16

模板引擎说明：模板文件就是按照一定的规则书写的展示效果的HTML文件模板引擎就是负责按照指定规则进行替换的工具模板引擎选择jinja2 一、渲染模板的方法...

模板引擎

说明：模板文件就是按照一定的规则书写的展示效果的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、变量

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

2、标签

{% 标签名 %}

注意：

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

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

三、过滤器

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

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标签

四、标签

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

(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>

注意：

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

九、继承 extends

语法：

{% extends %} 继承某个模板
{% block %} 挖坑和填坑
{{ 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="">

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

上一篇： Sanic框架流式传输操作示例

下一篇：洪斌 - MySQL性能诊断与实践

详解flask入门模板引擎

smarty模板引擎基础知识入门

基于模板引擎Jade的应用(详解)

Python Flask入门之模板

详解在express站点中使用ejs模板引擎

node前端开发模板引擎Jade的入门

详解nodejs模板引擎制作

详解Node.js模板引擎Jade入门

nodejs前端模板引擎swig入门详解

Spring Boot thymeleaf模板引擎的使用详解

ThinkPHP模板引擎之导入资源文件方法详解