大家好，我是一名非计算机专业但对python爬虫十分感兴趣的电子商务大二学生

这个代码是我用于日后回看以及给大家参考参考，一起交流交流用的

可以转载，但注明一下原创谢谢！

jinjia2的作用：渲染模板

jinjia2为第三方模块，需要进行安装

下面我们用到的是jinjia2里面的render_template对模板进行渲染

先带入我们今天需要用到的包：

from flask import Flask, render_template，request
import datetime  # 引入显示时间的包【date日期，time时间】

搭建基本的框架：

from flask import Flask, render_template
import datetime  # 引入显示时间的包【date日期，time时间】
app = Flask(__name__)# 向用户传递一个变量
@app.route('/')
def index2():time = datetime.datetime.now()  # 定义一个time普通变量，显示现在的时间return render_template('index.html',var = time)  # 将time普通变量在html文件上实现if __name__ == '__main__':app.run()

那要怎么在html上实现呢？

看下面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小小杂货铺</title>
</head>
<body><!----用两个大括号包住一个变量，让jinjia2对模块进行渲染，服务器进行识别---->今天是{{ var }}欢迎光临
</body>
</html>

那我们要加多个变量呢？

这里我们试着加入一个列表：

def index2():time = datetime.datetime.now()name = ['张山','tony','john','李四']  # 列表变量return render_template('index.html',var = time,list = name)

列表在html的引用：

客服人员：<br/>              # 用br标签换行提升观感{% for data in list %}  # jinjia进行循环代码的格式<li>{{ data }}</li> # 循环的数据,用li标签是数据显示为列表的格式{% endfor %}            # 结束循环

那我们加入一个字典试试：

task = {"任务":"打扫卫生","打扫时间":"3小时"}

在html中实现：

如何在html中实现表格呢？

我们用html语句先实现一下：

【一个table就是一个表格，一个tr就是一行，一个td就是一行中的一个】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小小杂货铺</title>
</head>
<body>今天是{{ var }}欢迎光临<br/>客服人员：<br/>{% for data in list %}<li>{{ data }}</li>{% endfor %}任务：<br/><table border="1px solid"><tr><td>测试1</td><td>测试2</td></tr><tr><td>测试3</td><td>测试4</td></tr><tr><td>测试5</td><td>测试6</td></tr></table>
</body>
</html>

我们运用在我们的项目中：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小小杂货铺</title>
</head>
<body>今天是{{ var }}欢迎光临<br/>客服人员：<br/>{% for data in list %}<li>{{ data }}</li>{% endfor %}任务：<br/><table border="1">{% for key,value in task.items() %}  <!----iteams把字典转换为列表的形式[(key,value),(key,value),(key,value)]---><tr><td>{{key}}</td><td>{{value}}</td></tr>{% endfor %}</table>
</body>
</html>

我们试着弄出一个用户的注册界面：

在templates下创建一个新的文件夹test

再创建一个register.html文件

我们用pycharm引用一下：

#表单提交
@app.route('/test/register')
def register():return render_template("test/register.html")

将register完善一下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="http://localhost:5000/result" method="post"><p>姓名：<input type="text" name="name"></p><p>年龄：<input type="text" name="age"></p><p>性别：<input type="text" name="sex"></p><p>地址：<input type="text" name="address"></p><p><input type="submit" value="提交"></p>
</form>
</body>
</html>

我们再写一个提交表单之后需要显示的路径网址：

再test文件夹下创建一个result.html文件

用pycharm引用一下：

# 接收表单提交的路由，需要指定method为post
@app.route('/result',method = ['POST','GET'])
def result():if request.method == 'POST':  # post可以对信息进行加密，html中的form表单method为post，所以这里也改result = request.form  # 把数据以表格的形式输出return render_template("test/result.html",result = result)

先把result.html文件用result带过，不写内容：

这里要注意访问的方式，默认是get方式访问，如下：

@app.route('/result')
def result():return render_template("test/result.html")

会显示：

Method Not Allowed

The method is not allowed for the requested URL.

那么我们要改一下访问的方式：

因为我们在register中的跳转为了让信息保密使用了post加密，那们获取信息就要用post

接收表单提交的路由，需要指定methods为post

@app.route('/result',methods = ['POST','GET'])

保存刷新一下网页再提交一次就会显示我们设置的result文件显示的内容：result

当然光显示是没有用，我们还要获取表单里的内容：

不用定义变量，这时候我们就要用到request帮我把表单的信息分装传给我们

# 接收表单提交的路由，需要指定methods为post
@app.route('/result',methods = ['POST','GET'])
def result():if request.method == 'POST':  # post可以对信息进行加密，html中的form表单method为post，所以这里也改，method一定不要写错了result = request.form  # 把数据以字典的形式输出return render_template("test/result.html",result = result)

引用之后我们完善一下result文件，让表单输出

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><table border="1">{% for key,value in result.items() %}  <!----iteams把字典转换为列表的形式[(key,value),(key,value),(key,value)]---><tr><th>{{key}}</th>   <!----th标签标题，让key值更明显---><td>{{value}}</td></tr>{% endfor %}</table>
</body>
</html>

最后提示一下：register文件中的action要获取动态地址

<form action="http://localhost:5000/result" method="post">

可以这样：

<form action="{{ url_for('result')}}" method="post">

这样就不会直接再网页源代码中显示我们的http地址，并且方便在换端口和域名时还能继续使用，逆向查找路由的方式，result为你定义的函数名

[数据可视化]flask框架+jinjia2进阶相关推荐

Python的网易云音乐数据分析系统爬虫 echarts可视化 Flask框架音乐推荐系统源码下载
Python的网易云音乐数据分析系统爬虫 echarts可视化 Flask框架音乐推荐系统一.技术说明网易云音乐数据(歌单.用户.歌词.评论)Python爬取Flask框架搭建ECharts. ...
数据可视化js框架 d3.js入门
数据可视化js框架 d3.js入门 [一] 选择元素绑定数据 1.下载.引入d3.js 2.d3.select():选择所有指定元素的第一个 3.d3.selectAll() :选择指定元素的全部 e ...
基于Vue的数据可视化设计框架，数据大屏可视化编辑器
开发文档(★★★★★) 请访问 https://lizhensheng.github.io/vue-data-view/ 完整代码下载地址:基于Vue的数据可视化设计框架,数据大屏可视化编辑器简介 ...
DKHadoop的人力资源数据可视化技术框架
大数据技术的应用正在潜移默化改变着我们的日常生活习惯和工作方式,很多看起来有点"不可思议"的事情也渐渐被我们"习以为常".大数据可能在国内的起步较晚,但我们可能 ...
Matplotlib数据可视化从入门到进阶
目录一.数据可视化入门 1.基础知识 1.1 图形绘制 1.2 标题.标签.坐标轴刻度 1.2.1 标题的设置 1.2.2 标签的设置 1.2.3 坐标轴刻度的设置 1.3 图例 1.4 脊柱移动 ...
【玩转python】Flask基金数据可视化
前言本文介绍的是蛋卷基金最近七天的数据用Flask框架展示并绘出七天内的基金涨幅趋势.本文仅使用于个人学习参考!!! 前提准备解析器python 3.7.0 编辑工具pycharm: pytho ...
仿蚂蚁金服AntV框架蚂蚁数据可视化F2 基金折线图、对比图（包含买卖点、自定义标签等，注释详尽）
大家好,这次使用的是AntV的蚂蚁数据可视化F2框架,类似于蚂蚁基金的效果,包含买卖点.自定义标签等,代码如下: F2框架参考网址:https://antv-f2.gitee.io/zh/exampl ...
仿蚂蚁金服AntV框架蚂蚁数据可视化F2条形图、柱状图（注释详尽）
大家好,这次使用的是AntV的蚂蚁数据可视化F2框架,类似于蚂蚁基金的效果,代码如下: F2框架参考网址:https://antv-f2.gitee.io/zh/examples/bar/basic# ...
仿蚂蚁金服AntV框架蚂蚁数据可视化F2饼图（注释详尽）
大家好,这次使用的是AntV的蚂蚁数据可视化F2框架,类似于蚂蚁基金的效果,代码如下: F2框架参考网址:https://antv-f2.gitee.io/zh/examples/pie/donut# ...

[数据可视化]flask框架+jinjia2进阶

Method Not Allowed

[数据可视化]flask框架+jinjia2进阶相关推荐

最新文章

热门文章