Web开发Python实现Web服务器(Flask测试统计图表)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web开发Python实现Web服务器(Flask测试统计图表)相关的知识,希望对你有一定的参考价值。

1、前言

提示:Flask是一个用python语言基于Werkzeug工具箱编写的轻量级web开发框架,它主要面向需求简单,项目周期短的小应用。

Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 。Flask使用 BSD 授权。

4、Flask测试网页(统计图表)

4.1 基于echarts的统计图的网页

https://echarts.apache.org

  • ECharts,一个使用 javascript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

  • ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。

  • test_echarts.py:

#***************************************************************
#   Purpose:   基于echarts的统计图的网页(Flask的web服务器)
#   Author:    爱看书的小沐
#   Date:      2022-5-29
#   Languages: python
#   Platform:  python 3.9 win64
#   OS:        Win10 win64
# **************************************************************

from flask import Flask, Response, request
from flask import render_template, make_response, jsonify, send_from_directory
from io import FileIO
import os
import mimetypes
from flask_cors import CORS, cross_origin

app = Flask(__name__)
# cors = CORS(app)
CORS(app, supports_credentials=True)
# CORS(app, resources=r/*)
# cors = CORS(app, resources=r"/api/*": "origins": "*")

# 跨域支持
@app.after_request
def af_request(resp):     
    """
    #请求钩子,在所有的请求发生后执行,加入headers。
    :param resp:
    :return:
    """
    resp = make_response(resp)
    resp.headers[Access-Control-Allow-Origin] = *
    resp.headers[Access-Control-Allow-Methods] = GET,POST
    resp.headers[Access-Control-Allow-Headers] = x-requested-with,content-type
    return resp

# 只允许路径为/login跨域!
@app.route(/login)
@cross_origin()
def data():
    return jsonify(name:tomcat)

@app.route(/test)
@cross_origin(supports_credentials=True)
def hello():
    name = request.args.get("name", "World")
    return fHello, name!

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

@app.route("/<path>")
def get_cesiumfile(path):
    directory = os.getcwd() + "/static/echarts-5.3.2/package/dist/"
    response = make_response(send_from_directory(directory, path.encode(utf-8).decode(utf-8), as_attachment=False))
    mime_type = mimetypes.guess_type(path)[0]
    if path.endswith(".js") :
       mime_type = "application/javascript"
    response.headers[Content-Type] = mime_type
    print(directory, path, mime_type)
    return response

@app.route(/favicon.ico)
def favicon():
    return send_from_directory(os.path.join(app.root_path, static), favicon.ico
        , mimetype=image/vnd.microsoft.icon)

if __name__ == __main__:
   app.run(debug = True)
  • 运行结果:

4.2 基于Highcharts.js的统计图的网页

https://www.highcharts.com.cn/

Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且提供给个人学习、个人网站和非商业用途使用。

Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表,其中很多图表可以集成在同一个图形中形成混合图。

  • 开源 Highcharts 最重要的特点之一就是:你都可以下载源码并可以对其进行编辑。基于开源社区我们可以第一时间获取用户的需求、及时的 Bug 修复及吸收社区贡献。
  • 纯 JavaScript Highcharts 完全基于 HTML5 技术,不需要再客户端安装任何插件,如 Flash 或 Java。此外你也不用配置任何服务端环境,不需要 php、Tomcat、ASP.NET 等,只需要两个 JS 文件即可运行。
  • 丰富的图表类型 Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表,其中很多图表可以集成在同一个图形中形成混合图。
  • 支持多坐标轴 多个数据进行对比这是非常常见的需求,Highcharts 可以让你为每个类型的数据添加坐标轴,每个轴可以定义放置的位置,所有的设置都可以独立生效,包括旋转、样式设计和定位,当然也支持多个数据共用一个坐标轴。

  • test_echarts.py:
#***************************************************************
#   Purpose:   基于Highcharts.js的统计图的网页(Flask的web服务器)
#   Author:    爱看书的小沐
#   Date:      2022-5-29
#   Languages: python
#   Platform:  python 3.9 win64
#   OS:        Win10 win64
# **************************************************************
from flask import Flask, Response, request
from flask import render_template, make_response, jsonify, send_from_directory
from io import FileIO
import os
import mimetypes
from flask_cors import CORS, cross_origin

app = Flask(__name__)
cors = CORS(app)
# CORS(app, supports_credentials=True)
# CORS(app, resources=r/*)
# cors = CORS(app, resources=r"/api/*": "origins": "*")

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

@app.route("/<path:path>")
def get_staticfile(path):
    directory = os.getcwd() + "/static/"
    print(directory)
    response = make_response(send_from_directory(directory, path.encode(utf-8).decode(utf-8), as_attachment=False))
    mime_type = mimetypes.guess_type(path)[0]
    if path.endswith(".js") :
       mime_type = "application/javascript"
    response.headers[Content-Type] = mime_type
    print(directory, path, mime_type)
    return response

@app.route(/favicon.ico)
def favicon():
    return send_from_directory(os.path.join(app.root_path, static), favicon.ico
        , mimetype=image/vnd.microsoft.icon)

if __name__ == __main__:
   app.run(debug = True)
  • 运行结果:

结语

如果您觉得该方法或代码有一点点用处,可以给作者点个赞,或打赏杯咖啡;╮( ̄▽ ̄)╭ 如果您感觉方法或代码不咋地//(ㄒoㄒ)//,就在评论处留言,作者继续改进;o_O??? 如果您需要相关功能的代码定制化开发,可以留言私信作者;(✿◡‿◡) 感谢各位童鞋们的支持!( ´ ▽´ )ノ ( ´ ▽´)っ!!!

以上是关于Web开发Python实现Web服务器(Flask测试统计图表)的主要内容,如果未能解决你的问题,请参考以下文章

Web开发Python实现Web服务器(Flask测试后台框架模板)

Web开发Python实现Web图表功能(pyecharts,Flask)

Python web框架 flask

Python 基于Flask的Web开发用户登录 注册

[Python WEB开发] 使用WSGI开发类Flask框架

手把手教你快速吃透Flask web开发!仅分享3天!