随笔-关于前端调取Python数据

description: 使用了jQuery的ajax，Python的Flask库和Flask的跨域包flask-cors

1. 安装依赖包

通过豆瓣源安装对应包

pip install 包名 -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com

2. 启动Python的Flask

from flask import Flask
app = Flask(__name__)
@app.route('/hello')#这个是对函数的注解
def hello_world():
    return "hello world"
if __name__=='__main__':
    app.run()

运行一下，控制台出现

说明已经布置完成，**字符串hello world**被发送到了localhost:5000/hello

此时直接访问/爬取都能直接获取"hello world"

3. ajax获取Flask发送的信息

$.ajax({
        type : "get",
        async : false,     //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "",    //服务器端放出api的地址，一般是把数据以json格式放出
        data : {},
        dataType : "json",        //返回数据形式为json
        success : function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            }
        },
        error : function() {//请求失败时执行该函数
        }
    })

重点在url。

1. 如果js文件一起部署到了localhost:5000，那么直接填"/hello"即可

2. 如果是外部js文件，那么需要填完整路径http://localhost:5000/hello.同时，解决跨域问题，否则会报错

   Access to XMLHttpRequest at ‘http://localhost:5000/api/msg’ from origin ‘http://localhost:63342’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

问题一：解决跨域问题

py引入flask-cors包，并用CORS包裹app即可，需要写上完整路径，http://不要忘记

from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/hello')
def hello_world():
    return "hello world"
if __name__=='__main__':
    app.run()

此后，ajax即可接受到hello world

问题二：访问成功，ajax仍然error请求失败

这有可能是dataType参数的原因。

因为有时候（刚刚）上传的数据是str类型，如果dataType设置成json，那么就接受不到数据，就会转到error

4. Python上传各种格式数据

一般来说，前端主要接受json和str类型的数据，最多的是json，所以一般在Python中先将数据处理一下再上传

Python的非常优秀的数据处理语言，这取决于它有各种数据分析的库，如numpy、pandas等

Python中可以做以下事情：

• flask只能上传str类型的数据，但上传json格式的字符串可以被ajax识别成json类型
• 可通过pandas将其他类型的数据转为str或json
• 在Python中把数据处理好后传给前端。这样前端接受数据后就不需要再处理数据，或者简单处理数据就可以直接用了

5. 例：用echarts显示csv的数据

• Python

  from flask_cors import CORS
  import pandas as pd
  from flask import Flask
  app = Flask(__name__)
  CORS(app)
  @app.route('/data/data1')#以上是跨域部署服务器及url
  def xianlu():
      #读取csv文件，第一列作为索引，dataSet是DataFrame的类型
      dataSet = pd.read_csv('DataA09/station.csv', index_col=0)
      #统计各线路的人次，保存在Series中
      array=pd.Series(dataSet['线路'].value_counts())
      #将{线路:人次}转为json
      json_split=array.to_json(orient='split')
      return json_split
  
  if __name__=='__main__':
      app.run()
  

  解析：csv文件如下图所示
  

  • dataSet：以编号为行索引，以"站点名称"、“线路”、"行政区域"为列索引。索引不算作数据内容
    

  • array：线路的人次。转为DataFrame的目的是可以转成json
    

  • json_split：Series是pandas中保存一维数组的类型。而DataFrame对应的是多维数组

    Series转为json有很多种形式，这里选择split比较合适。保存在json中的中文以Unicode编码，会看上去乱码。
    

• html：

  <div class="b_right_box">
      <div id="chart_5" class="echart" style="width: 100%; height: 3.6rem;"></div>
  </div>
  

• JavaScript：这里要注意，echarts接受的数据一般是Array类型的，不然可能报各种错

  function echart_5() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('chart_5'));
  
      $.ajax({
          type : "get",
          async : false,            
          url : "http://127.0.0.1:5000/data/data1",   
          data : {},
          dataType : "json",        //返回数据形式为json
          success : function(result) {
              //请求成功时执行该函数内容，result即为服务器返回的json对象
              var data = result;//data是str类型的json数据
              if (data) {
                  let index=data["index"]
                  let values=data["data"]
  
                  myChart.hideLoading();    //隐藏加载动画
                  myChart.setOption({        //加载数据图表
                      xAxis: {
                          type: 'category',
                          data: index,
                      },
                      yAxis: {
                          type: 'value',
                      },
                      series: [{
                          data: values,
                          type: 'bar',
                          barWidth: "35%",
                      }]
                  });
              }
  
          },
          error : function() {
              alert("错误")
          }
      })
  }