正文

Flask 模板系统

IP云
IP云V管理员/4 阅读
12/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

模板

基本数据类型

可以执行python语法，如：dict.get(), list['xx']

比django 更加亲近于 python

传入函数
  • - django ，自动执行
  • - flask ，不自动执行，需要自己加 " () " 了

简单的示例 
def func1(arg):

    return "hello" + arg

@app.route("/index")

def index():

    return render_template("s5index.html",f=func1)  # 传入函数
<body>

    <!-- 传入函数 -->

    <!-- |safe 防xss攻击 -->

    <h1>{{f('羊驼')|safe}}</h1> 

</body>

定义变量

模板中的变量是一种 " 占位符 ", 告诉模板该位置是从渲染模板时哪个数据中获取过来的

视图函数传变量 

return render_template('xxx.html', 变量1=值, 变量2=值....)

return render_template('xxx.html', params=local())

示例

各类型数据后端传入

前端展示结果

嫌麻烦可以使用 locals ,全部封装在字典里面方便些

前端也需要更改

过滤器

作用

变量输出之前对变量值进行过滤

语法

可以多个过滤器追加使用 

{{变量|过滤器()}}
{{变量|过滤器()|过滤器()}}

常用过滤器

trim 

{{var|trim}}

取消字符串两端的空格

default 

{{var|default('default value')}}

如果变量为 undefined 采用默认值作为输出

truncate 

{{var|truncate(length)}}

如果字符串超过指定长度,  截取,  后面显示 "..."

其他见官网,点击这里

标签

每个标签表示不同的服务器端功能

语法 

{% 标签内容 %}

{% 结束标签 %}

常用标签

if 判定标签 

{% if 条件 %}
　　满足条件时运行内容
　　可以是 html 代码也可以是 服务器端内容

{% endif %}
{% if 条件 %}

    满足执行内容

{% else %}

    不满足执行内容

{% endif %}
{% if 条件1 %}

　　

{% elif 条件2 %}

　　

{% else %}

　　

{% endif %}

for 循环标签 

{% for 变量 in 可迭代元素 %}

变量属于服务端的内容, 使用时需要使用 {{}}  或者 {%%} 括起来

{% endfor %}

内置变量 - loop

无需声明. 直接使用即可, 表示本次循环的一些相关信息

常用属性

  • loop.index　　表示当前循环次数 , 从 1 开始
  • loop.index0　　表示当前循环的下标, 从 0 开始
  • loop.first　　　表示当前循环是否是第一次循环  返回布尔值
  • loop.last　　　表示当前循环是最后一次循环 返回布尔值

macro 宏标签

相当于声明函数

通常用于代码复用,声明后在被使用的地方直接通过函数在调用即可 

{% macro 声明函数(参数) %}

{% endmacro %}
{{ 声明函数(参数) }}

当前文件直接使用实例

外部引用方式用例

通常都是将相同的部分保存在独立文件中, 然后引入文件后在要被用到的地方进行调用

声明  macro.html 模板文件

声明所用的宏

在要被使用的模板中导入, 然后通过别名即可调用宏定义的方法 

    {% import 'macro.html' as macros %}

    {{ macros.showList() }}

模板继承

Flask使用的时Jinja2模板，所以其语法和Django无差别

类似类继承, 同样简化模板的开发

语法

父模板中

父模板中 block 正常显示无任何影响

子模板中可以对 block 进行重写 

{% block 块名 %}

定义一些正常显示内容

{% endblock %}

子模板中

需要指定所继承的父模板 

{% extends '父模板文件' %}

指定 block 的重写 

{% block 块名 %}

重写内容

{% endblock %}

实例

base.html 

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<title>Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<h1>模板</h1>

{% block content %}

{% endblock %}

</body>

</html>

abc.html 

{% extends "base.html"%}

{% block content %}

{{users.0}}

{% endblock %}

include

用法同django 

{% include "form.html" %}

form.html

    <form>

        asdfasdf

    </form>

安全 
- 前端： 
　　{{u|safe}}


- 后端：
　　Markup("<input type='text' value=%s />"%(arg,))

    

    

     静态文件
    

   
   

    静态文件处理
   

   

    在项目目录中创建一个 static 文件夹
   

   

    
   

   

    该目录中允许分门别类存储静态文件
   

   

    所有文件都必须通过 /static/ 来进行访问
   

   

    
    <img src="/static/62001505_p0_master1200.jpg" alt="">

   

  
相关阅读
目录[+]