使用flask快速搭建web应用_flask 开发web-CSDN博客

本文链接：https://blog.csdn.net/alex190824/article/details/143642160

文章目录

前言
一、Flask是什么？
二、使用步骤
总结

前言

在数据处理分析过程中，有快速搭建数据展示的应用场景需求，此时可以使用Flask快速进行web应用环境构建。本示例演示创建web应用及显示渲染echart折线图。

一、Flask是什么？

Flask 是一个用 Python 编写的轻量级 Web 应用框架。Flask 基于 WSGI（Web Server Gateway Interface）和 Jinja2 模板引擎，旨在帮助开发者快速、简便地创建 Web 应用。

二、使用步骤

1.引入包

需要引入flask框架，我们需要使用路由及渲染模板，服务端应用添加如下引用：

from flask import Flask, render_template

2.简单的服务端应用程序

编写简单的hello world，启动运行则可以通过http://localhost:8080 访问：

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'hello world'
    
if __name__ == '__main__':
    app.run(port=8080, debug=True)

3.添加用于显示折线图代码

构造返回的data数据，应用中可以根据实际情况进行调整，比如从指定库中获取
render_template函数中传入指定的页面及数据

# 设置图表信息及渲染指定页面
@app.route('/show')
def get_data():
    data = {
        "xaxis": [1, 2, 3, 4, 5, 6, 7],
        "series": [150, 230, 224, 218, 135, 147, 260]
    }
    return render_template('line-simple.html', page_title='echart demo', data=data)

4. 在templates目录下，创建用于渲染的line-simple.html页面

我们可以从echart官网下载相应的示例代码：https://echarts.apache.org/examples/zh/editor.html?c=line-simple

在前端html页面中，做如下三处调整，需要有一定的前端基础知识：

// js 中 获取后端返回的data对象
var data = JSON.parse('{{ data|tojson }}');

// option中设置相应的坐标及序列
option = {
  xAxis: {
      type: 'category',
      data: data['xaxis']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
        data: data['series'],
        type: 'line'
    }
  ]
};

设置后，启动运行，则可以通过http://localhost:8080/show 访问页面
在这里插入图片描述

5.完整的代码结构

前端代码

<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=line-simple
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <title>
        {% if page_title %}
            {{ page_title }}
        {% endif %}
    </title>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">

  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script>
  
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-gl/2/files/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-stat/latest/files/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-graph-modularity extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-graph-modularity/2/files/dist/echarts-graph-modularity.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var data = JSON.parse('{{ data|tojson }}');
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    option = {
  xAxis: {
      type: 'category',
      data: data['xaxis']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
        data: data['series'],
        type: 'line'
    }
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

后端代码

from flask import Flask, render_template

app = Flask(__name__)

# 默认方法
@app.route('/')
def hello_world():
    return 'hello world'

# 设置图表信息及渲染指定页面
@app.route('/show')
def get_data():
    data = {
        "xaxis": [1, 2, 3, 4, 5, 6, 7],
        "series": [150, 230, 224, 218, 135, 147, 260]
    }
    return render_template('line-simple.html', page_title='echart demo', data=data)

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