Armbian环境中使用python生成一个网页

原创已于 2024-11-12 21:42:32 修改 · 261 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#oracle #数据库

于 2024-11-11 16:18:16 首次发布

要创建一个数据库来存储温度信息，并通过Web页面图形化展示这些信息，可以使用以下步骤。我们将使用SQLite作为数据库，Flask作为Web框架，和Chart.js来图形化展示数据。

步骤一：设置Python环境
安装Python（如果尚未安装）：

sudo apt update
sudo apt install python3 python3-pip

安装所需的Python库：

pip3 install flask sqlite3 pandas

注意：这种方法安装库时，可能会遇到错误，当前的Python环境是外部管理的。这意味着不能直接使用 pip3 在系统范围内安装Python包。
有几种方法可以解决此问题

方法一：使用虚拟环境
1.安装 python3-venv（如果尚未安装）：
sudo apt install python3-venv
2.创建虚拟环境：
python3 -m venv myenv
3.激活虚拟环境：
source myenv/bin/activate
4.在虚拟环境中安装所需的Python包：
pip install flask pandas
5.运行你的Python脚本： 在虚拟环境中运行你的Python脚本：
python app.py
6.退出虚拟环境： 在终端中运行以下命令：
deactivate
7.进入虚拟环境： 导航到包含虚拟环境的目录，然后运行以下命令激活虚拟环境：
source myenv/bin/activate
在Python中，虚拟环境本质上是一个包含特定Python解释器和相关包的目录。要卸载虚拟环境，只需删除该目录即可。以下是具体步骤：
deactivate
rm -rf myenv

方法二：使用 pipx
1.安装 pipx（如果尚未安装）：
sudo apt install pipx
2.确保 pipx 的路径已添加到你的环境变量中：
pipx ensurepath
3.使用 pipx 安装所需的Python包：
pipx install flask
pipx install pandas

方法三：使用 apt 安装系统包
1.使用 apt 安装系统包：
sudo apt install python3-flask python3-pandas

步骤二：创建SQLite数据库
创建数据库文件：创建一个名为 temperature.db 的SQLite数据库文件，并创建一个表来存储温度信息。

import sqlite3

conn = sqlite3.connect('temperature.db')
c = conn.cursor()
c.execute('''
    CREATE TABLE IF NOT EXISTS temperature (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
        value REAL
    )
''')
conn.commit()
conn.close()

步骤三：创建Flask应用
创建Flask应用：创建一个名为 app.py 的文件，并添加以下代码：

from flask import Flask, request, render_template, jsonify
import sqlite3
import pandas as pd

app = Flask(__name__)

def get_db_connection():
    conn = sqlite3.connect('temperature.db')
    conn.row_factory = sqlite3.Row
    return conn

@app.route('/')
def index():
    conn = get_db_connection()
    data = conn.execute('SELECT * FROM temperature').fetchall()
    conn.close()
    return render_template('index.html', data=data)

@app.route('/add', methods=['POST'])
def add_temperature():
    value = request.form['value']
    conn = get_db_connection()
    conn.execute('INSERT INTO temperature (value) VALUES (?)', (value,))
    conn.commit()
    conn.close()
    return jsonify({'status': 'success'})

@app.route('/data')
def data():
    conn = get_db_connection()
    df = pd.read_sql_query('SELECT * FROM temperature', conn)
    conn.close()
    return df.to_json(orient='records')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

步骤四：创建HTML模板
创建HTML模板：创建一个名为 templates/index.html 的文件，并添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Temperature Data</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h1>Temperature Data</h1>
    <form id="temperature-form">
        <input type="number" step="0.1" name="value" placeholder="Enter temperature" required>
        <button type="submit">Add Temperature</button>
    </form>
    <canvas id="temperature-chart" width="400" height="200"></canvas>
    <script>
        document.getElementById('temperature-form').addEventListener('submit', function(event) {
            event.preventDefault();
            const formData = new FormData(event.target);
            fetch('/add', {
                method: 'POST',
                body: formData
            }).then(response => response.json()).then(data => {
                if (data.status === 'success') {
                    loadChartData();
                }
            });
        });

        function loadChartData() {
            fetch('/data')
                .then(response => response.json())
                .then(data => {
                    const ctx = document.getElementById('temperature-chart').getContext('2d');
                    const chartData = {
                        labels: data.map(row => row.timestamp),
                        datasets: [{
                            label: 'Temperature',
                            data: data.map(row => row.value),
                            borderColor: 'rgba(75, 192, 192, 1)',
                            borderWidth: 1,
                            fill: false
                        }]
                    };
                    new Chart(ctx, {
                        type: 'line',
                        data: chartData,
                        options: {
                            scales: {
                                x: {
                                    type: 'time',
                                    time: {
                                        unit: 'minute'
                                    }
                                }
                            }
                        }
                    });
                });
        }

        loadChartData();
    </script>
</body>
</html>

步骤五：运行Flask应用
运行Flask应用：在终端中运行以下命令启动Flask应用：