一站制造工业项目之用flask实现前后端交互可视化

这是在整个程序的部署下用flask框架实现前后端的交互

首先我们要有之前理解的文章分层及已经配置好的环境下，并要有虚拟机，在文章末尾我会发出来

①开启我们的OneMake虚拟机，

②将快照切换到ST层

③ 用FinalShell连接好我们的虚拟机

 ④启动相关的环境镜像集群

⑤如果发现在pyechart上面运行出现下面报错

那么就说明spark submit怎么运行起来，我们需要进入到spark 容器里面

docker exec -it spark bash

执行下面语句

start-thriftserver.sh \

--name sparksql-thrift-server \

--master yarn \

--deploy-mode client \

--driver-memory 1g \

--hiveconf hive.server2.thrift.http.port=10001 \

--num-executors 3 \

--executor-memory 1g \

--conf spark.sql.shuffle.partitions=2

然后jps一下看进程，发现已经启动起来了

接下来我们可以测试一下

beeline -u jdbc:hive2://spark.bigdata.cn:10001 -n root -p 123456

select count(1);

发现spark sql语句可以执行，那么环境就没问题了

我们打开DataGrip，连接上我们的spark与hive（至于环境的配置资料里面都有）

在这里面可以看见我们的表信息及可以使用spark sql语句查询

接下来我们打开pycharm，运行我们的项目代码

在itcast里面存放着我们的html代码及我们项目的主程序入口EntranceApp.py

那就开始编写我们的程序代码

首先实例化flask对象

app = Flask(__name__)

解决浏览器中json数据，中文无法展示的问题

app.config['JSON_AS_ASCII']=False

#配置连接,spark
def get_conn():
    conn = hive.connect(
        host="192.168.88.100",
        username="root",
        database="one_make_st",
        password="123456",
        auth="CUSTOM",
        port=10001
    )
    cursor=conn.cursor()
    return conn,cursor
#关闭连接
def close_conn(conn,cursor):
    if cursor:
        cursor.close()
    if conn:
        conn.close()
#查询函数
def query(sql,*args):
    conn,cursor = get_conn()
    cursor.execute(sql,args)
    res = cursor.fetchall()
    close_conn(conn,cursor)
    return res

#将html代码展示

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

接下来开始编写我们的sql语句，及提交到前端数据

def pyspark_data1():
    res1 = query("SELECT t.oil_province,sum(t.wokerorder_num) AS value \
                 FROM  one_make_st.subj_worker_order t \
                 GROUP BY oil_province \
                 ORDER BY value DESC \
                 LIMIT 10")
    zuozhong_key = []
    zuozhong_value= []
    for i in res1:
        zuozhong_key.append(i[0])
        zuozhong_value.append(i[1])
    return zuozhong_key,zuozhong_value
@app.route("/sparkjson1")
#返回给前端数据
def sparkjson1():
    data=pyspark_data1()
    print(data)
    return jsonify({"char1_name": data[0], "char1_value": data[1]})

里面的sql语句这是查询每个省的工单数量有多少

然后我们只需要在index.js上编写接收参数，并将参数运用在图表当中即可，下面就是一个例子

$(function(){
    // char_1();
    // function char_1() {
        let myChart = echarts.init(document.querySelector(".zhuzhuangtu1 .chart"));

        $.ajax({
            url:"http://127.0.0.1:5000/sparkjson1",
            success:function(data){
                option = {
                    tooltip: {
                      trigger: 'axis',
                      axisPointer: {
                        type: 'shadow'
                      }

                    },
                    grid: {
                      left: '3%',
                      right: '4%',
                      bottom: '3%',
                      containLabel: true
                    },
                    xAxis: [
                      {
                        type: 'category',
                        data: data.char1_name,
                        axisTick: {
                          alignWithLabel: true
                        },
                        axisLabel:{
                            textStyle: {
                                color: '#B0CEFC'  // 图例文字颜色
                            }
                        }
                      }
                    ],
                    yAxis: [
                      {
                        type: 'value',
                        axisLabel:{
                            textStyle: {
                                color: '#B0CEFC'  // 图例文字颜色
                            }
                        }
                      }
                    ],
                    series: [
                      {
                        name: 'Direct',
                        type: 'bar',
                        barWidth: '60%',
                        data: data.char1_value,
                        itemStyle: {
                            normal: {
                                color: '#4ad2ff'
                            },
                        }
                      }
                    ]
                  };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            error:function(xhr, type, errorThrown){
            }
        });
        window.addEventListener("resize",function(){
            myChart.resize();
        });

    // }
});

让我们打开游览器看看最终的效果是什么样的

这就是最终效果图了，只需连接一个图表怎么制作后，剩下的都很简单。

下面就是所有的集群及代码链接，需要的人可以拿

链接：https://pan.baidu.com/s/15oOg_g4k1YV50LnwvKsLPw?pwd=khr6 
提取码：khr6