文章目录

😥 背景

🌟 打破数据库恐惧症！

很多初学者面对数据库开发时都会感到畏惧：

  • 复杂的安装配置过程
  • 晦涩难懂的 SQL 语句
  • 黑乎乎的终端界面
  • 前后端联调的困难

本文会通过 flask + echarts + mysql 整合一个简单的例子，带新手小白窥探前后端结合项目。

本文将用 最简单直观的方式，带你完成：
✅ 可视化操作 MySQL 数据库（无需记命令）
✅ Flask 后端无缝连接数据库
✅ 实时数据可视化展示

📌 本文是Flask系列教程第三期，完整项目代码可在文末获取

🛠️ 数据库配置（Navicat版）

1.创建数据库连接

打开 Navicat （建议使用 Navicat Premium Lite 17，因为免费），新建一个连接，为了方便管理，每一类项目都建一个连接。

在这里插入图片描述

选择 Mysql

在这里插入图片描述

2.配置连接

具体如下，建议跟我使用同样的配置，这样后期就不用修改代码了，再点击测试连接看是否成功连接到本地 Mysql。

在这里插入图片描述

ps：本文专注于 Flask 讲解，关于数据库的安装和测试不再赘述

3.创建项目数据库

为本项目建一个数据库，先双击连接，再右键选择 “新建数据库”。

在这里插入图片描述

4.配置数据库，取名 demo，具体如下。

在这里插入图片描述

标绿说明成功了

在这里插入图片描述

💡 专业提示：使用可视化工具可以避免 80% 的配置错误！

💻 Flask 数据库整合

环境准备

1.安装必备库

pip install flask_sqlalchemy
pip install pymysql

北外源加速

-i https://mirrors.bfsu.edu.cn/pypi/web/simple

下载显示成功后输入 pip list 查看，如果严格按照上一篇的步骤，flask 版本为 1.1.4，那么这次的两个库版本就是 2.5.1 和 1.0.2。

在这里插入图片描述

2.导入

from flask_sqlalchemy import SQLAlchemy
from flask import Flask
import pymysql

数据库连接配置

1.使用第一节的配置

用户名：root、密码：123456、主机名：localhost、端口号：3306、数据库名：demo

app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:123456@localhost:3306/demo'

2.新建数据表

定义数据模型, name 表示柱状图中数据的名称（横坐标）、counts 表示数量（纵坐标）

# 柱状图表
class Bar(db.Model):
    __tablename__ = "bar"
    id = db.Column(db.Integer, primary_key=True)         # 主键
    name = db.Column(db.String(64), nullable=False)      # 名称
    counts = db.Column(db.Integer)                       # 数量

3.初始化数据库表

新建文件 models.py，用来初始化数据库表。

在这里插入图片描述

models.py

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()       # 实例化的数据库

# 柱状图表
class Bar(db.Model):
    __tablename__ = "bar"
    id = db.Column(db.Integer, primary_key=True)        # 主键
    name = db.Column(db.String(64), nullable=False)     # 名称
    counts = db.Column(db.Integer)                      # 数量


def init_db(app):
    """初始化数据库"""
    app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:123456@localhost:3306/demo'
    app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False     # 消除警示信息
    db.init_app(app)

    with app.app_context():
        db.create_all()  # 创建所有表
        # db.drop_all()  # 删除数据库（慎用）


#=============== 测试是否成功，运行后必须注释掉 ===============#
# from flask import Flask
# app = Flask(__name__)
# init_db(app)
# =============== 测试是否成功，运行后必须注释掉 ===============#

4.效果

如果要测试是否连接成功的话就打开底部代码并运行，运行后必须再注释掉。

运行 models.py，程序没有报错，且 demo 数据库中出现新表则成功。

在这里插入图片描述

顺便在表中插入一些数据，可以手动操作也可以使用函数

在这里插入图片描述

动态数据可视化

1.后端数据接口（main.py）

先从 models.py 中导入 Bar 类，再通过 Bar 类查询数据库，将查询出来的数据封装后传给前端

from flask import Flask,render_template
from models import Bar, init_db     # 从 models.py 中导入Bar类和函数init_db

app = Flask(__name__)

# 初始化数据库
init_db(app)

@app.route('/bar')
def show_bar():
    # 获取数据库数据
    bars = Bar.query.all()

    bar_data = {
            'names': [bar.name for bar in bars],
            'counts': [bar.counts for bar in bars]
        }
    return render_template('bar.html', chart_data=bar_data)

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

2.前端柱状图展示

在 templates 文件夹里新建 bar.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据库动态柱状图</title>
    <!-- 引入 ECharts 库 -->
    <script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
    <style>
        #chart {
            width: 800px;
            height: 500px;
            margin: 30px auto;
        }
        h1 {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>数据库数据可视化</h1>
    <div id="chart"></div>

    <script>
        // 初始化图表
        var myChart = echarts.init(document.getElementById('chart'));
        
        // 从Flask模板获取数据
        var chartData = {
            names: {{ chart_data.names|tojson }},
            counts: {{ chart_data.counts|tojson }}
        };
        
        // 配置图表选项
        var option = {
            title: {
                text: '数据库数据柱状图',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: chartData.names,
                axisLabel: {
                    rotate: 30  // 如果名称太长可以旋转30度
                }
            },
            yAxis: {
                type: 'value',
                name: '数量'
            },
            series: [{
                name: '数量',
                type: 'bar',
                data: chartData.counts,
                itemStyle: {
                    color: '#3398DB'
                },
                label: {
                    show: true,
                    position: 'top'
                }
            }]
        };
        
        // 应用配置
        myChart.setOption(option);
        
        // 响应窗口大小变化
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>

📊 最终效果

改变图表数据后，柱状图会跟着变化，实现动态整合。

在这里插入图片描述

本文输出内容过多，读者需慢慢消化，所以其他东西留到下一期，如果喜欢，点赞关注不迷路 🐾

💎 项目亮点

  • 全程低代码操作，告别命令行恐惧
  • 从数据库到前端展示完整流程
  • 简洁的例子实现图表动态更新
  • 生产环境可用架构

🎁 仓库地址

完整项目代码 https://gitee.com/kyrian/flask-demo.git

🔄 遇到问题？欢迎在评论区交流！

# flask # mysql # echarts
Logo
DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

cover

【计算几何 十五章】可见性图：求最短路径

avatar DAMO开发者矩阵
cover

赛逸展2027扩容3.5万㎡双馆联动，展位告急

avatar DAMO开发者矩阵

联合开源！因时机器人携手上海交大、复旦发布HandEdit数据集与评测基准

近日，由因时机器人、上海交通大学和复旦大学等联合完成的正式开源。该项目研究：在尽量保留原始场景、物体、视角和交互内容的前提下，将画面中的人手或手臂替换为指定的机器人构型。围绕这一任务，HandEdit 提供了配对数据、统一评测协议和开源工具，供相关方法训练与比较使用。这并不是普通的“换手”视觉特效。编辑结果既要完整移除原人手，又要保持物体状态、接触关系和背景不变；新生成的机器人还需符合目标 URD

avatar DAMO开发者矩阵