Flask教程(二)、templates模版速速入门

童鞋们,如果你做了上面一章的内容。侬现在的文件结构应该是下面着个样子的you see:

    flaskstudy\
      app        static        templates        __init__.py
        views.py
      tmp      run.py

上节咱也测试过了,都是work的。

这节的内容是模版,为啥要模版呢?

答案是必须的!业务分离,这样前端搞前端,后台搞后台,全部把页面写在代码里面像什么回事儿啊。

来瞧瞧下面的一个例子:

from app import app

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

啷哩个浪,一大堆,这个还算是少的了,要是几千行的UI规模,程序员估计要直接喷血。没有模版是不可想象的,估计也没啥人用python开发网站了。

关键时刻,templates来救火。重写上面的为如下形式:

新建模版文件:app/templates/index.html

内容如下:

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

和上面有些区别的是,用了两对括号{{}}来存放数据内容,本质应该是一种替换。

当然,views也要做相应的修改的,变化如下:

from flask import render_template
from app import app

@app.route(‘/‘)
@app.route(‘/index‘)
def index():
    user = {‘nickname‘: ‘大爷‘}  # fake user
    return render_template(‘index.html‘,
                           title=‘Home‘,
                           user=user)

同时为了渲染模版,咱们也得引入一个Flask的新模块,render_template.用来替换参数。

render_template会召唤神龙 Jinja2 模版渲染引擎来替换{{}}

Jinja2官网: http://jinja.pocoo.org/

Jinja2是Python下一个被广泛应用的模版引擎,他的设计思想来源于Django的模板引擎,并扩展了其语法和一系列强大的功能。其中最显著的一个是增加了沙箱执行功能和可选的自动转义功能,这对大多应用的安全性来说是非常重要的。

他基于unicode并能在python2.4之后的版本运行,包括python3。

与此同时jinja2同学还能够支持判断语句,客官且看:

<html>
  <head>


<meta http-equiv="Content-Type" content="text/html;     charset=gb2312">

{% if title %}

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

现在楼上的小伙子,变得有点聪明了,能够判断不同情况进行显示了。但是多人情况呢?

模版中的循环:

可能会有很多个小盆友需要被显示出来。咋办呢?如下如下:

其中author是作者,body字段是提交的吐槽

def index():
    user = {‘nickname‘: ‘大表哥‘}  # fake user
    posts = [  # fake array of posts
        {
            ‘author‘: {‘nickname‘: ‘大姨夫‘},
            ‘body‘: ‘Beautiful day in Portland!‘
        },
        {
            ‘author‘: {‘nickname‘: ‘大保健‘},
            ‘body‘: ‘The Avengers movie was so cool!‘
        }
    ]
    return render_template("index.html",
                           title=‘Home‘,
                           user=user,
                           posts=posts)

当然, 模版文件也要有相应的修改,主要是添加了 for post in posts:

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

简单吧?so easy!妈妈再也不用担心你不吃药

其实上面就是已经把控制的三种流程,顺序,分支,循环,都包含了,不是平白无故的写的。

模版的继承

一般的网站都需要有一些公共的模块,例如导航,foot模块等等。

这个时候,如果每个模版都重复的粘贴复制,会很低效,也不利于维护(一改,则都要重复的改)

故继承是非常有用的,模版也是可以继承的。

道理大家都懂,我就不在这里扯淡了,直接说flask里面是咋搞的吧。

首先我们新建一个base文件夹:

<html>
  <head>
    {% if title %}
    <title>{{ title }} - wetucao</title>
    {% else %}
    <title>Welcome to mwetucao/title>
    {% endif %}
  </head>
  <body>
    <div>我们吐槽: <a href="/index">主页</a></div>
    <hr>
    {% block content %}{% endblock %}
  </body>
</html>

这个和之前有什么区别呢?

主要是block控制模块,用来放我们的模块内容。

然后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 %}

那是相当相当的方便啊!

大表哥,亲测如下:

时间: 2024-12-29 01:25:34

Flask教程(二)、templates模版速速入门的相关文章

C语言快速入门教程(二)

C语言快速入门教程(二) C语言的基本语法 本节学习路线图: 引言: C语言,顾名思义就是一门语言,可以类比一下英语; 你要说出一个英语的句子需要:  单词  +  语法!  将单词按照一定的语法拼凑起来就成了一个英语句子了; C语言同样是这样,只不过单词可以理解为一些固定的知识点,而语法可以理解为算法(可以理解为解决问题的方法) 在这一节中我们就对固定知识点中的语言描述与数据存储进行解析! 1.C语言的基本元素 1.1  标识符 什么是标识符? 答:在C语言中,符号常量,变量,数组,函数等都需

DataVeryLite入门教程(二) Entity篇

DataVeryLite 是基于.net 4.0的数据库持久化ORM框架. 目前支持的数据库有Sqlserver,Mysql,Oracle,Db2,PostgreSql,Sqlite和Access. 最好先阅读DataVeryLite入门教程(一) 配置篇,然后再阅读本篇.如果你觉得麻烦也可以跳过. Entity是ORM中的核心对象之一,一个继承Entity的对象对应于数据库中的一个表. Entity提供丰富的API对表中的单条数据进行操作. 比如根据id或其他条件,加载,删除,插入,更新和部分

Spring Cloud 入门教程(二): 配置管理

使用Config Server,您可以在所有环境中管理应用程序的外部属性.客户端和服务器上的概念映射与Spring Environment和PropertySource抽象相同,因此它们与Spring应用程序非常契合,但可以与任何以任何语言运行的应用程序一起使用.随着应用程序通过从开发人员到测试和生产的部署流程,您可以管理这些环境之间的配置,并确定应用程序具有迁移时需要运行的一切.服务器存储后端的默认实现使用git,因此它轻松支持标签版本的配置环境,以及可以访问用于管理内容的各种工具.很容易添加

jQuery 入门教程(二): 基本语法

学习jQuery之前需要你有下面几个方面的基本知识 HTML CSS JavaScript jQuery 的基本语法 $(selector).action() $ 符合定义这是一个jQuery语句 (selector) 用来选择某个HTML元素,其语法和CSS的selector语法一样. action() 定义操作该HTML元素的方法. 比如: $(this).hide() – 隐藏当前元素. $("p").hide() – 隐藏所以 <p> 元素. $(".te

Git的入门教程&lt;二&gt;

Git 的入门教程<二> 4> git远程仓库的使用 我们在使用git进行代码管理的时候,协同办公,需要一个24小时不间断的隐形同事,此时,如果在局域网内,则直接开一台局域网内的24小时开机运行的机器就可以,但是如果在homework的时候就需要这个24小时运行的机器拥有独立的外网IP,这样消耗就比较大,幸好,网上有一个github,提供给我们一个免费的仓库,让我们可以在同事之前推送代码,下面介绍github的使用. 4.1 github的使用 首先 登录github的官网: https

BootStrap入门教程 (二)

上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffolding)之上,Bootstrap的基础CSS(Base CSS)提供了一系列的基础Html页面要素,旨在为用户提供新鲜.一致的页面外观和感觉.本文将主要深入讲解排版(Typography),表格(Table),表单(Forms),按钮(Buttons)这四个方面的内容. 排版 (Typography),

PySide——Python图形化界面入门教程(二)

PySide——Python图形化界面入门教程(二) ——交互Widget和布局容器 ——Interactive Widgets and Layout Containers 原文链接:http://pythoncentral.io/pyside-pyqt-tutorial-interactive-widgets-and-layout-containers/ 上一个教程中,我们了解了一些QWidget提供的功能,还有一个特殊的子类QLabel.更进一步的,我们完成了一个用来说明简单Python/Q

无废话ExtJs 入门教程二[Hello World]

无废话ExtJs 入门教程二[Hello World] extjs技术交流,欢迎加群(201926085) 我们在学校里学习任何一门语言都是从"Hello World"开始,这里我们也不例外. 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&

无废话ExtJs 入门教程二十一[继承:Extend]

无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承”定义在我们定义的新组件中,从而达到重用的目地. 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

Elasticsearch入门教程(二):Elasticsearch核心概念

原文:Elasticsearch入门教程(二):Elasticsearch核心概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/vbirdbest/article/details/79200022 基本概念介绍 Elasticsearch是一个基于Lucene构建的开源.分布式.RESTful的搜索引擎,能够实现近实时(NRT)搜索,稳定.可靠.安装方便.Elasticsearch 不