flask+html+js做驾驶舱网站（一）

阿赖（在线ing）

已于 2023-11-10 13:16:05 修改

阅读量348

点赞数

文章标签： flask javascript python

于 2023-11-10 13:14:55 首次发布

本文链接：https://blog.csdn.net/a3021629273/article/details/134328694

版权

为了双十一，做了一个驾驶舱网站，发文章仅为了记录，如果牛人路过，欢迎指点

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秒执行一遍操作。

阿赖（在线ing）

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flask+html+js做驾驶舱网站（一）

1、首先在html中利用table组件创建了一个表的位置，表的字段名分别是排名，事业部，当月销售，也就是th的部分，那么需要填入的就是tbody部分。这里的id或者class是样式，只是为了做好看的，咱们可以先不管他，js文件可以到官网去下，jquery也是，这两个是通用样式，如果你也姓赖，那你可以到这个百度云盘自取。首先效果是表格字段名不动，表格滚动，为了方便查找，在tbody标签位置加入一个class = 'mytable'，这个css样式是不存在的，只是为了方便定位查找。
复制链接

扫一扫