螺蛳粉数据大屏部分制作详解

在app.py：根路由，返回index.html模板。/bar：返回柱状图所需的数据。/line：返回折线图所需的数据。/map：返回地图所需的数据。/pie：返回饼图所需的数据。/wordcloud：返回词云图所需的数据。/today：返回今日销售额数据。/total：返回累计销售额数据。每个路由都调用utils.py中的函数来从数据库获取数据，然后返回JSON格式的响应。styles.css定

参宿三744

434人浏览 · 2024-12-26 15:02:46

参宿三744 · 2024-12-26 15:02:46 发布

本文将详细介绍如何使用提供的代码文件构建一个数据大屏应用。数据大屏应用通常用于展示关键数据和分析结果，以便用户能够快速获取重要信息。以下是制作数据大屏的详细步骤和解释。

1. 项目结构

首先，了解项目的基本结构和文件组成：

app.py：Flask应用的主文件，负责处理路由和返回数据。
utils.py：包含数据库操作和数据查询的实用函数。
styles.css：定义数据大屏的样式。
bar.js、pie.js、today.js、total.js、wordcloud.js：分别用于渲染柱状图、饼图、今日销售额、累计销售额和词云图的JavaScript文件。
index.html：数据大屏的HTML模板，包含图表容器和样式引用。

2. Flask应用设置

2.1 创建Flask应用

在app.py中，我们首先导入Flask类和其他必要的模块，然后创建一个Flask应用实例：

python

from flask import Flask, jsonify, render_template
import utils

app = Flask(__name__)

2.2 配置JSON编码

为了确保返回的JSON数据支持中文编码，我们配置了JSON_AS_ASCII为False：

python

app.config['JSON_AS_ASCII'] = False

2.3 启动应用

最后，我们设置应用在所有网络接口上监听，并开启调试模式：

python

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

3. 数据处理和路由定义

3.1 数据路由

在app.py中，我们定义了几个路由来处理不同的数据请求：

/：根路由，返回index.html模板。
/bar：返回柱状图所需的数据。
/line：返回折线图所需的数据。
/map：返回地图所需的数据。
/pie：返回饼图所需的数据。
/wordcloud：返回词云图所需的数据。
/today：返回今日销售额数据。
/total：返回累计销售额数据。

每个路由都调用utils.py中的函数来从数据库获取数据，然后返回JSON格式的响应。

4. 数据库操作

utils.py包含与MySQL数据库交互的函数。这些函数用于执行SQL查询并返回结果。

import pymysql  # 导入pymysql模块，用于数据库操作

# 创建数据库连接和游标的函数
def get_conn():
    # 使用pymysql.connect()方法连接到数据库
    # 其中包含了数据库服务器地址、端口、用户名、密码、数据库名称和字符集等信息
    conn = pymysql.connect(
        host="abc001",    # 数据库服务器地址
        port=3306,           # 数据库服务器端口号
        user="root",        # 数据库用户名
        password="abc123456", # 数据库用户密码
        db="abc",         # 要连接的数据库名称
        charset="utf8"       # 使用的字符集
    )
    # 创建一个游标对象，用于执行SQL查询和获取结果
    cursor = conn.cursor()
    # 返回数据库连接对象和游标对象
    return conn, cursor

# 关闭数据库连接和游标的函数
def close_conn(conn, cursor):
    # 如果游标对象存在，则关闭游标
    if cursor:
        cursor.close()
    # 如果数据库连接对象存在，则关闭连接
    if conn:
        conn.close()

# 执行SQL查询的函数
def query(sql):
    """
    :param sql: SQL查询语句字符串
    :return: 查询结果，以元组形式返回
    """
    # 调用get_conn函数获取数据库连接和游标
    conn, cursor = get_conn()
    # 使用游标对象的execute方法执行SQL查询语句
    cursor.execute(sql)
    # 使用游标对象的fetchall方法获取所有查询结果
    res = cursor.fetchall()
#........此处省略........#
# 主函数，用于测试查询结果
if __name__ == "__main__":
    # 调用get_province_data函数，打印省份销售数据
    r = get_province_data()
    print(r)

注：此处是部分代码展示非完全代码