flask+sqlalchemy+echarts动态显示数据

最新推荐文章于 2024-06-25 13:49:21 发布

yeyu_xing

最新推荐文章于 2024-06-25 13:49:21 发布

阅读量941

点赞数 6

分类专栏： Python

本文链接：https://blog.csdn.net/yeyu_xing/article/details/115318997

版权

Flask ECharts 用户数据数据库操作前端可视化

关键词由CSDN通过智能技术生成

Python 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、创建测试数据

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `id` bigint(20) NOT NULL COMMENT '主键ID',
  `name` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '姓名',
  `age` int(11) NULL DEFAULT NULL COMMENT '年龄',
  `email` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '邮箱',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (1, 'Jone', 18, 'test1@baomidou.com');
INSERT INTO `user` VALUES (2, 'Jack', 20, 'test2@baomidou.com');
INSERT INTO `user` VALUES (3, 'Tom', 28, 'test3@baomidou.com');
INSERT INTO `user` VALUES (4, 'Sandy', 21, 'test4@baomidou.com');
INSERT INTO `user` VALUES (5, 'Billie', 24, 'test5@baomidou.com');

SET FOREIGN_KEY_CHECKS = 1;

二、flask项目中创建数据实体类和数据库连接类

1、在beans包中创建User.py文件用于数据封装

from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy import Column, INT, VARCHAR, BIGINT

Base = declarative_base()


class User(Base):
    __tablename__ = 'user'
    id = Column(BIGINT, primary_key=True)
    name = Column(VARCHAR)
    age = Column(INT)
    email = Column(BIGINT)

    def __repr__(self):
        return '{} {} {}'.format(self.name, self.age, self.email)

2、在utils包中创建operation.py文件用于数据库操作

from sqlalchemy import create_engine
from sqlalchemy.orm import sessionmaker


class MysqlOperation:
    username = 'root'
    password = '12345'
    url = 'localhost'
    port = '3306'
    db = 'study'
    __session = None

    @classmethod
    def get_session(cls):
        __engine = create_engine(
            'mysql+pymysql://{}:{}@{}:{}/{}'.format(cls.username, cls.password, cls.url, cls.port, cls.db))
        Session = sessionmaker(bind=__engine)
        cls.__session = Session()
        return cls.__session

    @classmethod
    def close(cls):
        if cls.__session:
            cls.__session.close()

    @classmethod
    def commit(cls):
        if cls.__session:
            cls.__session.commit()

三、在app.py文件中定义flask访问路径

from flask import Flask, render_template, jsonify
from beans.User import User
from utils.operation import MysqlOperation

app = Flask(__name__)


@app.route("/get_users")
def get_users():
    session = MysqlOperation.get_session()
    users = session.query(User).all()
    x_data = [str(i).split(' ')[0] for i in users]
    y_data = [str(i).split(' ')[1] for i in users]
    data = {
        'x_data': x_data,
        'y_data': y_data
    }
    MysqlOperation.close()
    return jsonify(data)


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


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

四、templates目录中创建echarts.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{{ url_for('static', filename='jquery-3.5.1.min.js') }}"></script>
    <script src="{{ url_for('static', filename='echarts.min.js') }}"></script>
</head>
<body>
<div style="width: 600px;height: 400px" id="main"></div>

<script>
    let myChart = echarts.init(document.getElementById("main"));
    let option = {
        yAxis: {},
        xAxis: [{
            type: "category",
            data: []
        }],
        legend: {},
        series: [{
            name: '折线图',
            type: 'line',
            data: []
        }]
    }
    myChart.setOption(option);
    $.get("/get_users").done(function (data) {
        myChart.setOption({
            xAxis: {
                type: "category",
                data: data.x_data
            },
            series: {
                name: '折线图',
                type: 'line',
                data: data.y_data
            }
        })
    })
</script>
</body>
</html>