文档章节

Flask开发轻博客(二):Flask 模板

AllenOR灵感
 AllenOR灵感
发布于 2017/09/10 01:25
字数 2102
阅读 2
收藏 0
点赞 0
评论 0

目录

Flask开发轻博客(一):欢迎来到 Flask 的世界

Flask开发轻博客(二):Flask 模板

Flask开发轻博客(三):Flask 的 Web 表单

Flask开发轻博客(四):数据库

Flask开发轻博客(五):用户登录

Flask开发轻博客(六):用户首页和发布博客

Flask开发轻博客(七):分页


上节回顾

如果你依照上一章的话,你应当有一个完全工作的简单的 web 应用程序,我们项目的文件结构如下(前提是使用sudo apt-get install tree 命令安装 tree,然后输入 tree micblog 就可以得到类似于以下结构的文件树):


文件树

进入 micblog 文件夹,执行 python run.py 来运行应用程序,接着在你的网页浏览器上打开 http://127.0.0.1:9999 网址就可以看到效果(确保虚拟环境 flask 是激活的)。

在 Python 中生成 HTML 并不好玩,实际上是相当繁琐的,因为你必须自行做好 HTML 转义以保持应用程序的安全。由于这个原因,Flask 自动为你配置好Jinja2 模版。我们将会在这一章中介绍一些模板基本概念以及基本用法。

我们接下来讲述的正是我们上一章离开的地方,所以你可能要确保应用程序 micblog 正确地安装和工作。

一、为什么我们需要模板

让我们来考虑下我们该如何扩充我们这个小的应用程序。

我们希望我们的微博应用程序的主页上有一个欢迎登录用户的标题,这是这种类型的应用程序的一个“标配”。忽略本应用程序暂未有用户的事实,我会在后面的章节引入用户的概念。

输出一个漂亮的大标题的一个容易的选择就是使得我们的视图 micblog/app/views.py 文件中的函数 index() 返回HTML,也许可以这样编写代码:

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from app import app

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

现在看看网页浏览器上的显示情况。


网页效果

我们暂时还不支持用户,所以暂时使用占位符的用户对象,有时也被称为假冒或模仿的对象。这样让我们可以集中关注应用程序的某一方面,而不用花心思在暂未完成的部分上。

我希望你同意我的说法,上面的解决方案是非常难看!如果我们需要返回一个含有大量动态内容的大型以及复杂的 HTML 页面的话,代码将会有多么复杂啊!如果你需要改变你的网站布局,在一个大的应用程序,该应用程序有几十个视图,每一个直接返回HTML?这显然不是一个可扩展的选择。

二、模板从天而降

如果你能够保持你的应用程序与网页的布局或者界面逻辑上是分开的,这样显得更加容易组织!你甚至可以聘请一个网页设计师来设计一个杀手级的网页而你专注于 Python 编码。模板可以帮助实现这种分离。

让我们编写第一个我们的模板(文件 app/templates/index.html):

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

正如你在上面看到,我们只是写了一个部分标准的HTML页面,唯一的区别是有一些动态内容的在 {{ ... }} 中。

现在看看怎样在我们的视图函数(文件 app/views.py)中使用这些模板:

    #-*- coding:utf-8 -*-

    from flask import render_template
    from app import app

    @app.route('/')
    @app.route('/index')
    def index():
        user = { 'nickname': 'Miguel' } # 用户名
        return render_template("index.html",
                               title = 'Home',
                               user = user)

试着运行下应用程序看看模板是如何工作的。一旦在你的网页浏览器上呈现该网页,你可以浏览下 HTML 源代码,与原始的模板内容对比下差别。


网页效果图

为了渲染模板,我们必须从 Flask 框架中导入一个名为 render_template 的新函数。此函数需要传入模板名以及一些模板变量列表,返回一个所有变量被替换的渲染的模板。

在内部,render_template 调用了 Jinja2 模板引擎,Jinja2 模板引擎是 Flask 框架的一部分。Jinja2 会把模板参数提供的相应的值替换了 {{...}} 块。

1. 模板中控制语句

Jinja2 模板同样支持控制语句,像在 {%...%} 块中。让我们在我们的模板中添加一个 if 声明(文件 app/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>

现在我们的模板变得更加智能了。如果视图函数忘记输入页面标题的参数,不会触发异常反而会出现我们自己提供的标题。放心地去掉视图函数中 render_template 的调用中的 title 参数,看看 if 语句是如何工作的!

2. 模板中的循环语句

在我们 microblog 应用程序中,登录的用户想要在首页展示他的或者她的联系人列表中用户最近的文章,因此让我们看看如何才能做到。

首先我们先创建一些用户以及他们的文章用来展示(文件 app/views.py):

    def index():
        user = { 'nickname': 'Miguel' } # 用户名
        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)

为了表示用户的文章,我们使用了列表,其中每一个元素包含 authorbody 字段。当我们使用真正的数据库的时候,我们会保留这些字段的名称,因此我们在设计以及测试模板的时候尽管使用的是假冒的对象,但不必担心迁移到数据库上更新模板。

在模板这一方面,我们必须解决一个新问题。列表中可能有许多元素,多少篇文章被展示将取决于视图函数。模板不会假设有多少文章,因此它必须准备渲染视图传送的文章数量。

因此让我们来看看怎么使用 for 来做到这一点(文件 app/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>

简单吧?试试吧,确保给予足够的文章列表。关于前台的一些html
学习,推荐在线学习网站W3School

3. 模板继承

在这一章结束前我们将讨论最后一个话题。

在我们的 microblog 应用程序中,在页面的顶部需要一个导航栏。在导航栏里面有编辑账号,登出等等的链接。

我们可以在 index.html 模板中添加一个导航栏,但是随着应用的扩展,越来越多的模板需要这个导航栏,我们需要在每一个模板中复制这个导航栏。然而你必须要保证每一个导航栏都要同步,如果你有大量的模板,这需要花费很大的力气。

相反,我们可以利用 Jinja2 的模板继承的特点,这允许我们把所有模板公共的部分移除出页面的布局,接着把它们放在一个基础模板中,所有使用它的模板可以导入该基础模板。

所以让我们定义一个基础模板,该模板包含导航栏以及上面谈论的标题(文件 app/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 控制语句来定义派生模板可以插入的地方。块被赋予唯一的名字。

接着现在剩下的就是修改我们的 index.html 模板继承自 base.html (文件 app/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 %}

4. 最终效果图

如果以上程序运行正确,那么你讲得到如下的实验效果图。


实验运行图

本文转载自:http://www.jianshu.com/p/be1ff193af34

共有 人打赏支持
AllenOR灵感
粉丝 10
博文 2634
码字总数 82983
作品 0
程序员
雪峰磁针石博客]flask构建自动化测试平台3-模板

3-模板 理想情况下,前端和后端组件之间的完全隔离。我们可以在很大程度上使用Jinja来实现这一目标。 到本章将扩展我们的应用程序,为所选出版物显示不止一个标题。我们将为每个出版物显示多...

Python测试开发人工智能
07/07
0
0
Python进阶(五十)-解析Flask运行原理

Python进阶(五十)-解析Flask运行原理   在学习Python Web开发过程中,掌握了Flask的开发方法。经过一段时间的视频学习,回过头来对Flask的运行原理做一简要解析,以增强自己对Flask的了解。...

sunhuaqiang1
2017/05/30
0
0
社区模板的 python 后端实现 - PyFly

项目介绍 PyFly 是 Flask + Layui Fly Template实现的一个社区项目,使用flask-admin实现了简单的后台管理功能,数据库使用Mongodb,前台实现功能:用户注册、登录、邮件激活、发帖、回帖、...

981764793
04/28
0
0
Flask從入門到入土(三)——模板

  模板是一個包含響應文本的文件,其中包含佔位變量表示的動態部分,其具體值只是請求上下文中才能知道。使用真實值替換變量,再返回最終得到的響應字符串,這一過程稱爲渲染。爲了渲染模板...

奶berber
01/21
0
0
981764793/PyFly

PyFly 项目介绍 Flask + Layui Fly Template实现的一个社区项目,使用flask-admin实现了简单的后台管理功能,数据库使用Mongodb,前台实现功能:用户注册、登录、邮件激活、发帖、回帖、点赞...

981764793
04/28
0
0
看完这篇文章还能不懂Flask这种Web框架吗?

Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对请求进行预处理,然后触发Flask框架,开发人员基...

lemonwater
05/14
0
0
[雪峰磁针石博客]flask构建自动化测试平台1-hello

简介 第一部分 Flask实例。学习使用Flask开发,构建功能完备的Web应用程序。我们开发了动态的头条新闻应用程序,可显示最新的新闻标题以及最新的货币和天气信息。在项目二中,我们构建了由M...

Python测试开发人工智能
06/09
0
0
《Flask Web开发:基于Python的Web应用开发实战》.PDF

简介 本书不仅适合初级Web开发人员学习阅读,更是Python程序员用来学习高级Web开发技术的优秀参考书。 • 学习Flask应用的基本结构,编写示例应用; • 使用必备的组件,包括模板、数据库、W...

jackmk
2017/08/12
0
0
今晚九点|Flask 基础与 Web 开发实战

废话不多说,我们直接来介绍这次公开课的内容。 主要内容: 一、Web 开发基础 二、在 Flask 中的 “Hello World” 三、Flask 的模版 四、Flask 的消息提示与异常处理 一、Web 开发基础 本章节...

xjtuhit
2017/11/09
0
0
从零开始搭建论坛(三):Flask框架简单介绍

前面两篇文章中我们已经了解 Web(HTTP)服务器,Web应用程序,Web框架,WSGI这些 Python Web 开发中的概念。我们知道,Web框架通过将不同Web应用程序中的共性部分给抽象出来,提供一系列通用的...

selfboot
2016/10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
33分钟前
0
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0
《Linux Perf Master》Edition 0.4 发布

在线阅读:https://riboseyim.gitbook.io/perf 在线阅读:https://www.gitbook.com/book/riboseyim/linux-perf-master/details 百度网盘【pdf、mobi、ePub】:https://pan.baidu.com/s/1C20T......

RiboseYim
昨天
1
0
conda 换源

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......

阿豪boy
昨天
1
0
Confluence 6 安装补丁类文件

Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...

honeymose
昨天
0
0
非常实用的IDEA插件之总结

1、Alibaba Java Coding Guidelines 经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的《阿里巴巴Java开发规约》扫描插件!该插件由阿里巴巴P3C项目组研发。P3C...

Gibbons
昨天
1
0
Tomcat介绍,安装jdk,安装tomcat,配置Tomcat监听80端口

Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 java程序写的网站用tomcat+jdk来运行...

TaoXu
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部