首页
所有分类
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进行mp3格式判断
Dec 23 Python
K-近邻算法的python实现代码分享
Dec 09 Python
Python中矩阵创建和矩阵运算方法
Aug 04 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
Oct 16 Python
Python之lambda匿名函数及map和filter的用法
Mar 05 Python
Python面向对象程序设计之私有属性及私有方法示例
Apr 08 Python
django数据库自动重连的方法实例
Jul 21 Python
Python实现时间序列可视化的方法
Aug 06 Python
使用Python脚本zabbix自定义key监控oracle连接状态
Aug 28 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
Apr 24 Python
python使用openpyxl库读写Excel表格的方法（增删改查操作）
May 02 Python
pytorch中Schedule与warmup_steps的用法说明
May 24 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
异步回调(1) 底部导航(1) JAVA(88) Android(19) 池化技术(1) CompletableFuture(1) FutureTask(3) ForkJoin(1) Springboot-cli(1) 主题(1)
You might like
php文件操作之小型留言本实例
2015/06/20 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
百度地图给map添加右键菜单（判断是否为marker）
2016/03/04 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
深入理解Python装饰器
2016/07/27 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
欧洲品牌瓷器餐具网上商店：Porzellantreff.de
2018/04/04 全球购物
美国最大的半成品净菜电商：Blue Apron（蓝围裙）
2018/04/27 全球购物
董事长秘书岗位职责
2013/11/29 职场文书
初一家长会邀请函
2014/01/31 职场文书
上课玩手机检讨书
2014/02/08 职场文书
城管综合整治方案
2014/05/01 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
教师节横幅标语
2014/10/08 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
Go语言应该什么情况使用指针
2021/07/25 Golang
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers