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",        //返回数据形式为jsonsuccess : function(result) {//请求成功时执行该函数内容，result即为服务器返回的json对象}},error : function() {//请求失败时执行该函数}})

重点在url。

如果js文件一起部署到了localhost:5000，那么直接填"/hello"即可
如果是外部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())#将{线路:人次}转为jsonjson_split=array.to_json(orient='split')return json_splitif __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",        //返回数据形式为jsonsuccess : 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("错误")}})
}