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实现ssh批量登录并执行命令
Oct 25 Python
Python探索之URL Dispatcher实例详解
Oct 28 Python
深入理解Python分布式爬虫原理
Nov 23 Python
python实现动态数组的示例代码
Jul 15 Python
Django在pycharm下修改默认启动端口的方法
Jul 26 Python
python利用tkinter实现屏保
Jul 30 Python
tensorflow 只恢复部分模型参数的实例
Jan 06 Python
Python内置类型性能分析过程实例
Jan 29 Python
python列表删除和多重循环退出原理详解
Mar 26 Python
python实现图像全景拼接
Mar 27 Python
使用Keras训练好的.h5模型来测试一个实例
Jul 06 Python
python神经网络ResNet50模型
May 06 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函数解决SQL injection
2006/12/09 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
Python字符转换
2008/09/06 Python
python实现多线程采集的2个代码例子
2014/07/07 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
Python接口测试get请求过程详解
2020/02/28 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
阿尔卡特(中国)的面试题目
2014/08/20 面试题
几个SQL的面试题
2014/03/08 面试题
四好少年事迹材料
2014/01/12 职场文书
勤俭节约倡议书
2014/04/14 职场文书
摄影展策划方案
2014/06/02 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
车辆管理制度范本
2015/08/05 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers