Python做电子看板

原创

mob64ca12d0a366 2024-10-22 04:21:51 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12d0a366的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用Python制作电子看板

简介

电子看板，顾名思义，通常是用电子显示屏显示信息的一种工具。它可以展示实时数据，如天气、新闻、会议日程等。Python作为一门强大的编程语言，提供了许多库来帮助我们快速实现电子看板的功能。本文将通过一个简单的示例，帮助读者理解如何使用Python创建一个电子看板，并展示如何使用Flask和HTML进行数据展示。

电子看板的架构

在设计电子看板时，我们可以采用以下架构：

数据源：获取外部数据（如天气、新闻等）。
后端：使用Python处理数据，并通过API提供给前端。
前端：通过HTML和JavaScript展示数据。

关系图示例（ER图）：

erDiagram
    DATA_SOURCE ||--o{ API_CALL : fetch
    API_CALL ||--o{ DISPLAY : send
    DISPLAY ||--|{ USER : show

环境准备

首先，请确保您的系统中已安装Python和Flask库。可以通过以下命令安装Flask：

pip install Flask

实现电子看板

以下是一个简单的电子看板示例，展示当前的天气情况。我们将使用OpenWeatherMap API作为数据源。

1. 后端代码

创建一个名为server.py的文件，编写以下代码：

from flask import Flask, jsonify, render_template
import requests

app = Flask(__name__)

API_KEY = '您的OpenWeatherMap API密钥'
CITY = 'Shanghai'

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/weather')
def weather():
    url = f'
    response = requests.get(url)
    data = response.json()
    weather_info = {
        'temp': data['main']['temp'],
        'description': data['weather'][0]['description'],
        'city': data['name'],
    }
    return jsonify(weather_info)

if __name__ == '__main__':
    app.run(debug=True)

此代码创建了一个Flask应用。根路由/渲染HTML模板，而路由/weather则返回天气数据的JSON格式。

2. 前端代码

在与server.py同一目录下创建一个名为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>电子看板</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
        .weather { font-size: 2em; }
    </style>
</head>
<body>
    实时天气信息
    <div class="weather" id="weather">
        加载中...
    </div>

    <script>
        function fetchWeather() {
            fetch('/weather')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('weather').innerHTML =
                        `城市: ${data.city}<br>
                         温度: ${data.temp} °C<br>
                         天气: ${data.description}`;
                })
                .catch(error => {
                    console.error('出现错误:', error);
                    document.getElementById('weather').innerHTML = '无法获取天气信息';
                });
        }
        setInterval(fetchWeather, 10000);
        fetchWeather();  // 初次加载
    </script>
</body>
</html>

在此HTML文件中，我们使用JavaScript的fetch API从后端获取天气数据并动态更新页面。