本文共 3932 字，大约阅读时间需要 13 分钟。

前言

echarts是一个挺好的JS库, 值得一看。

另外本文会用flask, express, beego三个版本搭建后台服务器。案例虽然简单，但仍然有一些值得学习的地方。 最终实现的效果图如下(成绩随机产生):

项目结构

前端部分

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

案例参考自:

    
           
                   
       
   
        
    
        
    获取数据    
   
    

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

Flask

首先需要有python和pip, 若还没有的请看我之前的一篇博客:， 如果装好没有配置镜像的朋友请看这个: 。

弄好后下载flask这个包:

pip install flask

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

pip install flask_cors

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

from flask import Flask, jsonifyimport randomfrom flask_cors import *app = Flask(__name__)# app.config['JSONIFY_MIMETYPE'] ="application/json;charset=utf-8"app.config['JSON_AS_ASCII'] = FalseCORS(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/
   
    ')def pic(img_name):	pic= open('static/img/' + img_name, 'rb').read()	response = make_response(pic)	response.headers['content-Type'] = 'img/jpg'	return response
   

Express

需要先装有nodejs和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 - 1function 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：。

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

package mainimport (	"github.com/astaxie/beego"	"github.com/astaxie/beego/context")func main() {
   	beego.Get("/", func(context *context.Context) {
   		context.Output.Body([]byte("
hello beego
"))	})	beego.Run("localhost:3000")}

在终端中:

go mod init echart-grade-backend

其中echart-grade-backend是项目名称，大家也可以自行起个名称。

然后继续在终端输入

go mod tidy

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

package mainimport (	"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吧。技术还不到家，若有不妥之处，望大家留言指正。

转载地址：http://vfayk.baihongyu.com/