flask学习02模板引擎

最新推荐文章于 2021-06-26 16:22:17 发布

Nolannk

最新推荐文章于 2021-06-26 16:22:17 发布

阅读量257

点赞数

分类专栏： flask

本文链接：https://blog.csdn.net/joe_niu/article/details/78975383

版权

flask 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

指定app做初始化的对象

模板引擎

说明：

模板文件就是按照特定规则书写的一个负责展示效果的HTML文件；模板引擎就是提供特定规则的解释和替换的工具。
Jinja2:

在Flask中使用的就是该模板引擎，它是有flask核心开发组人员开发的。

Jinja2使用

准备工作，目录结构

 
   
   
    
    
    
    
     
     
      
      
       
       
        
         
          
          
          
          
           
            
           project/ 
           
              manage.py           # 项目启动控制文件 
              templates/          # 所有的模板文件

渲染模板文件

在templates下创建一个模板文件(hello.html)，内容如下：

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            <h1>Hello Flask !</h1>

模板渲染

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            @app.route('/') 
            
           def index(): 
               # 渲染模板文件 
               # return render_template('hello.html') 
               # 渲染模板字符串 
               return render_template_string('<h1>渲染字符串</h1>')

使用变量

在templates下创建一个模板文件var.html，内容如下：

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            {# 这里是注释，渲染的变量放在两个大括号中 #} 
            
           <h1>Hello {{ name }}</h1> 
           <h1>Hello {{ g.name }}</h1>

模板渲染

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            @app.route('/var/') 
            
           def var(): 
               # g对象，在模板中使用不需要分配 
               g.name = 'g的name属性' 
               return render_template('var.html', name='xiaoming') 
               # 渲染模板字符串 
               return render_template_string('<h1>Hello {{ name }}</h1>',  
                                             name='xxx')

使用函数

在模板文件中可以使用特定的函数，对指定的变量处理后再显示，用法如下：

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            <h1>Hello {{ name | upper }}</h1>

使用'|'将变量与函数分开，左边是变量名，右边是函数名

常用函数

函数	功能
upper	全部大写
lower	全部小写
title	每个单词首字母大写
capitalize	首字母大写
trim	去掉两边的空白
striptags	过滤HTML标签
safe	渲染时不转义，默认转义

不要滥用safe，否则可能不安全，只能用在自己信任的变量上。

流程控制

分之语句(if-else)

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            {% if name %} 
            
               <h1>Hello {{ name }} !</h1> 
           {% else %} 
               <h1>Hello world !</h1> 
           {% endif %}

循环结构(for-in)

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            <ol> 
            
               {% for i in range(1, 6) %} 
               <li>{{ i }}</li> 
               {% endfor %} 
           </ol>

文件包含

include1.html内容

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
           
           
           
            
             
            <h1>include1.html中的内容</h1> 
            
            
           {# 包含另一个文件，意思就是将被包含的文件内容粘贴到此处 #} 
           {% include 'include2.html' %}

include2.html内容

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            <div>include2.html中的内容</div>

宏的使用，类似于函数

宏的定义

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            {# 定义宏 #} 
            
           {% macro show_name(name) %} 
               <h1>Hello {{ name }}</h1> 
           {% endmacro %}

宏的调用

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            {# 调用宏 #} 
            
           {{ show_name(name) }}

宏的导入

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            {# 导入宏 #} 
            
           {% from 'macro1.html' import show_name %} 
            
           {# 调用宏 #} 
           {{ show_name(name) }}

说明：

采用类似于python中的函数的形式进行定义和调用，通常我们可以把特定功能的内容显示定义成一个宏，哪里使用哪里调用即可，避免了相同效果的重复书写。

模板继承

基模板parents.html，内容如下：

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            <html> 
            
           <head> 
               <title>{% block title %}默认标题{% endblock %}</title> 
           </head> 
           <body> 
               {% block body %}默认内容{% endblock %} 
           </body> 
           </html>

子模板children.html，内容如下：

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            {# 继承自指定模板文件 #} 
            
           {% extends 'parents.html' %} 
            
           {# 可以对基础模板中的block进行删除，重写 #} 
           {% block title %}欢迎登录{% endblock %} 
            
           {# 重写基础模板中的block #} 
           {% block body %} 
               {# 保留基础模板中的内容 #} 
               {{ super() }} 
               <div>欢迎您的到来...</div> 
           {% endblock %}

当重写了一个block，原来的显示内容就没了，八成的原因是没有调用super.

flask-bootsrap

安装：

 
   
   
    
    
    
    
     
     
      
      
       
       
        
         
          
           
          
          
          
          
           
            
           pip install flask-bootstrap

使用：

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            # 导入类库 
            
           from flask_bootstrap import Bootstrap 
           # 创建对象 
           bootstrap = Bootstrap(app)

测试模板文件boot.html，内容如下：

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            {# 继承自bootstrap的基础模板 #} 
            
           {% extends 'bootstrap/base.html' %} 
            
           {% block title %}用户注册{% endblock %} 
            
           {% block content %} 
               <div class="container">欢迎注册</div> 
           {% endblock %}

bootstrap继承模板base.html中定义的block

block	说明
doc	整个HTML文档
html	html标签
head	head标签
title	title标签
styles	引入css
metas	一组meta标签
body	body标签
navbar	用户自定义导航条
content	用户自定义内容
	用户定义的JS

使用bootstrap时，发现重写block后原来的显示效果消失，可能是忘了调用super

定义项目基础模板

说明：

一个项目中，很多页面都很相似，只有细微的差别，如果每个都定制势必会有大量的重复代码的书写。为了简化这种重复工作，我们通常为项目定制一个基础模板(base)，让它继承自bootstrap的基础模板，其它页面继承该基础模板，只需稍微定制即可。

步骤

 
   
   
    
    
    
    
     
     
      
      
       
       
        
         
          
           
          
          
          
          
           
            
           1.从bootcss.com复制一个顺眼的导航条 
           
          2.将container-fluid改为container 
          3.显示反色导航条：navbar-inverse 
          4.将圆角改为直角：style="border-radius: 0px;" 
          5.根据需要定制显示内容 
          6.修改折叠目标的定位：data-target=".navbar-collapse"

基础模板文件base.html，内容如下：

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            {% extends 'bootstrap/base.html' %} 
            
            
           {# 定制标题 #} 
           {% block title %}默认标题{% endblock %} 
            
           {# 定制导航条 #} 
           {% block navbar %} 
               <nav class="navbar navbar-inverse" style="border-radius: 0px;"> 
                   <div class="container"> 
                       <!-- 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=".navbar-collapse" 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="#">首页</a> 
                       </div> 
            
                       <!-- Collect the nav links, forms, and other content for toggling --> 
                       <div class="collapse navbar-collapse"> 
                           <ul class="nav navbar-nav"> 
                               <li><a href="#">板块一</a></li> 
                               <li><a href="#">板块二</a></li> 
                           </ul> 
            
                           <ul class="nav navbar-nav navbar-right"> 
                               <li><a href="#">注册</a></li> 
                               <li><a href="#">登录</a></li> 
                           </ul> 
                       </div><!-- /.navbar-collapse --> 
                   </div><!-- /.container --> 
               </nav> 
           {% endblock %} 
            
           {# 定制内容 #} 
           {% block content %} 
               <div class="container"> 
                   {# 这里可以为弹出内容显示预留位置 #} 
                   {% block page_content %}默认内容{% endblock %} 
               </div> 
           {% endblock %}

错误页面定制

添加视图函数：

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            # 错误定制 
            
           @app.errorhandler(404) 
           def page_not_found(e): 
               return render_template('404.html')

定制404.html，内容如下：

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            {% extends 'base.html' %} 
            
            
           {% block title %}出错了{% endblock %} 
            
           {% block page_content %}<h1>臣妾实在找不到啊@_@</h1>{% endblock %}

练习：再定义其它的错误显示页面，如：500等

回顾url_for函数

根据视图函数名反向构造路由地址，路由需要的直接构造，多出来的参数以GET传递

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            url_for('var', name='xiaoming', pwd='123456')

/var/?name=xiaoming&pwd=123456，不完整，没有主机和端口

若需要构造完整的外部链接，需要添加_extenal=True的参数

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            url_for('var', name='xiaoming', pwd='123456', _external=True)

http://127.0.0.1:5000/var/?name=xiaoming&pwd=123456

通常网站中的点击链接都是使用url_for构造的，如：

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            <li><a href="{{ url_for('register') }}">注册</a></li>

加载静态资源

flask框架中静态资源的默认目录为static，项目目录结构如下：

 
   
   
    
    
    
    
     
     
      
      
       
       
        
         
          
           
          
          
          
          
           
            
           project/ 
           
              manage.py           # 启动控制文件 
              static/             # 静态资源 
              templates/          # 模板文件

加载收藏夹的图标

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            {# 加载收藏夹的图标 #} 
            
           {% block head %} 
               {{ super() }} 
               <link rel="icon" type="image/x-icon" href="{{ url_for('static',  
                                                          filename='favicon.ico') }}" /> 
           {% endblock %}

加载图片资源

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

加载CSS

 
   
   
    
    
    
    
     
     
      
      
       
       
        
         
          
           
          
          
          
          
           
            
           {# 加载CSS #} 
           
          {% block styles %} 
              {{ super() }} 
              <link rel="stylesheet" type="text/css" href="{{ url_for('static',  
                  filename='common.css') }}" /> 
          {% endblock %}

加载JS

 
   
   
    
    
     
     
     
     
      
      
       
       
        
         
          
           
            
           
           
           
           
            
             
            {# 加载JS #} 
            
           {% block scripts %} 
               {{ super() }} 
               <script type="text/javascript" src="{{ url_for('static', filename='common.js') }}"></script> 
           {% endblock %}