在Python中使用HTML模版的教程


Posted in Python onApril 29, 2015

Web框架把我们从WSGI中拯救出来了。现在,我们只需要不断地编写函数,带上URL,就可以继续Web App的开发了。

但是,Web App不仅仅是处理逻辑,展示给用户的页面也非常重要。在函数中返回一个包含HTML的字符串,简单的页面还可以,但是,想想新浪首页的6000多行的HTML,你确信能在Python的字符串中正确地写出来么?反正我是做不到。

俗话说得好,不懂前端的Python工程师不是好的产品经理。有Web开发经验的同学都明白,Web App最复杂的部分就在HTML页面。HTML不仅要正确,还要通过CSS美化,再加上复杂的JavaScript脚本来实现各种交互和动画效果。总之,生成HTML页面的难度很大。

由于在Python代码里拼字符串是不现实的,所以,模板技术出现了。

使用模板,我们需要预先准备一个HTML文档,这个HTML文档不是普通的HTML,而是嵌入了一些变量和指令,然后,根据我们传入的数据,替换后,得到最终的HTML,发送给用户:

在Python中使用HTML模版的教程

这就是传说中的MVC:Model-View-Controller,中文名“模型-视图-控制器”。

Python处理URL的函数就是C:Controller,Controller负责业务逻辑,比如检查用户名是否存在,取出用户信息等等;

包含变量{{ name }}的模板就是V:View,View负责显示逻辑,通过简单地替换一些变量,View最终输出的就是用户看到的HTML。

MVC中的Model在哪?Model是用来传给View的,这样View在替换变量的时候,就可以从Model中取出相应的数据。

上面的例子中,Model就是一个dict:

{ 'name': 'Michael' }

只是因为Python支持关键字参数,很多Web框架允许传入关键字参数,然后,在框架内部组装出一个dict作为Model。

现在,我们把上次直接输出字符串作为HTML的例子用高端大气上档次的MVC模式改写一下:

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def home():
 return render_template('home.html')

@app.route('/signin', methods=['GET'])
def signin_form():
 return render_template('form.html')

@app.route('/signin', methods=['POST'])
def signin():
 username = request.form['username']
 password = request.form['password']
 if username=='admin' and password=='password':
  return render_template('signin-ok.html', username=username)
 return render_template('form.html', message='Bad username or password', username=username)

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

Flask通过render_template()函数来实现模板的渲染。和Web框架类似,Python的模板也有很多种。Flask默认支持的模板是jinja2,所以我们先直接安装jinja2:

$ easy_install jinja2

然后,开始编写jinja2模板:

home.html

用来显示首页的模板:

<html>
<head>
 <title>Home</title>
</head>
<body>
 <h1 style="font-style:italic">Home</h1>
</body>
</html>

 
form.html

用来显示登录表单的模板:

<html>
<head>
 <title>Please Sign In</title>
</head>
<body>
 {% if message %}
 <p style="color:red">{{ message }}</p>
 {% endif %}
 <form action="/signin" method="post">
 <legend>Please sign in:</legend>
 <p><input name="username" placeholder="Username" value="{{ username }}"></p>
 <p><input name="password" placeholder="Password" type="password"></p>
 <p><button type="submit">Sign In</button></p>
 </form>
</body>
</html>

signin-ok.html

登录成功的模板:

<html>
<head>
 <title>Welcome, {{ username }}</title>
</head>
<body>
 <p>Welcome, {{ username }}!</p>
</body>
</html>

登录失败的模板呢?我们在form.html中加了一点条件判断,把form.html重用为登录失败的模板。

最后,一定要把模板放到正确的templates目录下,templates和app.py在同级目录下:

在Python中使用HTML模版的教程

启动python app.py,看看使用模板的页面效果:

在Python中使用HTML模版的教程

通过MVC,我们在Python代码中处理M:Model和C:Controller,而V:View是通过模板处理的,这样,我们就成功地把Python代码和HTML代码最大限度地分离了。

使用模板的另一大好处是,模板改起来很方便,而且,改完保存后,刷新浏览器就能看到最新的效果,这对于调试HTML、CSS和JavaScript的前端工程师来说实在是太重要了。

在Jinja2模板中,我们用{{ name }}表示一个需要替换的变量。很多时候,还需要循环、条件判断等指令语句,在Jinja2中,用{% ... %}表示指令。

比如循环输出页码:

{% for i in page_list %}
 <a href="/page/{{ i }}">{{ i }}</a>
{% endfor %}

如果page_list是一个list:[1, 2, 3, 4, 5],上面的模板将输出5个超链接。

除了Jinja2,常见的模板还有:

  •     Mako:用<% ... %>和${xxx}的一个模板;
  •     Cheetah:也是用<% ... %>和${xxx}的一个模板;
  •     Django:Django是一站式框架,内置一个用{% ... %}和{{ xxx }}的模板。

小结

有了MVC,我们就分离了Python代码和HTML代码。HTML代码全部放到模板里,写起来更有效率。

Python 相关文章推荐
用Python的Django框架编写从Google Adsense中获得报表的应用
Apr 17 Python
Centos7 Python3下安装scrapy的详细步骤
Mar 15 Python
Python实现针对给定单链表删除指定节点的方法
Apr 12 Python
Pandas中把dataframe转成array的方法
Apr 13 Python
python得到qq句柄,并显示在前台的方法
Oct 14 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
Oct 12 Python
pygame实现烟雨蒙蒙下彩虹雨
Nov 11 Python
Python语言异常处理测试过程解析
Jan 08 Python
python实现的Iou与Giou代码
Jan 18 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
Oct 14 Python
python 三种方法提取pdf中的图片
Feb 07 Python
Python+腾讯云服务器实现每日自动健康打卡
Dec 06 Python
以Flask为例讲解Python的框架的使用方法
Apr 29 #Python
详解Python程序与服务器连接的WSGI接口
Apr 29 #Python
Python的SQLAlchemy框架使用入门
Apr 29 #Python
python使用post提交数据到远程url的方法
Apr 29 #Python
python实现根据ip地址反向查找主机名称的方法
Apr 29 #Python
连接Python程序与MySQL的教程
Apr 29 #Python
python实现通过代理服务器访问远程url的方法
Apr 29 #Python
You might like
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
常用的php对象类型判断
2008/08/27 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
python爬取音频下载的示例代码
2020/10/19 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
远程研修随笔感言
2014/02/10 职场文书
继承公证书
2014/04/09 职场文书
新农村建设标语
2014/06/24 职场文书
2016年母亲节寄语
2015/12/04 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
Python实现文字pdf转换图片pdf效果
2022/04/03 Python