echarts异步请求后台数据(flask, express, beego版本)

Andy Dennis

已于 2022-03-15 15:16:36 修改

阅读量1.2k

点赞数 2

分类专栏：后端开发框架学习文章标签： echarts beego Express Flask

于 2021-02-01 15:11:01 首次发布

本文链接：https://blog.csdn.net/weixin_43850253/article/details/113500745

版权

后端开发同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

框架学习

9 篇文章 0 订阅

订阅专栏

前言

echarts是一个挺好的JS库, 官网值得一看。
在这里插入图片描述
另外本文会用flask, express, beego三个版本搭建后台服务器。案例虽然简单，但仍然有一些值得学习的地方。
最终实现的效果图如下(成绩随机产生):

在这里插入图片描述

项目结构

在这里插入图片描述

前端部分

echarts.min.js 和 jquery 分别点击这两个链接下载，并把名字改为和上图一致的名字(若需要修改的话，如果是按照这两个链接下载的，名字保持默认即可)，当然您也可以修改前端页面的引入部分:

<script src="js/echarts.min.js"></script>
<script src="js/jquery.min.js"></script>

案例参考自:echarts 菜鸟教程

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <style>
        #div {
            margin-left: 28%;
            margin-top: 18%;
        }

        #get{
            background-color: hotpink;
            color: white;
            font-size: 30px;
            width: 300px;
            margin-left: 170px;
        }
    </style>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="div">
        <div id="main" style="width: 600px;height:400px;"></div>
        <button onclick = "show()" id="get">获取数据</button>
    </div>
    <script type="text/javascript">
        show()
        function show() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            $.get('http://127.0.0.1:3000/random', res => {
                // 运行go版本(beego框架搭建)的服务器时把返回的字符串parse为json
                if (typeof(res) == 'string'){
                    res = JSON.parse(res)
                }
                console.log("res: ", res)
                data = [res['Chinese'], res['Mathematics'], res['English'],
                res['Physics'], res['History'], res['Politics'],
                res['Geography'], res['Chemistry'], res['Biology']]
                console.log("data: ", data)
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '第一个 ECharts 实例'
                    },
                    tooltip: {},
                    legend: {
                        data: ['分数']
                    },
                    xAxis: {
                        data: ["语文", "数学", "英语", "物理", "历史", "政治", "地理", "化学", "生物"]
                    },
                    yAxis: {},
                    series: [{
                        name: '分数',
                        type: 'bar',
                        data: data
                    }]
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            })
        }
    </script>
</body>

</html>

然后我们分别使用三个版本来实现。由于案例简单，这里没有采用MVC的架构来实现。

Flask

首先需要有python和pip, 若还没有的请看我之前的一篇博客:Python环境配置与入门建议（面向新手文），如果装好没有配置镜像的朋友请看这个: pip镜像管理和npm镜像管理。
弄好后下载flask这个包:

pip install flask

然后这个案例可能会报ajax跨域请求的错(在前端页面中按F12，网络那里可以看到)，我们需要下一个包

pip install flask_cors

然后新建一个文件app.py,输入如下代码:

from flask import Flask, jsonify
import random
from flask_cors import *


app = Flask(__name__)
# app.config['JSONIFY_MIMETYPE'] ="application/json;charset=utf-8"
app.config['JSON_AS_ASCII'] = False
CORS(app, supports_credentials=True)


@app.route('/random')
def datetime():
    subjects = ['Chinese', 'Mathematics', 'English', 'Physics', 'History',
		'Politics','Geography', 'Chemistry', 'Biology' ]
    dict = {i: random.randint(1, 100) for i in subjects}
    return jsonify(dict)


if __name__ == '__main__':
	app.run(host='0.0.0.0', port=3000)

然后再根目录下打开终端，输入一下命令即可看到结果。

python app.py

这里顺带记录一下，如果请求的是图片(放在 static/img 目录下)，该怎么操作。
需要添加这句导入一个函数:

from flask import make_response

@app.route('/pic/<string:img_name>')
def pic(img_name):
	pic= open('static/img/' + img_name, 'rb').read()
	response = make_response(pic)
	response.headers['content-Type'] = 'img/jpg'
	return response

result = request.post(…) …
后端的话接收图片可以这样

with open('pic.jpg', 'wb') as f:
	f.write(result.content)

至于tkinter展示图片可看 Python Tkinter GUI(三)显示图片

Express

需要先装有nodejs和npm, 若没有则看 nodejs环境搭建与新手入门, 如果装好没有配置镜像的朋友请看这个: pip镜像管理和npm镜像管理。
弄好后在一个文件夹下(随便，一般是为一个项目建的文件夹)打开终端，输入

npm install express

会发现目录多了一个node_modules, 当然你也可以加 -g 参数设置为全局下载。
在新建一个app.js的文件。输入以下代码:

var express = require('express');
var app = express();

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    next();
};
app.use(allowCrossDomain);

// 该函数参考: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// 0, 1, 2, ..., max - 1
function getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max));
}
 
app.get('/random', function (req, res) {
    subjects = ['Chinese', 'Mathematics', 'English', 'Physics', 'History',
		'Politics','Geography', 'Chemistry', 'Biology' ]
    dict = {}
    for(var i = 0; i < subjects.length; i++){
        dict[subjects[i]] = getRandomInt(101); //0 到 100
    }
    res.json(dict);
})
 
var server = app.listen(3000, function () {
    var port = server.address().port
    console.log("访问地址为 http://127.0.0.1:%s", port)
})

然后再终端下输入一下命令即可运行后端程序。

node app

或者

node app.js

Beego

首先需要配置好go：Go语言学习心路。
然后在项目目录下新建一个 app.go。
先输入以下代码(目的是为了获取依赖，您也可以直接复制最后的go代码，然后再解决依赖项，只不过代码打着打着老是看到import那里有红线怪难受的，所以我才想着先把依赖项解决):

package main

import (
	"github.com/astaxie/beego"

	"github.com/astaxie/beego/context"
)

func main() {
	beego.Get("/", func(context *context.Context) {
		context.Output.Body([]byte("<h1>hello beego</h1>"))
	})

	beego.Run("localhost:3000")
}

在终端中:

go mod init echart-grade-backend

其中echart-grade-backend是项目名称，大家也可以自行起个名称。
然后继续在终端输入

go mod tidy

接着我们修改app.go文件中的代码:

package main

import (
	"encoding/json"
	// "fmt"
	"math/rand"

	"github.com/astaxie/beego"
	"github.com/astaxie/beego/context"
	"github.com/astaxie/beego/plugins/cors"
)

func main() {
	beego.InsertFilter("*", beego.BeforeRouter, cors.Allow(&cors.Options{
		AllowAllOrigins: true}))

	beego.Get("/random", func(c *context.Context) {
		m := map[string]int{}
		subjects := []string{"Chinese", "Mathematics", "English", "Physics", "History",
			"Politics", "Geography", "Chemistry", "Biology"}
		for _, v := range subjects {
			m[v] = rand.Intn(101)
		}
		data, _ := json.MarshalIndent(m, "", "\t")
		// 返回的是字符串，不过前端会处理一下的
		c.Output.JSON(string(data), true, true)
	})

	beego.Run("localhost:3000")
}

接着在终端输入

go run app.go

项目效果

在这里插入图片描述
每点击按钮，数据就会变:

值得一提的是，前端有一句这样的判断:

if (typeof(res) == 'string'){
     res = JSON.parse(res)
}

因为go服务器返回的是字符串格式的json(string类型):
在这里插入图片描述
而我们这里python版本和js版本返回的是json格式:

结语

由于最近学习了beego, 然后想着之前有个框架echarts挺好玩的，就像整一个，刚好想起Express好久也没写过了，顺手写一个demo吧。技术还不到家，若有不妥之处，望大家留言指正。

Andy Dennis

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录