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 MySQL数据库连接池组件pymysqlpool详解
Jul 07 Python
pandas 快速处理 date_time 日期格式方法
Nov 12 Python
修改python plot折线图的坐标轴刻度方法
Dec 13 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
Dec 24 Python
python爬虫解决验证码的思路及示例
Aug 01 Python
python 使用opencv 把视频分割成图片示例
Dec 12 Python
python Qt5实现窗体跟踪鼠标移动
Dec 13 Python
Python中flatten( ),matrix.A用法说明
Jul 05 Python
python语音识别指南终极版(有这一篇足矣)
Sep 09 Python
Python 测试框架unittest和pytest的优劣
Sep 26 Python
让文件路径提取变得更简单的Python Path库
May 27 Python
对象析构函数__del__在Python中何时使用
Mar 22 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中使用PDF文档功能
2006/10/09 PHP
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
jQuery遍历Form示例代码
2013/09/03 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python实现给数组按片赋值的方法
2015/07/28 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
python最长回文串算法
2018/06/04 Python
Python内置异常类型全面汇总
2020/05/28 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
最新英语专业学生求职信范文
2013/09/21 职场文书
追悼会上的答谢词
2014/01/10 职场文书
简历里的自我评价
2014/01/31 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
新郎新娘答谢词
2015/01/04 职场文书
感恩教师节主题班会
2015/08/12 职场文书
详解Vue router路由
2021/11/20 Vue.js