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

在Python的Flask框架中使用模版的入门教程

Posted in Python onApril 20, 2015

 概述

如果你已经阅读过上一个章节,那么你应该已经完成了充分的准备工作并且创建了一个很简单的具有如下文件结构的Web应用:
 
microblog
    |-flask文件夹
    |-<一些虚拟环境的文件>
    |-app文件夹
    |  |-static文件夹
    |  |-templates文件夹
    |  |-__init__.py文件
    |  |-views.py文件
    |-tmp文件夹
    |-run.py文件

亲,想要运行这个程序么?那就运行这个run.py文件,然后在你的浏览器里边打开http://localhost:5000这个地址.

我们在后面的章节会不断地从前一章节结束的地方继续开发我们的应用,所以你要确保你的环境已经正确安装,并且你的应用能够正常运行.
 

为什么我们需要使用模板系统

让我们来考虑一下,我们接下来怎么样扩展我们的小程序.

我们要在微博应用里边实现一个非常基本的功能,在首页上面显示一个欢迎已登录用户的标题.暂且忽略当前应用里边没有用户的状况,我将会在稍后解决这个问题.

要显示一个美观大方的标题,最简单的方法就是改变我们提供视图的方式来显示一些HTML代码,不如这样子:\
 

from app import app
 
@app.route('/')
@app.route('/index')
def index():
  user = { 'nickname': 'Miguel' } # fake user
  return '''
<html>
 <head>
  <title>Home Page</title>
 </head>
 <body>
  <h1>Hello, ''' + user['nickname'] + '''</h1>
 </body>
</html>

现在,在你的浏览器里面刷新一下看看,是不是很爽?
 

因为我们这个小程序还支持用户功能，所以咱用了一个用户占位对象，通常它被亲切的称呼为假数据或测试数据。它可以让我们关注程序中急需解决的部分。

爽完了，面对实际吧，我希望你会觉得上面这个混合着html代码的小程序相当恶心。想想看，如果你用一些动态内容生成的一个复杂的HTML页面，并且想要在由这样的程序组成的网站中改变一些页面内容，这将会一件非常蛋疼的事情。

模板系统拯救世界

如果保持业务逻辑和表现的分离，你的网站结构将会组织的更好。不要不信，如果你用python完成了业务代码，你甚至可以请一个网站设计师帮你完成剩下的部分。模板系统就是帮你实现业务和表现分离的。

让我们完成第一个模板(fileapp/templates/index.html):
 

<html>
 <head>
  <title>{{title}} - microblog</title>
 </head>
 <body>
   <h1>Hello, {{user.nickname}}!</h1>
 </body>
</html>

如你所见，我们只是写了一个普通的HTML页面，唯一跟HTML有区别的就是里面掺杂了一些以 {{ ... }} 组成的动态内容占位符。

现在让我们来看看视图函数中是如何处理这个模板的(fileapp/views.py):
 

from flask import render_template
from app import app
 
@app.route('/')
@app.route('/index')
def index():
  user = { 'nickname': 'Miguel' } # fake user
  return render_template("index.html",
    title = 'Home',
    user = user)

测试这段程序的重点就是看看模板系统是如何工作的。你可以比较浏览器中渲染后的html页面源码与模板文件源码之间的区别。

在上面的程序中，我们从 Flask 框架 import 了一个叫 render_template 的新函数，并用这个函数来渲染模板。并给这个函数赋予了模板文件名和一些变量作为参数。它将导入的变量替换掉模板中的变量占位符，并返回渲染后的模板。

让我们了解的更深入点。在 Flask 底层，render_template 函数实际上是调用了 Flask 的一个组件： Jinja2 模板处理引擎。是 Jinjia2 用导入的变量替换掉了模板中对应的 {{ ... }} 代码块。

模板中的流程控制

Jinja2 模板系统还支持流程控制语句，我们来尝试一下在模板中添加一个 if 流程控制语句 (fileapp/templates/index.html):
 

<html>
 <head>
  {% if title %}
  <title>{{title}} - microblog</title>
  {% else %}
  <title>Welcome to microblog</title>
  {% endif %}
 </head>
 <body>
   <h1>Hello, {{user.nickname}}!</h1>
 </body>
</html>

现在我们的模板文件有点智能了。如果我们在视图函数中忘了定义页面标题变量 title，它将会使用自已的标题替代。把视图函数中 render_template 里的 title 变量取消试试，看看这个 if 流程语句是如何工作的。

模板中使用循环

也许用户想在他的主页上展示好友最近写的文章，有点像人人，或者新浪微博那样的好友动态，接下来我们就要看看如何来完成这个功能。

首先，创建用户和文章 (fileapp/views.py):
 

def index():
  user = { 'nickname': 'Miguel' } # fake user
  posts = [ # fake array of posts
    {
      'author': { 'nickname': 'John' },
      'body': 'Beautiful day in Portland!'
    },
    {
      'author': { 'nickname': 'Susan' },
      'body': 'The Avengers movie was so cool!'
    }
  ]
  return render_template("index.html",
    title = 'Home',
    user = user,
    posts = posts)

用数组存储用户的文章，每一个数组元素都是一个字典，如上代码所示，这个dict的key是author和body，用来存储文章的作者和文章内容。当我们决定使用数据库来存储这些信息时，这个字典的key可以隐射为表的一个字段，这里为了给大家演示模板的使用，没有使用数据库相关的技术，简单地使用字典和数组模拟用户和他的好友最近发表的文章。
 

我们的模板文件现在有了一个新问题。我们刚刚创建了一个包含用户文章的内容数据，这个数组可能包含任意数量的文章。怎样才能让模板根据这个数组的数量自动渲染内容。

要解决这个问题，就需要一个新的流程控制语句：for循环。让我们来把 for循环添加到模板文件 (fileapp/templates/index.html)
 

<html>
 <head>
  {% if title %}
  <title>{{title}} - microblog</title>
  {% else %}
  <title>microblog</title>
  {% endif %}
 </head>
 <body>
  <h1>Hi, {{user.nickname}}!</h1>
  {% for post in posts %}
  <p>{{post.author.nickname}} says: <b>{{post.body}}</b></p>
  {% endfor %}
 </body>
</html>

很简单吧，你还可以在数组中添加更多的内容看看效果。
 
模板继承

接来下，我们需要给这个微博(microblog)添加一个导航菜单，里面包含 修改个人资料，退出登录 等类似的链接。

直接在 index.html 模板文件中直接加入这个导航条也是可行的，但是当我们有很多模板文件都包含这个导航条时，就会陷入为了修改导航条的某个地方而不得不在多个文件中往返编辑的尴尬境地。当包含这个导航条的文件越来越多时，你想死的心就会有了。

我们可以使用 Jinja2 的模板继承功能，它可以使我们把模板中一些公共的内容组合在一起创建一个基础模板，然后让其它模板继承这个基础模板。

我们先来定义一个基础模板，里面包含了导航条和那个最开始写的关于页面标题(title)的流程控制语句。(fileapp/templates/base.html):
 

<html>
 <head>
  {% if title %}
  <title>{{title}} - microblog</title>
  {% else %}
  <title>microblog</title>
  {% endif %}
 </head>
 <body>
  <div>Microblog: <a href="/index">Home</a></div>
  <hr>
  {% block content %}{% endblock %}
 </body>
</html>

在这个模板中，我们使用了 block 控制语句来定义继承模板内容的显示位置。注意：这个 block 语句中设置的名称必须唯一。

接下来让我们修改一下 index.html 模板，让它继承于刚刚添加的基础模板 base.html (fileapp/templates/index.html):

 

{% extends "base.html" %}
{% block content %}
<h1>Hi, {{user.nickname}}!</h1>
{% for post in posts %}
<div><p>{{post.author.nickname}} says: <b>{{post.body}}</b></p></div>
{% endfor %}
{% endblock %}

基础模板 base.html 帮我们搞定了页面结构和公共内容，所以这个 index.html 模板就成了这幅衰样了。extends 语句使两个模板关联了起来。Jinja2 在渲染 index.html 模板时，发现 extends 语句，就会自动先引入 base.html 基础模板，并对两个模板中名为 content 的 block 语句进行匹配。Jinja2知道如何把两个模板合并到一起。我们以后创建新的模板时，同样也会使用这种从基础模板继承的方法。

结束语

如果你想节省时间，懒得敲代码，可以从以下地址下载本章内容的示例代码：

下载地址：microblog-0.2.zip

在Python的Flask框架中使用模版的入门教程

- Author -

goldensun

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

Python 相关文章推荐
Python实现的数据结构与算法之快速排序详解
Apr 22 Python
python实现逆波兰计算表达式实例详解
May 06 Python
python从入门到精通（DAY 3）
Dec 20 Python
python+matplotlib绘制简单的海豚（顶点和节点的操作）
Jan 02 Python
Python使用jsonpath-rw模块处理Json对象操作示例
Jul 31 Python
Python namedtuple命名元组实现过程解析
Jan 08 Python
python MultipartEncoder传输zip文件实例
Apr 07 Python
python 给图像添加透明度(alpha通道)
Apr 09 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
May 26 Python
浅谈python 调用open()打开文件时路径出错的原因
Jun 05 Python
python识别验证码的思路及解决方案
Sep 13 Python
Python下使用Trackbar实现绘图板
Oct 27 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
Apr 20 #Python
利用Python的Django框架中的ORM建立查询API
Apr 20 #Python
对于Python的框架中一些会话程序的管理
Apr 20 #Python
介绍Python的Django框架中的QuerySets
Apr 20 #Python
使用Python的Django框架实现事务交易管理的教程
Apr 20 #Python
简化Python的Django框架代码的一些示例
Apr 20 #Python
在Python的Django框架上部署ORM库的教程
Apr 20 #Python
Tsmoothie(1) Spring Bean(1) filter(1) Spring JPA(1) EditText(1) Django(9) Selenium(1) openEuler(1) TextInputLayout(1) reduce(2)
You might like
php中对2个数组相加的函数
2011/06/24 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
js仿京东放大镜效果
2020/08/09 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
零基础写python爬虫之urllib2中的两个重要概念：Openers和Handlers
2014/11/05 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
Python实现最大子序和的方法示例
2019/07/05 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
美国棒球装备和用品商店：Baseball Savings
2018/06/09 全球购物
联想德国官网：Lenovo Germany
2018/07/04 全球购物
GWT都有什么特性
2016/12/02 面试题
创业计划书的内容步骤和要领
2014/01/04 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
本科毕业生自荐信
2014/05/26 职场文书
酒店开业策划方案
2014/06/02 职场文书
发布会邀请函
2015/01/31 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers