创建自己的数据表

基本表


进入cmd查看表结构、

    登录数据库: mysql -uroot -p123
    导入大数据库:source E:\xx\x.sql
    查看数据库:show databases;
    进入到需要的数据库中:use 数据库名;
    查看里面的表:show tables;
    查看表结构:describe 表名;
        这个在后面flask框架中需要用到
    查看表里的数据: select * from 表名;

查出来用到的大致是
基本表
基本表


生成flask框架,安装sqlalchemy包

进入pyCharm, 新建一个flask项目
进入到file –>Settings–>project
点击加号,数据加入的包安装就OK了
添加from flask_sqlalchemy import SQLAlchemy 没有报错就成功了


连接数据库

在项目的目录下新建一个config.py的文件写入数据库配置

    DIALECT = 'mysql'           
    DRIVER ='mysqldb'
    USERNAME = 'root'
    PASSWORD = 'xiaolong0130'
    HOST = 'localhost'
    PORT = '3306'
    DATABASE = 'hua'

    SQLALCHEMY_DATABASE_URI="{}+{}://{}:{}@{}:{}/{}?charset=utf8".format(DIALECT,DRIVER,USERNAME,PASSWORD,HOST,PORT,DATABASE)
    SQLALCHEMY_TRACK_MODIFICATIONS=False

在app的目录下连接一下

    import config     //引入文件
    app.config.from_object(conffig)  //建立连接

    db = SQLAlchemy(app)  //顺便建立一下模型,

可以用 db.create_all() 检验一下是否连接成功


建立数据模型

找去之前查找出的那个表
数据结构需根表中的一样
    class aa(db.Model):             
    __tablename__ = 'huahua'            //表名
    id = db.Column(db.Integer,primary_key=True)        
    name = db.Column(db.String(20),nullable=True
    nums = db.Column(db.Integer,nullable=True)

里面的基本词汇
基本表


导入到HTML的页面

在根文件夹下的templates文件夹下建一个index.html文件
建一个函数将数据库导入


    from flask import render_template    需引用一下

    @app.route('/') 
    def hello_world():
        cc = aa.query.all()            //cc接收表里的所有数据
        return render_template('index.html',cc=cc)       //将其传入到HTML中

利用echars可视

利用jinja2 将传入入的数据在js里显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height: 500px;"></div>
</body>
<script>
    var aa = echarts.init(document.getElementById('main'))
    var options = {
        title:{
            text: '花店销售量'
        },
        tooltip:{
            trigger: 'axis'
        },
        legend:{
            data:['销量']
        },
        xAxis:{
            data:[
                {% for i in cc%}
                    '{{ i.name}}',
                {% endfor %}
            ]
        },
        yAxis:{
                type:'value'
        },
        series:{
            name:'花' +
                'g花',
            type: 'bar',
            data: [
                 {% for i in cc%}
                    '{{ i.nums}}',
                {% endfor %}
            ]
        }
    }
    aa.setOption(options)
</script>
</html>

最后的结果

基本表


爱学习爱生活