用python写一个HTML前端,用来实时显示后端从本地数据库读出来的数据,实时更新,引入flask模块来路由,session登录
时间: 2023-11-15 22:05:02 浏览: 162
好的,下面是一个简单的实现:
1. 首先,我们需要安装 Flask 模块,在终端中执行以下命令:
```
pip install flask
```
2. 创建一个名为 `app.py` 的文件,导入 Flask 和其他需要的模块:
```python
from flask import Flask, render_template, session, redirect, url_for
import sqlite3
import time
```
3. 创建 Flask 应用程序,并设置应用程序的密钥。密钥用于加密用户会话数据。
```python
app = Flask(__name__)
app.secret_key = 'my_secret_key'
```
4. 创建一个函数来连接到本地 SQLite 数据库,并从中读取数据。在此示例中,我们将从名为 `data.db` 的数据库中读取数据。
```python
def get_data():
conn = sqlite3.connect('data.db')
c = conn.cursor()
c.execute('SELECT * FROM data')
data = c.fetchall()
conn.close()
return data
```
5. 创建一个路由,以向浏览器传递数据。在此示例中,我们将使用 `render_template` 函数将数据传递到名为 `index.html` 的模板。
```python
@app.route('/')
def index():
data = get_data()
return render_template('index.html', data=data)
```
6. 创建一个名为 `index.html` 的 HTML 模板,用于显示从数据库读取的数据。在此示例中,我们将使用 Jinja2 模板引擎来渲染模板。我们还将使用 JavaScript 和 AJAX 来实现实时更新。
```html
<!DOCTYPE html>
<html>
<head>
<title>Realtime Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Realtime Data</h1>
<table id="data-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
{% for row in data %}
<tr>
<td>{{ row[0] }}</td>
<td>{{ row[1] }}</td>
<td>{{ row[2] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
function updateData() {
$.ajax({
url: '{{ url_for("index") }}',
method: 'GET',
dataType: 'json',
success: function(data) {
$('#data-table tbody').empty();
$.each(data, function(i, row) {
$('#data-table tbody').append(
'<tr>' +
'<td>' + row[0] + '</td>' +
'<td>' + row[1] + '</td>' +
'<td>' + row[2] + '</td>' +
'</tr>'
);
});
},
complete: function() {
setTimeout(updateData, 1000);
}
});
}
$(document).ready(function() {
updateData();
});
</script>
</body>
</html>
```
在此模板中,我们使用 `for` 循环来迭代从 Flask 应用程序传递的数据,并将其添加到 HTML 表格中。我们还使用 JavaScript 和 AJAX 来定期更新数据。
7. 运行应用程序。在终端中运行以下命令:
```
python app.py
```
然后,打开浏览器并访问 `http://localhost:5000/`,即可看到实时更新的数据。
阅读全文