Python编程flask使用页面模版的方法


Posted in Python onDecember 28, 2018

在flask中可以像go和angular那样使用页面模版(template),可以将HTML页面显示进行模版化,通过参数传递与页面进行数据交互。

概要信息

Python编程flask使用页面模版的方法

事前准备:flask

liumiaocn:flask liumiao$ which flask
/usr/local/bin/flask
liumiaocn:flask liumiao$ flask --version
Flask 1.0.2
Python 2.7.10 (default, Jul 15 2017, 17:16:57) 
[GCC 4.2.1 Compatible Apple LLVM 9.0.0 (clang-900.0.31)]
liumiaocn:flask liumiao$

代码示例:嵌入式的HTML模版

像Angular一样,我们可以在flask中写前端的页面,python代码中混杂着HTML代码,在这里将前面的HelloWorld示例进行简单的修改,将显示的Hello World加上的设置。

代码示例

liumiaocn:flask liumiao$ cat flask_1.py 
#!/usr/bin/python
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
  return "<h1>Hello World!</h1>"
if __name__ == "__main__":
  app.debug=True
  app.run(host='0.0.0.0',port=7000)
liumiaocn:flask liumiao$

执行&确认

在HelloWorld示例中我们提到有两种方式启动flask的微服务进程,这里再添加一种,添加#!/usr/bin/python之后,同时对此文件添加可执行权限比如755,即可使用.启动

liumiaocn:flask liumiao$ chmod 755 flask_1.py 
liumiaocn:flask liumiao$ ./flask_1.py 
 * Serving Flask app "flask_1" (lazy loading)
 * Environment: production
  WARNING: Do not use the development server in a production environment.
  Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://0.0.0.0:7000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 131-533-062

通过curl进行结果确认:

liumiaocn:flask liumiao$ curl http://localhost:7000
<h1>Hello World!</h1>liumiaocn:flask liumiao$

页面确认

Python编程flask使用页面模版的方法

代码示例

上面的示例过于简单,写一个简单的完整的页面来确认一下

liumiaocn:flask liumiao$ cat flask_1.py 
#!/usr/bin/python
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
  return '<!DOCTYPE html> \
<html> \
<head> \
<meta charset="utf-8"> \
<title>Hello</title> \
</head> \
<body>\
<h1>Hello World!</h1> \
</body>\
</html>'
if __name__ == "__main__":
  app.debug=True
  app.run(host='0.0.0.0',port=7000)
liumiaocn:flask liumiao$

执行&确认

通过curl可以确认页面范围信息

liumiaocn:flask liumiao$ ./flask_1.py 
 * Serving Flask app "flask_1" (lazy loading)
 * Environment: production
  WARNING: Do not use the development server in a production environment.
  Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://0.0.0.0:7000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 131-533-062

也可以通过浏览器来确认title和页面显示

Python编程flask使用页面模版的方法

页面模版

嵌在python的代码中非常的麻烦,转义的连接,以及源码的查看都非常不方便。flask提供了Jinja2的模版渲染,只需要引入render_template即可使用。

import render_template

为了使用这个功能,首先需要在程序中做如下import

from flask import render_template

准备页面信息

比如将上文中嵌入的HTML页面独立成index.html,详细信息如下:

liumiaocn:flask liumiao$ ls templates/
index.html
liumiaocn:flask liumiao$ cat templates/index.html 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello Template</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>
liumiaocn:flask liumiao$

注意事项:flask会在当前目录的templates下搜索对应的模版文件,所以需要创建templates文件夹,然后将模版html文件放入其中。

页面调用

在页面上只需要调用render_template即可实现url与对应模版的关联,

render_template(“index.html”)

详细代码

liumiaocn:flask liumiao$ cat flask_2.py 
#!/usr/bin/python
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route("/")
def hello():
  return render_template("index.html")
if __name__ == "__main__":
  app.debug=True
  app.run(host='0.0.0.0',port=7000)
liumiaocn:flask liumiao$

执行&确认

liumiaocn:flask liumiao$ python flask_2.py 
 * Serving Flask app "flask_2" (lazy loading)
 * Environment: production
  WARNING: Do not use the development server in a production environment.
  Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://0.0.0.0:7000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 131-533-062

使用curl可以看到详细的html代码,而且读起来方便多了

liumiaocn:~ liumiao$ curl http://localhost:7000
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello Template</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>liumiaocn:~ liumiao$

也可以通过浏览器确认并查看源码

Python编程flask使用页面模版的方法

小结

使用render_template,flask也可以像angular一样非常方便的创建用于展示的模版视图,我们已经说过render_template是基于Jinja2的模版,在下一篇文章中将继续介绍template的数据交互和控制方式。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Python 相关文章推荐
python time模块用法实例详解
Sep 11 Python
python简单实现基于SSL的IRC bot实例
Jun 15 Python
Python SQLite3简介
Feb 22 Python
pygame游戏之旅 游戏中添加显示文字
Nov 20 Python
Python实现的栈、队列、文件目录遍历操作示例
May 06 Python
Python Pandas数据中对时间的操作
Jul 30 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
Sep 11 Python
Python正则表达式学习小例子
Mar 03 Python
Django基于客户端下载文件实现方法
Apr 21 Python
python 密码学示例——凯撒密码的实现
Sep 21 Python
多个版本的python共存时使用pip的正确做法
Oct 26 Python
什么是Python装饰器?如何定义和使用?
Apr 11 Python
Python编程中flask的简介与简单使用
Dec 28 #Python
Python3 Post登录并且保存cookie登录其他页面的方法
Dec 28 #Python
Python3 使用cookiejar管理cookie的方法
Dec 28 #Python
Python编程在flask中模拟进行Restful的CRUD操作
Dec 28 #Python
python获取服务器响应cookie的实例
Dec 28 #Python
基于Python在MacOS上安装robotframework-ride
Dec 28 #Python
Python3爬虫之urllib携带cookie爬取网页的方法
Dec 28 #Python
You might like
php树型类实例
2014/12/05 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
python求pi的方法
2014/10/08 Python
Python常用随机数与随机字符串方法实例
2015/04/09 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
Servlet方面面试题
2016/09/28 面试题
高中打架检讨书
2014/02/13 职场文书
群众路线调研报告范文
2014/11/03 职场文书
送达通知书
2015/04/25 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
AJAX学习笔记
2021/05/18 Javascript
MySQL Server层四个日志的实现
2022/03/31 MySQL
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript