文档章节

Python-Flask搭建博客 Day02 Jinja2模板引擎, 使用Twitter Bootstrap

ltoddyc
 ltoddyc
发布于 2017/09/06 19:04
字数 1704
阅读 41
收藏 0
点赞 0
评论 0

源代码: https://github.com/LToddy/blog

技术交流群:630398887(欢迎一起吹牛)

有些地方没看懂没关系,坚持往下看,下面会有演示代码来说明。

上一篇中如下代码

@app.route('/')
def hello_world():
    return 'Hello World!'

这个样子返回一个字符串,很不爽,能不能直接返回一个HTML页面,当然可以。

在templates文件夹下新建一个index.html

<small>templates/index.html</small>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Just for fun</title>
</head>
<body>

<h1>Hello World</h1>

</body>
</html>

<small>blog.py</small>

from flask import render_template
#...
@app.route('/')
def hello_world():
    return render_template('index.html')

这个样子就直接把那个index.html页面显示了出来.

Jinja2模板引擎

渲染模板

在blog.py的def user(username) 这个函数中,如果我们想把那个username传入html页面怎么办呢? 在templates文件夹下新建user.html

<small>templates/user.html</small>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Just for fun</title>
</head>
<body>

<h1>Hello {{ name }}.</h1>

</body>
</html>

视图函数user()返回的响应中包含一个使用变量表示的动态部分. <small>blog.py</small>

@app.route('/<username>')
def user(username):
    return render_template('user.html', name=username)

注意看这里的对应关系,在return那里,render_template接受了如下两个部分:

  • 'user.html' 这个是要展现的页面名字,页面要放在templates文件夹下,jinja2引擎会自动去templates文件夹寻找此文件.
  • 第二部分就是user.html中所需要的参数,这里可以有很多个参数,下文将会看到.在这里,name=username,左边的name表示参数名,就是模板中使用的占位符,右边的username是当前作用域中的变量.

变量

刚才使用的{{ name }}结构表示一个变量,它是一个特殊的占位符,告诉模板引擎这个位置的值从渲染模板时使用的数据中获取. Jinja2能识别所有类型的变量,甚至是一些特殊的类型:例如列表,字典和对象. e.g.

  • <p>A value from a dictionary: {{ mydict['key'] }}.</p>

  • <p>A value from a list: {{ mylist[3] }}.</p>

  • <p>A value from a list, with a variable index: {{ mylist[myintvar] }}</p>

  • <p>A value from a object's method: {{ myobj.somemethod() }}.</p>

Jinja2另外也提供了叫 过滤器 的东西,但是不怎么用,这里就不再说明了。

Jinja2过滤器完整文档

控制结构

条件控制结构语句:

{% if user %}
    Hello, {{ user }}!
{% else %}
    Hello, Stranger!
{% endif %}

循环控制结构

<ul>
    {% for comment in comments %}
        <li>comment</li>
    {% endfor %
</ul>

需要在多出重复使用的模板代码片段可以写入单独的文件,再包含在所有模板中,以避免重复:

{% include 'common.html' %}

另一种重复使用代码的强大方式是模板继承. 首先创建一个名为base.html的模板

<html lang="en">
<head>
    {% block head %}
        <title>{% block title %}{% endblock %} - My Application</title>
    {% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>

block标签定义的元素可在衍生模板中修改.例如

{% extends 'base.html' %}
{% block title %}Index{% endblock %}
{% block head %}
    {{ super() }}
    <style>
    </style>
{% endblock %}
{% block body %}
<h1>Hello, World!</h1>
{% endblock %}

block标签定义的元素可以在衍生的模板中修改. extends指令声明这个模板衍生自base.html.在extends指令之后,基模板中的3个块被重新定义,模板引擎会将其插入适当的位置.

使用Flask-Bootstrap集成Twitter Bootstrap

如果电脑上有pip的可以:

pip install flask-bootstrap

没有的就如上篇文章那样,通过Pycharm自动帮你安装. Bootstrap CSS样式库,简单点理解就是你获得了一大堆化妆品(定制好的,而非按照自己想法定制的样子),可以有选择的去使用.

初始化Flask-Bootstrap:

from flask_bootstrap import Bootstrap
# ...
bootstrap = Bootstrap(app)

待会要通过继承Bootstrap的base.html页面来实现模板的复用. 先看看bootstrap的base.html为我们提供了什么:

{% block doc -%}
    <!DOCTYPE html>
    <html{% block html_attribs %}{% endblock html_attribs %}>
    {%- block html %}
        <head>
            {%- block head %}
                <title>{% block title %}{% endblock title %}</title>

                {%- block metas %}
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                {%- endblock metas %}

                {%- block styles %}
                    <!-- Bootstrap -->
                    <link href="{{ bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap') }}" rel="stylesheet">
                {%- endblock styles %}
            {%- endblock head %}
        </head>
        <body{% block body_attribs %}{% endblock body_attribs %}>
        {% block body -%}
            {% block navbar %}
            {%- endblock navbar %}
            {% block content -%}
            {%- endblock content %}

            {% block scripts %}
                <script src="{{ bootstrap_find_resource('jquery.js', cdn='jquery') }}"></script>
                <script src="{{ bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap') }}"></script>
            {%- endblock scripts %}
        {%- endblock body %}
        </body>
    {%- endblock html %}
    </html>
{% endblock doc -%}

主要用到两个块: navbar(导航栏)和content(页面主要内容).

在templates文件夹下新建base.html文件

<small>templates/base.html</small>

{% extends 'bootstrap/base.html' %}

{% block title %}Just for fun{% endblock %}

{% block navbar %}
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <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="/">Just for fun</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                </ul>
            </div>
        </div>
    </nav>
{% endblock %}

{% block content %}
    <div class="container">
        {% block page_content %}{% endblock %}
    </div>
{% endblock %}

然后我们更改一下index.html和user.html <small>templates/index.html</small>

{% extends 'base.html' %}

{% block page_content %}
    <div class="page-header">
        <h1>Hello World!</h1>
    </div>
{% endblock %}

<small>templates/user.html</small>

{% extends 'base.html' %}

{% block page_content %}
    <div class="page-header">
        <h1>Hello {{ name }}.</h1>
    </div>
{% endblock %}

OK,我们运行一下看看效果: 还不错.

自定义错误页面.

有时候输入一个错误的网址的时候,会返回一个404 page not found错误. 分别在templates文件夹下创建404.html和500.html

<small>templates/404.html</small>

{% extends 'base.html' %}

{% block title %}404 - Page Not Found{% endblock %}

{% block page_content %}
    <div class="page-header">
        <h1>Not Found</h1>
    </div>
{% endblock %}

<small>templates/500.html</small>

{% extends 'base.html' %}

{% block title %}500 - Internal Server Error{% endblock %}

{% block page_content %}
    <div class="page-header">
        <h1>Server Error</h1>
    </div>
{% endblock %}

以及我们要在blog.py中添加相应的路由: <small>blog.py</small>

@app.errorhandler(404)
def page_not_found(e):
    return render_template('404.html'), 404


@app.errorhandler(500)
def internal_server_error(e):
    return render_template('500.html'), 500

看一下blog.py的完整代码: <small>blog.py</small>

from flask import Flask
from flask import render_template
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)


@app.route('/')
def hello_world():
    return render_template('index.html')


@app.route('/<username>')
def user(username):
    return render_template('user.html', name=username)


@app.errorhandler(404)
def page_not_found(e):
    return render_template('404.html'), 404


@app.errorhandler(500)
def internal_server_error(e):
    return render_template('500.html'), 500


if __name__ == '__main__':
    app.run(debug=True)

在最后一行,我加入了:debug=True,目的是当你对程序做出了改变之后,不需要手动重启项目,项目会自动帮你做出重启.

最后说一点内容,下一篇将会用到

使用Flask-Script支持命令行选项

安装Flask-Script:

pip install flask-script

Flask的开发web服务器支持很多启动设置选项,传递设置选项的理想方式是使用命令行参数.

e.g.:

from flask_script import Manager
manager = Manager(app)

# ...

if __name__ == '__main__':
    manager.run()

此时的完整代码: <small>blog.py</small>

from flask import Flask
from flask import render_template
from flask_bootstrap import Bootstrap
from flask_script import Manager

app = Flask(__name__)
bootstrap = Bootstrap(app)
manager = Manager(app)


@app.route('/')
def hello_world():
    return render_template('index.html')


@app.route('/<username>')
def user(username):
    return render_template('user.html', name=username)


@app.errorhandler(404)
def page_not_found(e):
    return render_template('404.html'), 404


@app.errorhandler(500)
def internal_server_error(e):
    return render_template('500.html'), 500


if __name__ == '__main__':
    manager.run()

现在如何启动程序?

在软件的左下角,选择点击Terminal, 输入:

python3 blog.py runserver

如下: 这里要注意一下,我目前使用的是我的Linux系统,Python2和Python3都有,所以这里写明是Python3,如果你电脑上只有Python3,那么你把这里的python3替换成python就可以了.按照自己电脑为主.

然后打开浏览器,在地址栏填入: http://localhost:5000/ 回车就可以了.

© 著作权归作者所有

共有 人打赏支持
ltoddyc
粉丝 0
博文 8
码字总数 13949
作品 0
淄博
Flask 使用小结【Updating】

1、最简单的hello world #!/usr/bin/env python encoding: utf-8 from flask import Flaskapp = Flask(name) @app.route('/')def index(): return 'hello world' if name == 'main': app.ru......

大数据之路
2013/10/24
0
0
看完这篇文章还能不懂Flask这种Web框架吗?

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

lemonwater
05/14
0
0
Flask驱动的静态站点生成器(译)

---layout: posttitle: "Flask驱动的静态站点生成器(译)"discription: "翻译"category: pythontags: [flask, python] disqus: true {% include JB/setup %} 翻译自:Dead easy yet powerful ......

yyliu
2012/11/19
0
0
时隔 8 年,Flask 1.0 终于发布,放弃支持 Py 2.6 和 3.3

(点击上方公众号,可快速关注) 【导读】:在浏览器拼版本号的时代,有些软件的更新,则显得龟速了。比如:2017 年,Python 科学计算库 SciPy 时隔 16 年后才升到 1.0 版。还有,今天本文的...

p5deyt322jacs
05/02
0
0
Github上最受欢迎的Python框架Flask入门

flask最近终于发布了它的1.0版本更新,从项目开源到最近的1.0版本flask已经走过了8个年头。 运行,打开浏览器访问就可以看到页面输出了 flask的诞生于2010年的愚人节,本来它只是作者无意间写...

xjtuhit
06/08
0
0
雪峰磁针石博客]flask构建自动化测试平台3-模板

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

Python测试开发人工智能
07/07
0
0
3 个 Python 模板库比较

你的下一个 Python 项目需要一个模板引擎来自动生成 HTML 吗?这有几种选择。 在我的日常工作中,我花费大量的时间将各种来源的数据转化为可读的信息。虽然很多时候这只是电子表格或某种类型...

20%
06/05
0
0
python Flask离线安装与测试

Flask是用python进行web开发时,常见的python web框架。 如果服务器可以连接到外网,可以简单的用 pip install Flask 直接将Flask的依赖包及Flask直接安装好。 但公司的测试环境,一般是内网...

yumushui991
06/26
0
0
【Python搞搞轻量Blog】第一发 Flask入门

大家好,我是仙宇(其实就是咸鱼) 我发现很多小伙伴一直想着有自己的一个博客,而且还想自己写一个。 你们都这么爱折腾,我就给你们搞一个轻量级级别的Blog. 准备 我们要用Python来写一套轻量...

仙宇
03/30
0
0
Python进阶(五十)-解析Flask运行原理

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

sunhuaqiang1
2017/05/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

keepalived配置高可用集群

Linux集群概述 根据功能划分为两大类:高可用和负载均衡 高可用集群通常为两台服务器,一台工作,另外一台作为冗余,当提供服务的机器宕机,冗余将接替继续提供服务 实现高可用的开源软件有:...

TaoXu
13分钟前
0
0
mysql联表批处理操作

1 概述 mysql中的单表增删改查操作,可以说是基本中的基本. 实际工作中,常常会遇到一些基本用法难以处理的数据操作,譬如遇到主从表甚至多级关联表的情况(如一些历史问题数据的批量处理),考虑到...

社哥
16分钟前
0
0
IntelliJ IDEA 详细图解最常用的配置,适合刚刚用的新人。

刚刚使用IntelliJ IDEA 编辑器的时候,会有很多设置,会方便以后的开发,磨刀不误砍柴工。 比如:设置文件字体大小,代码自动完成提示,版本管理,本地代码历史,自动导入包,修改注释,修改...

kim_o
30分钟前
0
0
Google Java编程风格指南

目录 前言 源文件基础 源文件结构 格式 命名约定 编程实践 Javadoc 后记 前言 这份文档是Google Java编程风格规范的完整定义。当且仅当一个Java源文件符合此文档中的规则, 我们才认为它符合...

niithub
33分钟前
0
0
java.net.MalformedURLException异常说明

1.异常片段 Java代码中,在进行URL url = new URL(urllink)操作时,提示以下异常信息,该类异常主要问题出在参数urllink上面。 异常片段1 java.net.MalformedURLException at java.ne...

lqlm
33分钟前
1
0
CentOS7修改mysql5.6字符集

解决办法:CentOS7下修改MySQL数据库字符编码为UTF-8,UTF-8包含全世界所有国家所需要的字符集,是国际编码。 具体操作如下: 1.进入MySQL [root@tianqi-01 ~]# mysql -uroot -p Enter passw...

河图再现
35分钟前
0
0
DevExpress v18.1新版亮点——WPF篇(一)

用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容。本文将介绍了DevExpress WPF v18.1 的新功能,快来下载试用新版本!点击下载>> Accordion Co...

Miss_Hello_World
37分钟前
0
0
Rancher 2.0集群与工作负载告警

Rancher 2.0操作指南。本文将step by step演示如何使用Rancher 2.0中集成的告警功能,包括设置通知程序、设置集群级别以及工作负载级别的告警。 在Rancher 1.x时期,告警功能是很多Rancher用...

RancherLabs
42分钟前
1
0
Python中字符串拼接的N中方法

python拼接字符串一般有以下几种方法: ①直接通过(+)操作符拼接 s = 'Hello'+' '+'World'+'!'print(s) 输出结果:Hello World! 使用这种方式进行字符串连接的操作效率低下,因为python中...

木头释然
43分钟前
9
0
JAVA排序之归并排序

归并排序思路就是不停拆分数组,直到拆成一个一个元素,之后将拆出来的元素按照拆分顺序反过来的顺序合并,出现前边值大于后边值,则换位置,放入临时数组,最后将临时数组覆盖原数组. public stat...

勤奋的蚂蚁
55分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部