为了双十一,做了一个驾驶舱网站,发文章仅为了记录,如果牛人路过,欢迎指点
flask入门
flask入门,就比较简单,以以下代码为例:
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
return 'Hello, World!'
if __name__ == '__main__':
app.run()
然后就可以正常得到一个只有hello,world的空白网页了(py文件名最好重命名成app.py)。
flask + for 循环+ajax 得到可以自动上下滚动的table
首先需要在flask新建一个templates的文件夹,里面新建一个html文件,这里以index.html为例,如图
index.html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动table</title>
<script src="../static/js/jquery.js"></script>
</head>
<body>
<div id='fl-table2'>
<p id="performance-title">当月事业部销售排行榜</p>
<table class="fl-table">
<thead>
<tr>
<th>排名</th>
<th>事业部</th>
<th>当月销售</th>
</tr>
</thead>
<tbody id='mytable2'>
{% for info in infos[0] %}
<tr>
<td>{{info[0]}}</td>
<td>{{info[1]}}</td>
<td>{{info[2]}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<script>
function addRow2() {//表格滚动
var table = document.getElementById('mytable2');
var row = table.insertRow(-1);
row.innerHTML = table.rows[0].innerHTML;
// 删除第一行
table.deleteRow(0);
table.scrollTop = table.scrollHeight;
}
setInterval(addRow2, 2000);
</script>
</body>
</html>
这里的id或者class是样式,只是为了做好看的,咱们可以先不管他,js文件可以到官网去下,jquery也是,这两个是通用样式,这里就不多详细赘述。
然后是py文件的内容:
from flask import Flask, render_template,request,jsonify
import simplejson
import util
import pandas as pd
import random
app = Flask(__name__)
@app.route('/',methods = ['post','get'])
def index():
syb_data = pd.read_excel('D:\桌面\更新表.xlsx', sheet_name='事业部业绩排名')
list_syb_data = []
for num in range(len(syb_data)):
list_syb_data.append(list(syb_data.iloc[num].values))
return render_template('index.html',infos=[list_syb_data])
if __name__ == '__main__':
# app.run(debug=True)
更新表如下:
代码解释:
1、首先在html中利用table组件创建了一个表的位置,表的字段名分别是排名,事业部,当月销售,也就是th的部分,那么需要填入的就是tbody部分。这里使用的是for循环一列一列填入
{% for info in infos[0] %} //{% for i in item %}是html的for循环写法,infos[0]是因为我后面不止传一个,所以后端返回的info用了列表,而list_syb_data是info列表内的第一个元素。
<td>{{info[0]}}</td> //这里代表的是第一列,即排名列
{% endfor %} //这是html的for循环结尾写法
这个for循环就是为了把exel的数据传给前端。
2、接着是script部分:
首先效果是表格字段名不动,表格滚动,为了方便查找,在tbody标签位置加入一个class = 'mytable',这个css样式是不存在的,只是为了方便定位查找。
关于表格滚动,可以理解将第一行删除,并添加至最后一行,且每2秒执行一遍操作。