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

工具准备

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')df['price'] = df['price'].astype(str)price = df[df['name'] == keyword]['price'].iloc[0]image = df[df['name'] == keyword]['image'].iloc[0].split('\t')[0] + '>'fish_info = {'price': str(price), 'image': image}return {'fish_info': fish_info}

接下来是接收前端输入数据的部分，这里的 /data_generate 即为前端数据进行 post 的目的路径，通过 request 拿到前端出来的数据后，调用刚才写好的 get_data_by_keyword() 进行数据处理：

@app.route('/data_generate', methods=['POST'])
def data_generate():global dataif request.method == 'POST':try:post_data = request.get_json()keyword = post_data.get('search')data = get_data_by_keyword(keyword)message = {'status': 'success'}except Exception as e:traceback.print_exc()return jsonify({'status': 'fail'})else:return jsonify(message)

然后是将上一步处理好的结果数据传回前端，这里的 /get_data 为前端结果页面拿数据的路径：

@app.route('/get_data', methods=['GET'])
def get_data():global dataif request.method == 'GET':try:arg = request.args.get('name')response_data = data.get(arg)return jsonify(response_data)except Exception as e:traceback.print_exc()return None

最后一步就是启动 Flask 服务了（端口可自行设置）：

if __name__ == '__main__':
app.run(port=8000)

前端

前端给后端发送数据

后端完成后，就可以写前端页面了，首先建一个可输入关键词查询的首页 index.html，先写好静态部分，对后面需要操作的组件进行 id 的设置，以便后续调用。这里对 button 组件进行了 onclick 事件的设置，命名 jump()，这样我们在前端点击这个 button 时，就会触发 jump() 事件中的动作：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>动物森友会鱼类价格查询</title>
</head>

<body>
<div class="container" id="app"><h3 style="text-align:center">动物森友会鱼类价格查询</h3>
<div style="text-align:center"><input id="search-word" type="text" οnkeydοwn="jump(event);" placeholder=""><button class="btn btn-search" id="click-search" type="button" value="start"onclick="jump()">搜&nbsp;&nbsp;&nbsp;&nbsp索</button>
</div>

</div>

</body>
</html>

拖到浏览器中可以直接看到建好的组件了：

然后就要写用来发送和接收数据的 JavaScript 代码了！先把需要的 js 文件下载到本地，在 script 脚本头部调用，下面写将前端输入数据发送给后端的代码，也就是前面在 button 中设置的事件 jump()。这里的 "search-word" 即为输入框组件的 id，通过 document.getElementById() 取出输入框中传入的字符串，通过 Axios 发送给后端：

<script>
function jump(){var search_keyword=document.getElementById("search-word").value;axios.post('http://127.0.0.1:8000/data_generate', {search: search_keyword}).then(function (response) {var status = response.data.status;alert(status)if (status == 'success') {window.location.href = 'result.html'} else {alert("Error!")}}).catch(function (error) {alert("Error!");});
}

</script>

前端拿后端发来的数据

上面两步完成了“前端给后端发送数据”和“后端对前端传来的数据进行处理”两个步骤，接下来就是最后一步：前端取后端传来的数据处理结果，并进行展示。

再建一个 result.html 文件，静态部分创建两个 div，分别用来展示图片和价格：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动物森友会鱼类价格查询</title><link href="assets/css/mystyle.css" rel="stylesheet"/>
</head>
<body>

<div id="fish-image">

</div>

<div id="fish-price">

</div>


</body>
</html>

接下来就是 script 部分，这里通过比较粗暴的 document.getElementById('').innerHTML 方式写入了，也可以通过其他各种方式或插件用来展示数据：

<script src="assets/js/jquery-3.1.1.min.js"></script>
<script src="assets/js/axios.min.js"></script>

<script>
$(document).ready(function(){var price_info;axios.get('http://127.0.0.1:8000/get_data?name=fish_info').then(function (response) {price_info=response.data.price;image=response.data.imagedocument.getElementById('fish-image').innerHTML = imagedocument.getElementById('fish-price').innerHTML = "<p>价格：" + price_info + "铃钱</p>"}).catch(function (error) {console.log(error);});
});
</script>

至此，这个小例子就全部完成了，执行以下命令开启 Flask 服务：

python main.py

然后在本地浏览器打开 index.html，如输入关键词「Frog」进行查询，得到结果如下：

这个例子仅用来抛砖引玉，大家可以用 HighCharts、AntV 等图表库进行形式更多元的数据可视化展示。

完整代码可移步 Github：https://github.com/cyansoul/flask-axios-example

⬇️ 扫描下方二维码关注公众号【数据池塘】 ⬇️

回复【算法】，获取最全面的机器学习算法网络图：

Flask+Axios+jQuery构建前后端通信的小例子相关推荐

Vue第三部分(2)：Vue-CLI构建前后端分离项目以及打包部署
通过上一节,我们学习了vue脚手架的相关概念以及构建过程,那么开始我们的前后端项目吧 Vue-CLI构建前后端分离项目 1.项目环境初始化 1.安装 axios vue-axios(记得执行命令要进入 ...
如何使用websocket实现前后端通信
如何使用websocket实现前后端通信 websocket通信是很好玩的,也很有用的的通信方式,使用方式如下: 第一步由于springboot很好地集成了websocket,所以先在在pom.xml ...
Vue 脚手架结合 SpringBoot 构建前后端分离入门项目（实现增删改查）
Vue 脚手架构建前后端分离项目项目简介与预览数据库建表主要模块代码 index.js 路由代码 User.vue 用户组件 RAP2 创建接口进行测试切换路由组件的显示: this.$rou ...
05-ET框架的前后端通信1
TIPS: 本系列贴仅用于博主学习ET框架的记录文章目录前言一.ET框架的前后端如何进行通信的? 二.前后端的通信使用 1.编写protobuf消息体 2.编写C#代码 3.运行结果总结前言 ...
06-ET框架的前后端通信2
TIPS: 本系列贴仅用于博主学习ET框架的记录文章目录前言一.IMessage是什么? 二.使用步骤 1.编写proto消息体 2.编写C#代码 3.运行结果总结前言这篇文章记录ET框架 ...
【微信小程序】狮子鱼社区团购小程序V9.9.0完整前后端安装包+小程序前端
介绍: 狮子鱼社区团购小程序V9.9.0完整前后端安装包+小程序前端[包更新],新增付费会员专享商品购买! 狮子鱼社区团购小程序查看更多关于社区团购小程序的文章 ,社区团购,社区拼团,社区电商, ...
Flask使用ajax进行前后端交互
ajax前后端交互的使用已经非常普及了, 这种数据交互方式比表单提交数据带给用户的使用体验更好一些.同时,利用ajax交互时数据传输一般使用json,我们可以很方便的管理我们所需要的数据.只需要定义好 ...
前后端通信跨域网络协议 DNS CDN HTTPS
本篇文章有点长,内容比较枯燥,就当作知识点的整理了. 服务在局域网中通过某些服务软件开启WEB服务功能,在该局域网中其它用户可以通过该打开服务的电脑 IP,找到该服务下web页面,默认打开的页面是i ...
前后端通信，这中间到底发生了什么？
前两天面试,面试官问了我一个问题,刨根到底的问,把我问的快哭了,事后回来赶紧补功课! 面试官:前后端是怎么通信的我: 通过http发送一个请求,根据请求的地址,找到对应的SQL,返回最终的数据面试 ...

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