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实现m3u8格式转换为mp4视频格式
Feb 28 Python
Numpy掩码式数组详解
Apr 17 Python
mac下pycharm设置python版本的图文教程
Jun 13 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
Jan 08 Python
对DJango视图(views)和模版(templates)的使用详解
Jul 17 Python
使用WingPro 7 设置Python路径的方法
Jul 24 Python
python matplotlib拟合直线的实现
Nov 19 Python
用python爬取历史天气数据的方法示例
Dec 30 Python
Python面向对象之私有属性和私有方法应用案例分析
Dec 31 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
Jun 28 Python
python实现npy格式文件转换为txt文件操作
Jul 01 Python
简单了解Django项目应用创建过程
Jul 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
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
React实践之Tree组件的使用方法
2017/09/30 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
python开发之thread实现布朗运动的方法
2015/11/11 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
python调试神器PySnooper的使用
2019/07/03 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
关于感恩的演讲稿500字
2014/08/26 职场文书
先进典型发言材料
2014/12/30 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
vue封装数字翻牌器
2022/04/20 Vue.js