devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

用 Flask+Axios 实现前后端数据通信：查询动森鱼类价格

作者：繁依Fanyi0 | 2024-02-07 17:19:35

赞

踩

axios 接收后端数据可视化

对于数据分析/挖掘工程师，能把自己的数据分析or建模结果做成前后端兼备的 demo 是个比较有用的技能，这里介绍一种比较简单的实现方式，无需数据库，用 Flask 启动后端，依赖 Axios 实现前后端数据的互动。

工具准备

Flask

pip install flask

Axios

https:// cdnjs.cloudflare.com/aj ax/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 实例：

  1. import pandas as pd
  2. from flask import Flask, jsonify, request
  3. from flask_cors import CORS
  4. import traceback
  5. ​
  6. app = Flask(__name__)
  7. app.config.from_object(__name__)
  8. app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 1
  9. ​
  10. CORS(app, resources={r'/*': {'origins': '*'}})

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

  1. # 数据处理
  2. def get_data_by_keyword(keyword):
  3.   df = pd.read_csv(base_url + 'animal-crossing-fish-info.csv')
  4.   df['price'] = df['price'].astype(str)
  5.   price = df[df['name'] == keyword]['price'].iloc[0]
  6.   image = df[df['name'] == keyword]['image'].iloc[0].split('t')[0] + '>'
  7.   fish_info = {'price': str(price), 'image': image}
  8.   
  9.   return {'fish_info': fish_info}

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

  1. @app.route('/data_generate', methods=['POST'])
  2. def data_generate():
  3.   global data
  4.   
  5.   if request.method == 'POST':
  6.     
  7.     try:
  8.       post_data = request.get_json()
  9.       keyword = post_data.get('search')
  10.       data = get_data_by_keyword(keyword)
  11.       message = {'status': 'success'}
  12.     
  13.     except Exception as e:
  14.       traceback.print_exc()
  15.       return jsonify({'status': 'fail'})
  16.     
  17.     else:
  18.       return jsonify(message)

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

  1. @app.route('/get_data', methods=['GET'])
  2. def get_data():
  3.   global data
  4.   if request.method == 'GET':
  5.     try:
  6.       arg = request.args.get('name')
  7.       response_data = data.get(arg)
  8.       
  9.       return jsonify(response_data)
  10.     
  11.     except Exception as e:
  12.       traceback.print_exc()
  13.       
  14.       return None

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

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

前端

前端给后端发送数据

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

  1. <body>
  2. <div class="container" id="app">
  3.   <h3 style="text-align:center">动物森友会鱼类价格查询</h3>
  4. ​
  5.   <div style="text-align:center">
  6.     <input id="search-word" type="text" οnkeydοwn="jump(event);" placeholder="">
  7.     <button class="btn btn-search" id="click-search" type="button" value="start"
  8.             onclick="jump()">搜&nbsp;&nbsp;&nbsp;&nbsp索
  9.     </button>
  10. ​
  11.   </div>
  12. ​
  13. </div>
  14. ​
  15. </body>
  16. </html>

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

e18e0a0c908725b87f46991107dd3be2.png

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

  1. <script>
  2. function jump(){
  3.     var search_keyword=document.getElementById("search-word").value;
  4.     axios.post('http://127.0.0.1:8000/data_generate', {
  5.         search: search_keyword
  6.     })
  7.     .then(function (response) {
  8.         var status = response.data.status;
  9.         alert(status)
  10.         if (status == 'success') {
  11.             window.location.href = 'result.html'
  12.         } else {
  13.             alert("Error!")
  14.         }
  15.     })
  16.     .catch(function (error) {
  17.         alert("Error!");
  18.     });
  19. }
  20. ​
  21. </script>

前端拿后端发来的数据

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>动物森友会鱼类价格查询</title>
  6.   <link href="assets/css/mystyle.css" rel="stylesheet"/>
  7. </head>
  8. <body>
  9. ​
  10. <div id="fish-image">
  11. ​
  12. </div>
  13. ​
  14. <div id="fish-price">
  15. ​
  16. </div>
  17. ​
  18. ​
  19. </body>
  20. </html>

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

  1. <script src="assets/js/jquery-3.1.1.min.js"></script>
  2. <script src="assets/js/axios.min.js"></script>
  3.  
  4. <script>
  5. $(document).ready(function(){
  6.     var price_info;
  7.     axios.get('http://127.0.0.1:8000/get_data?name=fish_info')
  8.     .then(function (response) {
  9.         price_info=response.data.price;
  10.         image=response.data.image
  11.         document.getElementById('fish-image').innerHTML = image
  12.         document.getElementById('fish-price').innerHTML = "<p>价格：" + price_info + "铃钱</p>"
  13.     })
  14.     .catch(function (error) {
  15.         console.log(error);
  16.     });
  17. });
  18. </script>

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

python main.py

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

7da7f490256cfb1a1b8789044e9f27f0.png

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

完整代码可移步 Github：

https://github.com/cyansoul/flask-axios-example​github.com

第一时间围观更多关于数据挖掘的有趣内容，欢迎大家关注公众号「数据池塘」：

5d5b617c07a0e528a12a5d9e1607949c.png
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/66550
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号