Vue前后台数据交互实例演示，使用axios传递json字符串、数组 ...

[color=yellow-o]Vue 前后台数据交互实例演示

• [color=yellow-0]第一章：后台实现
  
• ① Python 启用 Flask 服务器
  
• ② 后台启用成功验证
  
• [color=yellow-0]第二章：前台实现
  
• ① Vue 使用 Axios 实现接收 json 字符串、数组数据
  
• ② 前台接收数据演示
  

[ 推荐文章 ]
Python 地图篇 - 使用 pyecharts 绘制世界地图、中国地图、省级地图、市级地图实例详解
[color=yellow-0]第一章：后台实现

① Python 启用 Flask 服务器

后端使用 python 启用一个 flask 服务器。
将数组封装在 json 字符串里进行发送，前台直接在 json 字符串里读数据就行。

1. # -*- coding:utf-8 -*-
2. import flask
4. app = flask.Flask(__name__)
6. # 通过json传输数组数据
7. @app.route('/get_data')
8. def get_data():
9.     json_data = {
10.                 "data1":[48, 57, 55, 80, 67, 67, 29, 19,20,15,5,11,3,100,190],
11.                 "data2":[1, 57, 55, 300, 67, 67, 29, 19,20,15,5,11,3,10,190]
12.                 }
13.     return json_data;
15. # 后端ip
16. host_ip = "127.0.0.1"
17. # 端口号
18. host_port = 15004
19. app.run(host = host_ip, port = host_port)

复制代码

② 后台启用成功验证

启动后样式，下面的两行 200 是 2 个请求记录。

通过 http://127.0.0.1:15004/get_data 访问浏览器看看后台是否成功启用。

[color=yellow-0]第二章：前台实现

① Vue 使用 Axios 实现接收 json 字符串、数组数据

我们首先 npm install axios 安装 axios。
其中的 response.data 就是后端发送的 json 字符串数据，response.data.data1 就是数组 1。
注意 axios 使用前需要 import axios from 'axios' 导入下。
想自己验证的话可以把里面更新表格数据的内容注释掉，看看提示框能不能显示出数据。

1. <input type="button" @click="get_data()" value="点击同步数据" />
3. <script>
4. import axios from 'axios';
6. export default {
7.   methods:{
8.     // 将数据同步到表格中
9.     set_charts(data){
10.         // 提示框显示数据
11.         alert("数组1："+data.data1+"\n"+"数组2："+data.data2);
12.         // 更新表格数据
13.         let lineData = { ...this.lineChartData };
14.         lineData.datasets.forEach(dataset => {
15.           dataset.data = data.data1;
16.         })
17.         this.lineChartData = lineData;
18.     },
19.     // 向后台发送请求得到数据
20.     get_data(){
21.       axios
22.         .get('http://127.0.0.1:15004/get_data')
23.         .then(response => {
24.           // 调用表格数据同步方法
25.           this.set_charts(response.data);
26.           })
27.         // 请求失败抛出异常在控制台
28.         .catch(function (error) {
29.           console.log(error);
30.       });
31.     }
32.   }
33. }

复制代码

② 前台接收数据演示

这是演示的效果图，可以看到我们增加的按钮还有个预置的表格，点击一下按钮。

可以看到提示框展示的就是我们后台发送的数据。

提示框关掉后，可以看到表格里的数据也同步过来了。

喜欢的点个赞❤吧！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！