Flask+Axios+jQuery构建前后端通信的小例子

比较暴力但好理解的方法，下面详细说一下。

 

工具准备

Flask

pip install flask

Axios

https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js

数据

下面的例子用动物森友会中鱼类的价格、活动季节、图片等数据作为测试数据，通过关键词进行查询并做前端展示，数据来源：

https://raw.githubusercontent.com/chendaniely/animal_crossing/master/data/final/without_raw_html/acnh_fish_n.tsv

 

下面介绍实现前后端分离的过程：前端输入鱼的名称，点击前端“查询”按钮，通过 Axios 把前端输入的字符串传给后端的函数，函数通过鱼的名称进行检索，找出该鱼类的价格及图片链接，数据查询完成后，把结果传给前端进行可视化。

---

后端

首先是后端部分，创建一个 main.py 文件作为我们的后端主文件，首先引入相关包，创建一个 Flask 实例：

import pandas as pd
from flask import Flask, jsonify, request
from flask_cors import CORS
import traceback
​
app = Flask(__name__)
app.config.from_object(__name__)
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 1
​
CORS(app, resources={r'/*': {'origins': '*'}})

然后写处理数据的函数，将结果以 dict 形式存储：

# 数据处理
def get_data_by_keyword(keyword):
  df = pd.read_csv(base_url + 'animal-crossing-fish-info.csv&#